Posted by SeeDoubleYou on 18th November 2009
18

Shadowbox image gallery with thumbnails

Shadowbox is an amazing tool javascript popup replacemant for many different types of content. We all have seen many of the same tools and you probably have already spotted shadowbox as well. If you have not, be sure yo check it out since it is insanely simple to include in your site.

In this tutorial/showcase I show you how to add a filmstrip thumbnailpreview as in the following example:

Chrysanthemum

Tulips

Penguins

Desert

Hydrangeas

Koala


Although shadowbox does have an image gallery and even has slideshow functionality build in it doesn’t have the option to show thumbnails of the images in your gallery when shadowbox is open. Luckely, shadowbox is super easy to edit as well.

So I created this functionality myself. Well, I must be honest, credit goes to Peter Mitchell for posting a solution based on shadowbox v.3b but it didn’t fit my needs completely. First of all it didn’t look to my taste, secondly I wanted it to work with shadowbox v3.rc1 which is the current version and thirdly, some things were missing, like, what happens if we don’t have a thumbnail for a link. Lets get into the code!

First we need to make some changes to the code and later we need to adapt the css as well. Important note is that we will not break any of the existing functionality although the skin looks different and is optimized for thumbnail view. For each change I made I will show the before and after. In order for a thumbnail to show the link must be an image. The source for that image will be used for the thumbnail. If the link is not an image, the basic shadowbox counter will be showed. All the javascript that gets edited is done in shadowbox.js and all the css is done in shadowbox.css.

First we need to add the thumnail source info to the gallery elements.

  1. buildCacheObj: function(link, opts){
  2.  var obj = {
  3.  link:       link,
  4.  title:      link.getAttribute(‘title’),
  5.  options:    apply({}, opts || {}),
  6.  content:    link.href // don’t use getAttribute here
  7. };

becomes:

  1. buildCacheObj: function(link, opts){
  2.  var obj = {
  3.  link:       link,
  4.  title:      link.getAttribute(‘title’),
  5.  options:    apply({}, opts || {}),
  6.  content:    link.href, // don’t use getAttribute here
  7.  thumb:      link.firstChild && link.firstChild.src ? link.firstChild.src : null
  8. };

Next, we need to change the function that builds the counter

  1. var counter = ”;
  2. if(S.options.displayCounter && S.gallery.length > 1){
  3.   var len = S.gallery.length;
  4.  
  5.   if(S.options.counterType == ’skip’){
  6.     // limit the counter?
  7.     var i = 0,
  8.     end = len,
  9.     limit = parseInt(S.options.counterLimit) || 0;
  10.  
  11.     if(limit < len &amp;&amp; limit > 2){ // support large galleries
  12.       var h = Math.floor(limit / 2);
  13.       i = S.current – h;
  14.       if(i < 0) i += len;
  15.       end = S.current + (limit – h);
  16.       if(end > len) end -= len;
  17.     }
  18.     while(i != end){
  19.       if(i == len) i = 0;
  20.       counter += ‘<a onclick="Shadowbox.change(‘ + i + ‘);"’
  21.       if(i == S.current) counter += ”;
  22.       counter += ‘>’ + (i++) + ‘</a>’;
  23.     }
  24.   }else
  25.   var counter = (S.current + 1) + ‘ ‘ + S.lang.of + ‘ ‘ + len;
  26. }

becomes:

  1. var counter = ”;
  2. if(S.options.displayCounter &amp;&amp; S.gallery.length > 1){
  3.   var len = S.gallery.length;
  4.  
  5.   if(S.options.counterType == ’skip’ || S.options.counterType == ‘thumbskip’){
  6.     // limit the counter?
  7.     var i = 0,
  8.     end = len,
  9.     limit = parseInt(S.options.counterLimit) || 0;
  10.  
  11.     if(limit < len &amp;&amp; limit > 2){ // support large galleries
  12.       var h = Math.floor(limit / 2);
  13.       i = S.current – h;
  14.       if(i < 0) i += len;
  15.       end = S.current + (limit – h);
  16.       if(end > len) end -= len;
  17.     }
  18.     while(i != end){
  19.       if(i == len) i = 0;
  20.       if(S.options.counterType == ‘thumbskip’ &amp;&amp; S.gallery[i].thumb) {
  21.         //thumbskip
  22.         counter += ‘<a onclick="Shadowbox.change(‘ + i + ‘);"’;
  23.         if(i == S.current) counter += ”;
  24.         counter += ‘>’ + ‘<img src="’ + S.gallery[i].thumb + ‘" />’ + ‘</a>’;
  25.         i++;
  26.       }
  27.       else {    //skip
  28.         counter += ‘<a onclick="Shadowbox.change(‘ + i + ‘);"’;
  29.         if(i == S.current) counter += ”;
  30.         counter += ‘>’ + (i++) + ‘</a>’;
  31.       }
  32.     }
  33.   }else
  34.     var counter = (S.current + 1) + ‘ ‘ + S.lang.of + ‘ ‘ + len;
  35. }

The last step is to edit the html and the css so that the filmstrip will be displayed correctly. I will show you what I did to create mine but I encourage you to create your own look (and feel) to make it fit your needs.

  1. markup: ‘<div id="sb-container">’ +
  2.           ‘<div id="sb-overlay"></div>’ +
  3.           ‘<div id="sb-wrapper">’ +
  4.             ‘<div id="sb-title">’ +
  5.               ‘<div id="sb-title-inner"></div>’ +
  6.             ‘</div>’ +
  7.             ‘<div id="sb-body">’ +
  8.               ‘<div id="sb-body-inner"></div>’ +
  9.               ‘<div id="sb-loading">’ +
  10.                 ‘<a onclick="Shadowbox.close()">{cancel}</a>’ +
  11.               ‘</div>’ +
  12.             ‘</div>’ +
  13.           ‘</div>’ +
  14.           ‘<div id="sb-info">’ +
  15.             ‘<div id="sb-info-inner">’ +
  16.               ‘<div id="sb-counter"></div>’ +
  17.               ‘<div id="sb-nav">’ +
  18.                 ‘<a id="sb-nav-close" title="{close}" onclick="Shadowbox.close()"></a>’ +
  19.                 ‘<a id="sb-nav-next" title="{next}" onclick="Shadowbox.next()"></a>’ +
  20.                 ‘<a id="sb-nav-play" title="{play}" onclick="Shadowbox.play()"></a>’ +
  21.                 ‘<a id="sb-nav-pause" title="{pause}" onclick="Shadowbox.pause()"></a>’ +
  22.                 ‘<a id="sb-nav-previous" title="{previous}" onclick="Shadowbox.previous()"></a>’ +
  23.               ‘</div>’ +
  24.               ‘<div style="clear:both"></div>’ +
  25.             ‘</div>’ +
  26.           ‘</div>’ +
  27.         ‘</div>’,

becomes:

  1. markup: ‘<div id="sb-container">’ +
  2.           ‘<div id="sb-overlay"></div>’ +
  3.           ‘<div id="sb-wrapper">’ +
  4.             ‘<div id="sb-title">’ +
  5.               ‘<div id="sb-title-inner"></div>’ +
  6.             ‘</div>’ +
  7.             ‘<div id="sb-body">’ +
  8.               ‘<div id="sb-body-inner"></div>’ +
  9.               ‘<div id="sb-loading">’ +
  10.                 ‘<a onclick="Shadowbox.close()">{cancel}</a>’ +
  11.               ‘</div>’ +
  12.             ‘</div>’ +
  13.             ‘<div id="sb-info">’ +
  14.               ‘<div id="sb-info-inner">’ +
  15.                 ‘<div id="sb-counter"></div>’ +
  16.                 ‘<div id="sb-nav">’ +
  17.                   ‘<a id="sb-nav-close" title="{close}" onclick="Shadowbox.close()"></a>’ +
  18.                   ‘<a id="sb-nav-next" title="{next}" onclick="Shadowbox.next()"></a>’ +
  19.                   ‘<a id="sb-nav-play" title="{play}" onclick="Shadowbox.play()"></a>’ +
  20.                   ‘<a id="sb-nav-pause" title="{pause}" onclick="Shadowbox.pause()"></a>’ +
  21.                   ‘<a id="sb-nav-previous" title="{previous}" onclick="Shadowbox.previous()"></a>’ +
  22.                 ‘</div>’ +
  23.                 ‘<div style="clear:both"></div>’ +
  24.               ‘</div>’ +
  25.             ‘</div>’ +
  26.           ‘</div>’ +
  27.         ‘</div>’,

Last but not least, the css.

  1. #sb-info, #sb-info-inner {
  2.  height: 20px;
  3. }
  4. #sb-info-inner {
  5.  font-size: 12px;
  6.  color: #fff;
  7. }

becomes:

  1. #sb-info, #sb-info-inner {
  2.  position: absolute;
  3.  margin: 0; /* these must have no vertical margin or padding */
  4.  padding: 0;
  5.  left: 0px;
  6.  bottom: 0px;
  7.  overflow: hidden;
  8.  width: 100%;
  9. }
  10. #sb-info-inner {
  11.  position: relative;
  12.  height: 100px;
  13.  font-size: 12px;
  14.  color: #fff;
  15. }

Wait, there’s more!

  1. #sb-nav {
  2.  float: right;
  3.  height: 16px;
  4.  padding: 2px 0;
  5.  width: 45%;
  6. }
  7. #sb-nav a {
  8.  display: block;
  9.  float: right;
  10.  height: 16px;
  11.  width: 16px;
  12.  margin-left: 3px;
  13.  cursor: pointer;
  14. }
  15. #sb-nav-close {
  16.  background-image: url(resources/close.png);
  17.  background-repeat: no-repeat;
  18. }
  19. #sb-nav-next {
  20.  background-image: url(resources/next.png);
  21.  background-repeat: no-repeat;
  22. }
  23. #sb-nav-previous {
  24.  background-image: url(resources/previous.png);
  25.  background-repeat: no-repeat;
  26. }
  27. #sb-nav-play {
  28.  background-image: url(resources/play.png);
  29.  background-repeat: no-repeat;
  30. }
  31. #sb-nav-pause {
  32.  background-image: url(resources/pause.png);
  33.  background-repeat: no-repeat;
  34. }

becomes:

  1. #sb-nav {
  2.  position: absolute;
  3.  top: 0px;
  4.  right: 0px;
  5.  height: 48px;
  6.  padding: 4px 24px 4px 4px;
  7.  width: 200px;
  8. }
  9. #sb-nav a {
  10.  display: block;
  11.  float: right;
  12.  height: 48px;
  13.  width: 48px;
  14.  margin: 16px 0 0 0;
  15.  cursor: pointer;
  16.  text-decoration: none;
  17. }
  18. #sb-nav-close {
  19.  background-image: url(resources/custom/close.png);
  20.  background-repeat: no-repeat;
  21. }
  22. #sb-nav-next {
  23.  background-image: url(resources/custom/next.png);
  24.  background-repeat: no-repeat;
  25. }
  26. #sb-nav-previous {
  27.  background-image: url(resources/custom/previous.png);
  28.  background-repeat: no-repeat;
  29. }
  30. #sb-nav-play {
  31.  background-image: url(resources/custom/play.png);
  32.  background-repeat: no-repeat;
  33. }
  34. #sb-nav-pause {
  35.  background-image: url(resources/custom/pause.png);
  36.  background-repeat: no-repeat;
  37. }

And, one more.

  1. sb-counter {
  2.  float: left;
  3.  padding: 2px 0;
  4.  width: 45%;
  5. }
  6. #sb-counter a {
  7.  padding: 0 4px 0 0;
  8.  text-decoration: none;
  9.  cursor: pointer;
  10.  color: #fff;
  11. }
  12. #sb-counter a.sb-counter-current {
  13.  text-decoration: underline;
  14. }

becomes:

  1. #sb-counter {
  2.  margin: 4px 230px 24px 50px;
  3. }
  4. #sb-counter:after {
  5.  content: ".";
  6.  display: block;
  7.  height: 0;
  8.  visibility:hidden;
  9.  clear: both;
  10. }
  11. #sb-counter a {
  12.  text-decoration: none;
  13.  margin: 0px 6px 20px 0px;
  14.  cursor: pointer;
  15.  color: #fff;
  16.  display: block;
  17.  float: left;
  18. }
  19. #sb-counter a:hover {
  20.  color: #0f0;
  21. }
  22. #sb-counter a.sb-counter-current, #sb-counter a.sb-counter-current:hover {
  23.  text-decoration: underline;
  24.  cursor: default;
  25.  color: #fff;
  26. }
  27. #sb-counter a img {
  28.  border: solid 1px #000;
  29.  height: 85px;
  30. }
  31. #sb-counter a:hover img {
  32.  border: 1px solid #0f0;
  33. }
  34. #sb-counter a.sb-counter-current img, #sb-counter a.sb-counter-current:hover img {
  35.  border: 1px solid #fff;
  36. }

We’re almost done. The last thing we have to do is set the right options in our shadowbox setup. I’ll show an example how to set shadowbox to use our functionality in the init() function.

  1. Shadowbox.init({
  2.  slideshowDelay: 3,               //set this to use slideshow
  3.  counterType:    "thumbskip", //use our new functionality!
  4.  counterLimit:    10               //how many thumbnails can be shown
  5. });

Unfortunately it is not permitted to redistribute shadowbox. I do have the images for the buttons that I used for you. Place them in a folder called ‘custom’ under ’shadowbox/resources/’ if you want to use them with the css I made. For the original files go to http://shadowbox-js.com/download.html and download version 3.rc1. If you want to edit the code like I did it is best to download both the build and the source version, edit the sources, compress them yourself and use the rest of the build files.

So, this is about it. I am really looking forward to your feedback and any bugs you might find. Some css related things like image hovers will not work in older versions of internet explorer, but it will not really break functionality. Also, since this is the first full-blown I wrote for SeeDoubleYou.nl I really like to get feedback on how it is written. Is everything clear enough, is there to much blabbering or is it the best tutorial you have ever read, please let me know.

files:
sb_custom_images

Share and Enjoy:
  • Print
  • Digg
  • del.icio.us
  • Mixx
  • Google Bookmarks
  • email
  • LinkedIn
  • PDF
  • Reddit
  • Slashdot
  • StumbleUpon
  • Symbaloo
  • Suggest to Techmeme via Twitter
  • Twitthis

    18 Responses

  1. Ape says:
    March 12, 2010 at 4:22 am

    Hi thanks for the tutorial, unfortunately the code always seems to have changed by the time i go to download the source and edit it…

    I applaud your efforts though as i think that thumbnails are a no brainer for shadowbox. I’m not sure why they don’t add the functionality…

    I did notice that if you resize the window that the main image grows to fill the window, thus appearing behind the thumbnails instead of above.

    GL with the blog!

  2. SeeDoubleYou says:
    March 12, 2010 at 9:50 am

    Yes, I’ve noticed the differences in the new version. I will write a follow-up on how to fix that. When that time comes I will look in to the resizing part as well.

    Also, thanks for writing the first, non-spam response on the blog!

  3. Ape says:
    March 12, 2010 at 10:07 pm

    Great to hear!

    Is there a way to copy your code without it including the number bullets?

    What I’m trying to accomplish is setting the thumbs at the bottom so that they are forced to be displayed at a certain width regardless of how tall the image/browser is. I also want to keep that bar centered instead of to the edges.

    Thanks

  4. SeeDoubleYou says:
    March 14, 2010 at 3:06 pm

    I select the text with the mouse is doesn’t take the numbers. I am looking for a better code highlighter with better selecting capabilities. I’m not really getting what your plan is with the width. The width is fixed at the moment, could you explain further. The centered option would be nice but not that trivial. If you find a nice solution though please let me know.

  5. Ape says:
    March 18, 2010 at 1:12 am

    Hey,

    Ya if i copy a couple lines it looks like the numbers aren’t there but once you paste it they show up.

    Your sb-info div doesn’t have a set width, so the thumbs stick to the left and the nav sticks to the right. You can see it if you re-size the browser horizontally.

    Personally i’d like them to bunch together and center below the image instead of having a space between the thumbs and nav. However what you have is better than the last solution. Having the thumbs only display as wide as the image above was getting them chopped off, which was my main problem.

    I’m not really a js guy, but i can see where the css is organized in the file and when i get a chance i’ll try fooling around with the code.

    Thanks for your work!

  6. SeeDoubleYou says:
    March 18, 2010 at 9:26 am

    Once I get more time on my hands I will look further into this but for now you could start out by trying the following:
    edit shadowbox.css by removing the margin on ‘#sb-counter’. Also remove the float and the display on ‘#sb-counter a’. Then add a ‘text-align: center’ to #sb-info.

    I have only tested this the dirty way by editing with firebug. So don’t take this as a fool proof solution. You might want to check for example what happens if there are a lot more thumbnails to be displayed.

  7. Andy says:
    June 2, 2010 at 8:36 pm

    This tutorial is the type of gallery layout I want for my portfolio, but I’m clueless with css and even more lost when it comes to javascript. I’m using dreamweaver to code my gallery. Is there any way you can make a more detailed tutorial of this so even I can understand it? Keep up the good work!

  8. SeeDoubleYou says:
    June 2, 2010 at 10:17 pm

    Hey Andy, I’m glad you liked it. Since this tutorial doesn’t work for the newest version of shadowbox I’m considering whether I should rewrite this to work with the latest version or that I should think of a more robust solution that will keep working across newer versions. At the moment I’m still kinda busy (hence the low density in new posts) because I am working another tool to do linkbuilding (expect an article about that in a few weeks), but I hope that somewhere in the next two weeks I manage get some time to work on this. Any ideas will be much appreciated!

  9. dimple says:
    July 21, 2010 at 4:51 pm

    Hi,

    Always nice to see all the efforts to share you work with people, I must admit I was expecting a lot from your code but unfortunately as you said yourself, the original code a changed . did you give some thoughts about updating yours or did you abandon the idea ? ;-)

  10. SeeDoubleYou says:
    July 27, 2010 at 3:06 pm

    I was thinking on rewriting the whole thing to work with the newer version of shadowbox, but then I realized that this will keep happening until shadowbox offers a solid plugin feature. So currently I am searching for other solutions. Maybe another another viewer, I don’t know. I would be very happy to hear some thoughts about it though.

  11. Ape says:
    July 29, 2010 at 2:49 am

    Hey I’m Back!

    I just stumbled upon GalleryView ( http://spaceforaname.com/galleryview )

    Check out some of the demo galleries here:
    http://spaceforaname.com/gallery-light.html
    http://spaceforaname.com/gallery-dark.html

    As you can see from the documentation it’s just a matter of changing some options to achieve either one of those demos.

    Some very nice features implemented.

    His original site looks like it had some difficulties with his blog but he does seem dedicated to keeping the GalleryView project active.

    What do you think of it?

  12. Ape says:
    July 29, 2010 at 4:43 am

    Hmm Gallerific also looks interesting:

    http://www.twospy.com/galleriffic/

    The only thing these 2 are lacking is the full screen pop up, but i think with some clever coding you could use shadowbox to launch ontop of these galleries.

  13. Alex says:
    December 2, 2010 at 11:41 pm

    Hi seedoubleyou,

    I just love what you did to the original shadowbox. Looking for a framework for a private picture gallery I stumbled across your above samples – cute.

    Could you give me a hint on the files required to reproduce your mod? So far I’m aware of the below one – but sure I’m missing something important..

    shadowbox-base.js
    shadowbox-en.js
    shadowbox-img.js
    shadowbox.css
    shadowbox.js
    sizzle.js
    style.css
    swfobject.js

  14. SeeDoubleYou says:
    December 3, 2010 at 11:32 am

    Hey Alex. To reproduce the mod you need an older version of shadowbox, not sure where you can’t find them. I was planning on writing a plugin for the newer version of shadowbox, but until there’s no good documentation on that I keep this old version. There are some other gallery-script out there that might help you out though. I think that galleria Might be a good start. You could also look at some of the links in the above posts and here are some very nice jquery plugins, which are generally more easy to set-up (when you are used to using jquery). sites like this and that might help.

  15. Edusadops says:
    April 28, 2011 at 6:15 pm

    moet controleren:)

  16. Drivers King says:
    June 3, 2011 at 1:56 am

    Very nice post, I surely love this site, keep it up.

  17. j. millington says:
    July 8, 2011 at 6:40 pm

    any plans on an updated version of this mod? v3.03 has been out a while now and is nice and stable .. i tried my hand at an update myself, but cant seem to get it all going ( a lot of var names have been changed and im probably missing on in the translation .. that and the fact that im a novice at JS ). im sure others would agree that we’d love to see you update your code to work with the latest Shadowbox version.

  18. SeeDoubleYou says:
    July 10, 2011 at 4:40 pm

    I will release a new version of this site in a short while. From Then on I will update more frequently. I will definitely write a new post on this. I don’t think it will use shadowbox, but it will do the same. Anyway, check back in a few weeks.

Post your comments