Using links to launch Simple Image Lightbox Here is the result.įor comparison, here is the code for the butterfly example. The above onclick uses one of the example lightbox images. To launch the lightbox when the thumbnail is tapped, insert an onclick attribute: Change the image URL to your own thumbnail. The above is one of the example thumbnail images. This is an image tag to publish a thumbnail image: With the image URL, you can use the href or onclick attributes to launch the lightbox with that particular image in it.īecause it is most likely how you will use this, let's first show how to launch the lightbox by tapping an image thumbnail. To launch the lightbox, you need to have the URL of the image to place into the lightbox That's the main part since it is the code that launches the lightbox. It is assumed you have the above JavaScript pasted into a test web page. (For reference, the MDN Web Docs page talks about colors, including the rgba() and hsla() functions.)Įasy-to-implement lightbox for showing off a large image. Alternatively, the hsla() function may be specified instead of the rgba() function. If you decide to change the background color or opacity, replace rgba(0,0,0.5) with the rgba() values you desire. WillMaster_tAttribute("onclick",+"('"+DivIDvalue+"')") ĭ(WillMaster_ImageBoxNode) Ĭopy the JavaScript and paste it on the page that will have the lightbox. WillMaster_ImageBoxNode = document.createElement("div") Var DivIDvalue = "WillMaster_ImageBoxID" ĭ(WillMaster_ImageBoxNode) rgba() or hsla() with valid parameters. the complete color for the background behind Variable BackgroundColor needs to be assigned I'm putting the JavaScript here so it can be referenced when we talk about the code for the above examples. Here are two link and two button examples that will each launch the lightbox. And with a button or any other tappable HTML tag that can use an onclick attribute. However, the lightbox also can be launched with a link. Generally, the lightbox is launched when an image thumbnail is tapped. These two thumbnail images will launch a larger version of the image displayed in a lightbox. And examples - both live examples and example code. It's why I call it Simple Image Lightbox. The function is called with the URL of the image to display in the lightbox. The image that will launch the lightbox has an onclick attribute that calls the JavaScript function. (The default is the same as the lightbox examples on this page.) Optionally, you may specify a different background color or opacity for the lightbox. Paste some JavaScript on the page where the lightbox will be launched. I'll use it in this article.Ī version of the code developed for that project is in this article. The full-sized image centered on a partially transparent full-screen background is a "lightbox" for some people. And the display needed to go poof with a tap anywhere on the page. The image dimensions needed to be responsive to the screen size, but not larger than the natural dimensions of the image file. The full-sized image was to be centered on the page on top of a partially transparent full-screen background. A few days ago, a project required a simple way to launch a fill-sized image when a thumbnail image was tapped.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |