Added the Thumbnail Pop Up Tutorial to:
STEP BY STEP TUTORIALS for RSD FOUNDATION

Thumbnail pop ups using foundation reveal
Larger modal image windows with a full screen overlay
Click on the overlay or the icon to close the pop up images

Two Options:
Add text descriptions to the larger images
Add animations when the modal pops up
There is a list of animations in the example

By the way if you haven't set your browser for history you may need to refresh / reload the page to see updates

Hey! Thanks for this, it was really a great step by step tutorial!

I have a couple questions on the Thumbnail Pop Up
1. If I have several images on a page, do I just stack the large images when editing that don't show?
2. How do I prevent that page from loading slow if there are a bunch of thumbs and hidden large images? (Or is this not a concern?)
3. Is it possible to have like 50 pictures on one page?

Hi Kristi, thanks for saying so, I don't usually find out so that's good to hear.

1. You can just let those stack since they are hidden with the CSS until called by the script. Once called they are then center positioned with a modal so the initial positioning doesn't matter. That and they are hidden inside RSD when designing which helps.

2. Since this is one of the many foundation scripts and all the CSS is loaded if you use these or not with foundation, so you can't do anything about that part. On the images with this script they use it actually isn't very well written for efficiency. In my opinion the large images shouldn't be called on page load but only when they are clicked on, but that does pre-load them so there is no wait when they are clicked on. They are forced to write this kind of thing generically so it fits all, which is the problem with these kind of packages, easy to use but... So basically you just have to optimize the images in your art app for download.

3. Yes it is, but I wouldn't use this built in for an Image gallery. It's the issue it has with loading all the large images. I would suggest using a lightbox type of add in instead. Those typically call the large image from a link so only the thumbnails load initially. I personally use Jack Moores Colorbox since it's only 10KB but there are quite a few other options out there.

I just wrote a new script for using inside RSD to use for a gallery for this new site I'm doing but it doesn't use a modal window, it loads the thumbnails then replaces the large image when called. It's here: Gallery 2 Example but it depends on your design too. I typically like to use colorbox for most image driven site designs.

Hey - Great tutorial!!

Do you have a step by step - as to how to use "... I personally use Jack Moores Colorbox..." within RSD? Or is it pretty simple once you download that resource?

Thanks K
I wrote my own CSS for it but...
If Eric reads this maybe he'll share his tutorial link on using Colorbox, I think it's for RSD?
He has a patch from stack overflow for iphone landscape on there too...

If you run into a snag with it one of us will should be able to help you out.

Kristi, you could look into Lazy Loading the images so they do not load until just below entering the bottom fold.

I have been successful in using the Temp Image and a Jquery plugin called "Lazy Sizes".

Here is a link to the demo....

http://gluexp.coffeecup.com/bootstrap/p … /lazy.html

It would be great if Coffeecup would give us a Image Element to work with like the Temp Image. I am not even sure what one would use the Temp Image for ? We need to access the image tag to add our classes and attributes. This is not possible with the picture Element or Link.