Articles
Slide Thumbs
In this post I want to explain how to turn old boring image viewer into a nice-looking one with jQuery. It's simple just using some lines of java-script code. Implement this and enrich animation features to your web projects.
You can see the final result at this page, and you can download the complete source code with examples from here.
Step 1: Create the Mark-up
First we add container elements for output. The outer-most container is used to decorate the output with a background image and padding. The next container is the element that will be used to view the images through. The images and their captions are placed inside the inner-most container and wrapped with div
elements.
The images are all a uniform size, and the preview_inner
container will be sized to accommodate them. The image size will be used in the script that we'll add later.
01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. |
<div id="preview_wrap"> <div id="preview_outer"> <div id="preview_inner"> <div> <img src="1_b.jpg" alt="Leonardo Maia" /> <a target="_blank" href="http://www.leonardomaia.com.br/">Leonardo Maia</a> </div> <div> <img src="2_b.jpg" alt="skillicorn" /> <a target="_blank" href="http://skillicorn.org/">skillicorn</a> </div> <div> <img src="3_b.jpg" alt="theenergycell" /> <a target="_blank" href="http://www.energycell.co.uk/">theenergycell</a> </div> <div> <img src="4_b.jpg" alt="Fred Maya" /> <a target="_blank" href="http://fredmaya.com/">Fred Maya</a> </div> </div> </div> </div> |
Within the thumbnails container element, we add list of thumbnails linking to the image slides and an arrow indicating current position.
01. 02. 03. 04. 05. 06. 07. |
<div id="thumbs"> <div id="arrow"></div> <span><img src="1_s.gif" alt="Leonardo Maia" /></span> <span><img src="2_s.gif" alt="skillicorn" /></span> <span><img src="3_s.gif" alt="theenergycell" /></span> <span><img src="4_s.gif" alt="Fred Maya" /></span> </div> |
Step 2: CSS
The CSS is pretty simple but it sets up everything that is happening. Since overflow is hidden on the preview_outer
container what part of the image slide were showing is just a matter of setting a scrollLeft
value.
01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46. 47. 48. 49. 50. 51. 52. 53. 54. 55. 56. 57. 58. 59. 60. 61. 62. 63. 64. 65. 66. |
#preview_wrap { margin: 0 auto; padding: 22px; width: 550px; height: 400px; background: url('bg_preview.gif') top left no-repeat; } #preview_outer { overflow: hidden; width: 550px; height: 400px; position: relative; } #preview_inner { text-align: left; height: 100%; position: relative; } #preview_inner div { float: left; width: 550px; height: 400px; position: relative; } #preview_inner div a { position: absolute; bottom: 0; left: 0; display: block; width: 100%; text-indent: 20px; padding: 20px 0; color: #fff; background: url(bg_trans.png); text-decoration: none; font-size: 18px; } #thumbs { padding-top: 30px; position: relative; width: 750px; text-align: center; } #thumbs span { padding: 12px; width: 80px; height: 80px; cursor: pointer; background: url('bg_thumb.gif') top left no-repeat; display: inline-block; } #arrow { position: absolute; top: -13px; background: url('bg_arrow.gif') top center no-repeat; width: 104px; height: 39px; display: none; } |
Step 3: jQuery
Now, let’s add the JavaScript. The code is commented to explain what we’re doing.
01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. |
$(document).ready(function() { // Save the jQuery objects for later use. var outer = $("#preview_outer"); var arrow = $("#arrow"); var thumbs = $("#thumbs span"); var preview_pos; var preview_els = $("#preview_inner div"); var image_width = preview_els.eq(0).width(); // Get width of imaages // Hook up the click event thumbs.click(function() { // Get position of current image preview_pos = preview_els.eq( thumbs.index( this) ).position(); // Animate them! outer.stop().animate( {'scrollLeft' : preview_pos.left}, 500 ); arrow.stop().animate( {'left' : $(this).position().left }, 500 ); }); // Reset positions on load arrow.css( {'left' : thumbs.eq(0).position().left } ).show(); outer.animate( {'scrollLeft' : 0}, 0 ); // Set initial width $("#preview_inner").css('width', preview_els.length * image_width); }); |
And that’s about it! If anyone has any questions, suggestions or better examples, please do share by dropping a comment on the site.
User Comments
-
Hi, This is great but does it really apply when you have more than 4 images? Or will you have to make a page that scrolls Horizontally? But the main image is so big and the arrow points to a preview image thus limiting to 4 image galleries? Can you give an example of how this solution would work with 25 images? Thanks, tribui
-
Hi, really really nice implementacion, is there a way to autoplay the slideshow? Thanks a bunch for this!
-
Hi, Great article! I had one question. wanted to know if this can auto play as well as fade in and out instead of the slide?
-
Did css has scrollLeft property?
-
hello, nice script just the same as the one ive been searching for, but i wonder how can i reposition the thumbs to be aligned horizontally at the left side of the image?
-
This is one of the most beautiful sliders I have seen... I made use of it on my site here: SOOO MUCH!
-
Hey, great work. Is there a way u can change it so it shows a real html file instead of a larger picture? Thanks
Very nice, thanks, I like the thumbnail navigation and following arrow