Streaming live at 10am (PST)

[Tutorial] Here's My Sites With Lightbox (And How To Implement It)


#1

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.

  1. Dremon Studios
  2. 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 https://webflow.com/dashboard/sites/your-site-here/code 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.


#2

Hey man,

I would love to implement this on my site:

http://thebestbuds.webflow.com/comicepisode4

So that if you click on each image, it loads in a lightbox, but I know VERY little about code and am having some trouble implementing it. Can you dumb the process down a little bit, or cater it to me a little more? Currently all of my files are hosted locally. I'd also like this set up, so that each comic has the lightbox viewer (currently all comics on the home page link to the same comic page)

Thanks!!


#3

Yes I can. When are you free? we can do a teamviewer session.


#4