Here’s a couple sites where I implemented some lightbox functions with Lightbox2 and some new code that I found to make the lightbox container automatically resize.
- Dremon Studios
- Style Clothing Co. (Click the images on the second slider)
You can grab the lightbox pack here
Here’s my custom code in the dashboard under the “Add code before </body> tag” section:
<!-- Lightbox Code -->
<script src="http://"path to lightbox jquery"/jquery-1.10.2.min.js"></script>
<script src="http://"path to lightbox script"/lightbox-2.6.min.js"></script>
<link href="http://"path to lightbox css"/lightbox.css" rel="stylesheet" />
Add the code above under Design Responsive Websites - Webflow under the body section replacing the links above with your own hosted links. (and replacing the site above with your site name)
Basically, what you need to do is host the folder on a site like Dropbox or Google Drive and get a direct link to the three files above in the same folder structure as the zip above.
You’re gonna need the new lightbox2 script so that way the windows resize accordingly. You can grab that here. Make sure you replace this lightbox script with the old one. It has to have the same name as above
You need to edit the lightbox.css also. Open the lightbox.css file with something like Notepad++ and look for these tags: .lightbox.lb-image & .lb-outerContainer
.lightbox.lb-image should have a witdth added with 100% like so
.lightbox .lb-image {
display: block;
height: auto;
width: 100%;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}
and so should .lb-outerContainer:
.lb-outerContainer {
position: relative;
background-color: white;
*zoom: 1;
width: 100%;
height: 250px;
margin: 0 auto;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
Once you have all the files in place and the code in the dashboard you can call the lightbox by using this code in an embed block:
<a href="image.jpg" data-lightbox="Image Group"><img src="thumb.jpg"></img></a>
where the first “image.jpg” your image that you’re displaying and the “thumb.jpg” is the image that links to the lightbox overlay or image thumbnail if you will. “Image Group” is for images that you want to display in a slideshow. For instance, if two of these have the same “Image Group” name, you can flick back and forth between the pictures using the arrows when you hover over the picture.
It took me FOREVER to figure this out and I saw some people struggling with making a lightbox work well with webflow. So I decided to post this for those in need.