Add Lightbox Function

Hello,

First this is the best & easiest app I have used to make a html/css website. Thank you so much for this.

One question, is there anyway to add a lightbox function to images? and if not I think it will be a great “add” to webflow because will make it work better for galleries, portfolios and app websites.

Thank You

5 Likes

Hi Kiku! What do you mean by a lightbox function? You’re thinking a modal window that shows up when you click on an image? I like the idea. It kinda behaves like a separate page showing off your full size image correct?

1 Like

Great that you like it … Yes just like that, you can have a images as a preview thumb but when you click on it it will pop up, in full size ( or if when it pops up it can have a video embedded too. I think this will help a lot on the showing off the portfolio or gallery.

1 Like

This is totally something we could do in the future. Thanks for your feedback!

5 Likes

Please do, I’m currently running into a mess with webflow and fancybox not wanted to place nice with each other. I actually came to the forums hoping to find if someone had a solution/suggestion for a good photo gallery to work with.

2 Likes

I am running into similar issues with trying to use the JQuery pluggin Fancybox for my photo gallery.
is there a way to make it work?
Can it be integrated into the code when exporting the website?
Thanks for this great tools!

1 Like

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.