Add Lightbox Function

You can make Fancybox play nice with Webflow using the embed block. Here is the EMBED block that I inserted right after a rough image gallery that was based on one of webflow’s sample templates:

<script type="text/javascript">

(function($){
	$(function(){
  
		/* in web flow, i added the 'lightbox-img-container' class to my gallery div,and 'lightbox-me' to each div containing an uploaded image */

  			var imagesToLightbox = $('.lightbox-img-container .lightbox-me img');

  			imagesToLightbox.each(function(index, el){ 
    
    				var imgURL = $(el).attr('src');
    				var img = $(el);

    				img.wrap("<a class='lightbox-link' href='"+ imgURL + "'></a>");

    				// get the inserted DOM reference
    				lightboxLink = img.parent();

    				$(lightboxLink).fancybox({hideOnContentClick: true});

  			});
  
		}); // dom load

})(jQuery);

While this works, as a general matter it would behoove Webflow to add common elements like lightboxes, image galleries, sliders and other common UI elements that are provided ‘off the shelf’ by sites like striking.ly, squarespace & weebly. IMO, if webflow can provide some of the conveniences the way these lesser-tooled & more restrictive sites do, they will have quite an impressive offering.

1 Like

An Image gallery or light box would be awesome. I have several pages for myself and clients that like to show of images.

http://ateliersainthonore.webflow.com/private-showroom-jackets

click on zoom, resize window :slight_smile: None of your script is responsive. You should start from a paper scratch to develop features in Webflow, guys :slight_smile: I’ll post a tutorial for this maybe this weekend. I have few projects to work on already.

1 Like

Really struggling to add lightbox any news on a tutorial or when this funcitionality will be added. Totally impressed with what I have seen so far. Keep up the good work.

Contact me over Skype. I’ll help with the lightbox :slight_smile: Check my profile for contact details.

We will be implementing a lightbox after we release an asset manager (where your images and other files will be stored). With that foundation we can create a Lightbox appear for links.

Thanks for your patience!

5 Likes

I’ve seen a webflow site designs with this: http://www.frescojs.com/

It’s ideal for what I need and I’d imagine many more but I haven’t a clue how to implement it into my site!

Any ideas?

Wow Sergie, so there will eventually be a way to keep all my assets organized and drag and drop them where I please? Now that is a squarespace killer. I keep ending up on their site because I am drawn to the ease of drag and drop image management for galleries and such. But they don’t offer much in the way of building a custom site let alone export without wordpress. If you guys get this out I’ll be ecstatic! Any idea how long it might be? I am trying to decide when to pull the trigger on my pro plan. Also, if you need testers, I am available.

Yep Dave that’s the idea! We’ll most likely be working on these features after our next big feature release. So hang tight!

@Harry_Hammond I tried to implement Fresco in Webflow, but it’s not working because Webflow doesn’t store images locally with the css/html files. It stores images on a CDN which makes them load faster. Because of this you can’t link to an image locally the way Fresco wants you to. We’ll be working on Lightbox soon.

2 Likes

As far as Fresco, if you were using an exported version with the images contained in the images folder it would probably work right? You are referring to hosting on webflow where the images are stored on a CDN right?

And I can’t wait to see what you guys come up with. Any timeline? Within the next month or 2 I hope.

Yeah Dave Fresco should work when exported if the images are contained in a local folder. As far as timeline yeah we’re shooting for release within next two months for sure!

1 Like

I moved a post to a new topic: Next feature release?

1 Like

Yes, please keep us posted on the Lightbox progress, - it’s so desperately needed!

Yes please! Loving webflow and feeling very empowered. A lightbox and custom tool-tip function would be amazing.

Hey guys we’ve started work on a native Webflow Lightbox. We’re hoping to have it ready by the end of the month. We’ll keep you posted.

5 Likes

Thanks Sergie! The is excellent news! This is the one feature i’m dying for to complete my site. I’ve been struggling with a way to show lots of work in a portfolio site, and jumping to a new page each time just isn’t cutting it – or at least i’m having trouble finding a way to make it elegant with my “one page” site design.

Can I ask that the new lightbox feature you’re implementing NOT load in all the lightbox images when the page loads but wait to load them when a thumbnail is clicked. (Muse does this and it’s a total show stopper for sites with large galleries)

Also, I’m hoping that the feature will allow for clicking a single thumbnail image to show multiple images in a slideshow. For example, say I have a page with 20 thumbnails images. Each thumbnail image when clicked will show it’s own set of images in a lightbox gallery in a slideshow fashion.

I can’t wait to take this feature for a spin.

Loving Webflow by the way!

Bryan

I’ve found lightboxes to be tricky responsively in the past, they never really user tested very well. Though from a quick scout around, I see that there are now quite a few responsive options which seem to have improved things:

http://webdesignandsuch.com/responsive-image-lightboxes-websites/

Yup these are things we’re planning on implementing.

Hello! For some reason it is impossible to me, you don’t look?
https://preview.webflow.com/preview/videobg1?preview=7e8b7f9804089ba1525da1fcb24649ae

@John_Swanson, It isn’t necessary to add lightbox using an embed anymore. Webflow has a built in widget with many options:

Tutorial video:

You can build a lightbox gallery of grouped images that launch from a single image thumbnail
-or-
build an array of individual lightbox instances that all point to a group gallery.
-or-
individual thumbs with single full size images.

and the lightbox also supports video.

1 Like