Fork me on GitHub
Post Format
May 16, 2011

jQuery Image Gallery with Twelve Transition Effects: SmartGallery

SmartGallery is an interactive image gallery that is specifically designed to support huge data. It is lightweight, lightening fast and fully customizable. Powered by jQuery, SmartGallery comes with twelve transition effects including some unique transition effect and thumbnail navigation.

Samrt Gallery: jQuery Image Gallery with Twelve Transition Effects

There are many ways, you can integrate this jQuery image gallery into any web page to showcase products, presentation slides or high-resolution images. SmartGallery provides all the features of an image gallery including:

  • Twelve Transition Effects (random or your choice)
  • Thumbnail Navigation (with Auto Hide functionality)
  • Customizable Image Labels
  • Automatic Image Scaling (with support for high-resolution images)
  • Customizable Animation/Transition Speed (Default 1000 milliseconds)
  • Customizable Thumbnails (Masking/Opacity, Scrolling, Number of thumbnails)
  • Customizable Image Display Time (Default 3000 milliseconds)

Supported Twelve Transition Effects:

  • Fade In
  • Blind
  • Appear
  • Fill In
  • Explode
  • Jumble
  • Rising Bars
  • Falling Bars
  • Paint
  • Diagonal
  • Crunching Bars
  • Slide In
SmartGallery Parameters List
  • random: True/false, set it to false if you want to use single transition
  • animation: Type of transition you want to use, you can use one of the following
    (fadein, blind, fallingbars, appear, fillin, explode, jumble, risingbars, paint, diagonal, crunchingbars, slidein)
  • animationspeed: Speed(milliseconds) at which the transition effect complete, default is 1000
  • imagedisplaytime: Delay(milliseconds) before displaying next image, default is 3000
  • noofthumbnails: No of thumbnails to be displayed at a time, default is 6
  • masked: If true thumbnails will be displayed with water mark effect, default is true
  • thumbnailscrollspeed: Speed(milliseconds) at which thumbnails scroll back and forth, default is 2000
  • stickthumbnails: True/false if true close button needs to be clicked to hide thumbnails, auto hide otherwise, default is false
Using SmartGallery

In your HTML file add the following in the head section.

  • Add a reference to latest jQuery script
  • Add a reference to smart-gallery.min.js file
  • Add a reference to smart-gallery.css file

Add add block element(div) and add your images as shown below

<div id="smart-gallery"
    <div id="smart-gallery">
        <a href="images/cubagallery-img-1.jpg" title="First Image">
            <img src="images/cubagallery-img-1.jpg" /></a> 

            <a href="images/cubagallery-img-2.jpg"
                title="Second Image">
                <img src="images/cubagallery-img-2.jpg" /></a>
    </div>
 </div>

Smart Image Gallery will be displayed in a compact mode initially, to display thumbnails you need to click show thumbnails button show thumbnails

Now add the following code to your HTML file’s head section.

 <script type="text/javascript">
         $(document).ready(function() {
        $('#smart-gallery').gallery({ stickthumbnails: true, random: true});
        });
    </script>
View Demo

Related Posts

  1. jQuery Social Media Share and Bookmark Plugin: jsShare
  2. jQuery Image Preload Plugin: Smart Preloader
  3. jQuery Image Slider Plugin: Smart Background Slider
  4. jQuery Content Slider :jsCarousel
  5. jQuery Pagination Plugin: Smart Paginator

54 comments

  1. Pingback: 40 jquery plugins | Noe Alonso Blog

  2. Pingback: 50 Awesome Free Slideshow, Image and Content Slider jQuery Plugins - Geeks Zine

  3. Pingback: 42 Latest jQuery Image and Content Sliders Plugins | i World Updates

  4. Pingback: 40 best slider sliding effect jQuery plugin Web Page Design | Web Page Design Templates | Html5 Template

  5. Pingback: 51 Best Useful jQuery Plugins Download And TutorialsBest Smashing | Best Smashing

  6. Pingback: Coolest Jquery image slider plugins - Website Design Huntsville and Muskoka

  7. Pingback: 21 Effective jQuery Image Slider Plugins And Tutorials - NaughtyDesigner

  8. Pingback: 7 Hand Picked Responsive jQuery WordPress Plugins | AnimHuT

  9. Pingback: 10 Useful Responsive jQuery Slider Plugins « Blog de xkortazar

  10. Pingback: 10 Useful Responsive jQuery Slider Plugins

  11. Pingback: 45 Fresh jQuery Plugins and Tutorials | Web Design Burn

  12. Nicola

    22/05/2012 @ 4:11 am

    Hi, I am trying to use this gallery with explode parameter, but it isn’t working, it is just displaying all images static without any animation. Can you check my syntax? $(document).ready(function() {
    $(‘#smart-gallery’).gallery({ stickthumbnails: true, random: true, animation: explode});
    });

    Thanks, Nicola

    Reply

  13. Pingback: 42 Latest jQuery Image and Content Sliders Plugins | iWorld Updates

  14. Pingback: Best Of 2011: Best Useful jQuery Plugins And Tutorials Don't Forget to participate in a contest where you can win the world's biggest user interface elements pack "Futurico UI Pro" for your design projectsi | creativectors.com

  15. Pingback: jQuery Image / Content Slider Plugin: Quake Slider | EGrappler

  16. Pingback: SmartGallery - jQuery Interactive Image Gallery | Smashzine

  17. Pingback: 8 jQuery Image Sliders with Impressive Transition Effects « tutorials

  18. Pingback: html5 » html5/css3/javascript/webApp/android/php/java/ » 8 个拥有非常炫切换效果的jQuery Image Sliders插件

  19. Pingback: Etkileyici Geçiş Efektleriyle 8 Harika JQuery Slider | webloti

  20. Pingback: Top 20 Image Slider jQuery Plugins

  21. Pingback: 40+ Fresh jQuery Image and Content Sliders Plugins « cre8tives

  22. Pingback: Backlink Center » Best Of 2011: Best Useful jQuery Plugins And Tutorials

  23. Pingback: Best Of 2011: Best Useful jQuery Plugins And Tutorials Don't Forget to participate in a contest where you can win the world's biggest user interface elements pack "Futurico UI Pro" for your design projectsi | craetivectors.com

  24. Pingback: 45 Fresh jQuery Plugins and Tutorials | Resoures | UNNO PROFESSIONAL MAGAZINE*

  25. Pingback: [Pic]2011年最佳实用的jQuery插件和教程 « 朝九✓晚五

  26. Pingback: Midriff Affiliates

  27. Pingback: 2011年最佳实用的jQuery插件和教程 | Jackchen Design 1984

  28. Pingback: Inspiration Best Of 2011: Best Useful jQuery Plugins And Tutorials

  29. Pingback: 40+ Fresh jQuery Image and Content Sliders Plugins | WebScriptPlus.com

  30. Pingback: 40+ Fresh jQuery Image and Content Sliders Plugins | Free Web Design Tucson

  31. Pingback: Fan Capucino Design » Blog Archive » 40+ Fresh jQuery Image and Content Sliders Plugins

  32. Pingback: 40+ Fresh jQuery Image and Content Sliders Plugins | designerbooster

  33. Pingback: 40+ Fresh jQuery Image and Content Sliders Plugins | TrolWebDesign

  34. Pingback: 40+ Fresh jQuery Image and Content Sliders Plugins | WebFree.ro

  35. Pingback: 40+ Fresh jQuery Image and Content Sliders Plugins | Graphic Design

  36. Pingback: 40+ Fresh jQuery Image and Content Sliders Plugins | Cairns Web Design

  37. Pingback: 40+ Fresh jQuery Image and Content Sliders Plugins « CSS Tips

  38. Pingback: 40+ Fresh jQuery Image and Content Sliders Plugins | EtutsLive.com

  39. Pingback: 40+ Fresh jQuery Image and Content Sliders Plugins | Wrhel Consulting and Design

  40. Pingback: 40+ Fresh jQuery Image And Content Sliders Plugins

  41. Pingback: Best Useful jQuery Plugins And Tutorials | GraphicShared | Download Graphic Tools

  42. Pingback: Galleria di Foto Piena Di Effetti – jQuery Plugin Smart Gallery | Fedeweb

  43. Pingback: 40+ Useful and Fresh jQuery Plugins | HeroicTuts.com

  44. Pingback: 40+ Kullanışlı ve Taze Jquery Uygulamaları | internet, tasarım, teknoloji ve kültür

  45. Pingback: 40+ Useful and Fresh jQuery Plugins

  46. Usman

    17/10/2011 @ 11:26 am

    Hello Shahbaz – Thanks for posting a useful image gallery but the demo doesnt work on IE7 and IE8. The spinner keeps spinning but no images appear. I am on a windows 7 machine. However, it works well in IE9 and all other browsers. Can you please give a tip on how to resolve this or do it yourself :) Many thanks,

    Reply
  47. Stanley Ojadovwa

    15/08/2011 @ 9:44 pm

    Thanks for the great share. Like Alexey rightly said, it will be good to have namespace with prefix than using common names like thumbnails.

    Also, i want to know if it’s possible to have the default display in full including showing the thumbnails. The compact mode will not help me. Thanks

    Reply
  48. Abdelsame

    11/08/2011 @ 1:03 pm

    thank you for this good Slide,
    i put it to my web http://www.dahlia-deko.de its working good, but i have sume Problem withe the produkt light box
    hes not showing produkt pictures moor !
    and another problem, i get the Slide in all web pages ! i need it only in the main Page !

    thank for helping !

    Reply

  49. Pingback: SmartGallery - Gallery Jquery Plugin With Twelve Transition Effects | SmashZine

  50. Alexey

    20/05/2011 @ 12:25 pm

    It would be easier to use the gallery with CSS classes prefixed by a kind of namespace (like sg-), because used class names are very common (e.g. “thumbnails”, “preview”, “left”, “hidden”, etc) and even they are applied inside “min-gallery” class, they are also influenced by other classes in web-application with matching names.

    Reply

Leave a Reply

Required fields are marked *.

*