Home

Thumba : show your thumbnails gallery like Google images to your visitors - jQuery plugin

Késako ?

Works on IE8+ , FF, Chrome, Safari & more...!!

Thumba is a gallery jQuery plugin, that displays thumbnails as Google images. You can navigate by moving the mouse, or using "Left" & "Right" arrows.
Press "Enter" or click on a thumbnail to open it into a lightbox.

Thumba download package

  • Thumba v1.0
    • jquery
      • Thumba.jquery.js
      • Thumba.jquery.min.js
      • jquery-ui.js
      • jquery.js
    • css
      • Thumba.jquery.css
    • images
      • thumbs
        • picasso1.jpg
        • picasso2.jpg
        • ...
      • big
        • picasso1.jpg
        • picasso2.jpg
        • ...
    • index.php

Thumba implementation

1. First, include the CSS & jQuery files

<!-- include CSS & JS files --> <!-- CSS file --> <link rel="stylesheet" type="text/css" href="Thumba.jquery.css" media="screen" /> <!-- jQuery files --> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery-ui.js"></script> <script type="text/javascript" src="Thumba.jquery.min.js"></script>

2. HTML code

<!-- First, write your HTML --> <div class="ThumbaGallery"> <ul class="thumba"> <li> <!-- add "thumba_default" class to the link for initializing Thumba plugin !! --> <a href="images/big/picasso1.jpg" class="thumba_default" title="Legend of the image"> <img src="images/thumbs/picasso1.jpg" alt="image1" /> </a> </li> <li> <a href="images/big/picasso1.jpg" title="Legend of the image"> <img src="images/thumbs/picasso1.jpg" alt="image2" /> </a> </li> ... ... </ul> </div>

3. Finally, make a simple Thumba plugin call

<script type="text/javascript"> $(document).ready(function(){ // simple Thumba plugin called $('.ThumbaGallery').Thumba(); // more complex Thumba plugin called $('.ThumbaGallery').Thumba({ effectThumba : 'linear', keyNav : false, coeffZoom : 3 }); }); </script>

Thumba options

effectThumba
String
Default : 'easeOutBack' - Thumba box effect when moving - jQuery UI effects
effectDuration
Integer
Default : 450 - Speed in ms of the Thumba div moves
keyNav
Boolean
Default : true - Allow navigation with left & right arrows or not
mouseNav
Boolean
Default : true - Allow navigation with mouse or not
coeffZoom
Float
Default : 2.5 - coefficent of the image Zoom
speedOpenLightBox
Integer
Default : 100 - speed in ms of the opening of Thumba LightBox
legendPadding
Integer
Default : 5 - padding of the paragraph containing the image legend
defaultAlt
String
Default : 'default text for alt attribut' - 'alt' property value when link has no 'title' property
autoCorrect
Boolean
Default : true - Auto-correct lightbox position if it's display out of the browser
legendOpacity
Float
Default : 0.8 - Opacity of the legend container

Thumba Methods

Thumba plugin has actually no methods. But if you think it will be useful to add some methods, please let us know it :)

Who use Thumba on the web ?

If you use Thumba Plugin into your website and you want to be added here, please contact us !
We will add you with pleasure :)

How can you help us ?

If you love our work, you can show us your admiration by having a look on the ads, free for you, good for us =).THANKS !