Galleria

Javascript Library: jQuery
License: GPL
Found Via: DevKick

Galleria is a javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box defined by CSS.

Add Comment

Discussion 15 Comments

  1. Brad Frost says:

    Any way to customize the thumbnails so they automatically horizontally scroll if you have too many images?

  2. How do the thumbnails get generated? It is something that the user has to specify?

  3. cito says:

    Those thumbnails are just normal images resized using CSS – it is why the big ones are loading so fast.

  4. Angie says:

    Love it, but it if the back button is hit, you go to the previous image. Depending on the situation, that may or not be a good thing. I can see this being really useful in a separate window / modal window type of situation. Very cool though!

  5. Cito says:

    I have tested it on one of my pages but I think that it is useless in gallery bigger than 10 high quality photos – in that case the website is loading too long.

  6. Unreal Media says:

    Very nice. Nice and smooth :)

  7. Tony says:

    How can i use this gallery without any thumbnails? Just the large picture and “next / prev”

    Somebody? :)

  8. Woody says:

    Is it possible to include links in photo captions?
    I tried changing all symbols to < and > but it didn’t work…

  9. Hi, I have a php integrated website and I linked the images with a database everything is all fine except that when we click on the picture the URL is changing and showing all the full path to the images.. that is a problem for security reasons.. any way to make that encrypted or something??
    thanks in advance..

  10. Seb says:

    So.. Would I be allowed to use this on a website?? Also, in a nutshell, what does the GPL kinda mean?

  11. I2008 says:

    I am new to coding and i have the Galleria 1.0b with thumbnails at the bottom of the main large photo. I would like to know how can i move the thumbnails to the top so when there are clicked, the large photot appear at the bottom of the thumbnails.

    Much apperciated if you can tell me how this can be done and where to put the coding. If you can also let me know how can i make the tranaction between the photos smoothers. My coding as follows;

    var INTERVAL = 2000;
    var slideshow_timer = null;
    var is_sliding = null;
    function slideShow()
    {
    is_sliding = true;
    $.galleria.next();
    is_sliding = false;
    }

    if (is_sliding== null)
    {
    slideshow_timer = window.setInterval(slideShow, INTERVAL);
    is_sliding = false;
    } else if (!is_sliding)
    {
    window.clearInterval(slideshow_timer);
    slideshow_timer = null;
    }

    $(document).ready(function(){

    $(‘.gallery_demo_unstyled’).addClass(‘gallery_demo’); // adds new class name to maintain degradability

    $(‘ul.gallery_demo’).galleria({
    history : false, // activates the history object for bookmarking, back-button etc.
    clickNext : true, // helper for making the image clickable
    insert : ‘#main_image’, // the containing selector for our main image
    onImage : function(image,caption,thumb) { // let’s add some image effects for demonstration purposes

    // fade in the image & caption
    image.css(‘display’,'none’).fadeIn(1000);
    caption.css(‘display’,'none’).fadeIn(1000);

    // fetch the thumbnail container
    var _li = thumb.parents(‘li’);

    // fade out inactive thumbnail
    _li.siblings().children(‘img.selected’).fadeTo(500,0.3);

    // fade in active thumbnail
    thumb.fadeTo(‘fast’,1).addClass(‘selected’);

    // add a title for the clickable image
    image.attr(‘title’,'Next image >>’);
    },
    onThumb : function(thumb) { // thumbnail effects goes here

    // fetch the thumbnail container
    var _li = thumb.parents(‘li’);

    // if thumbnail is active, fade all the way.
    var _fadeTo = _li.is(‘.active’) ? ’1′ : ’0.3′;

    // fade in the thumbnail when finnished loading
    thumb.css({display:’none’,opacity:_fadeTo}).fadeIn(1500);

    // hover effects
    thumb.hover(
    function() { thumb.fadeTo(‘fast’,1); },
    function() { _li.not(‘.active’).children(‘img’).fadeTo(‘fast’,0.3); } // don’t fade out if the parent is active
    )
    }
    });
    });

    /* BEGIN DEMO STYLE */

    a{color:#348;text-decoration:none;outline:none;}
    a:hover{color:#67a;}
    .caption{font-style:italic;color:#887;}
    .demo{
    position:relative;
    float: right;
    width: 600px;
    }
    .gallery_demo{
    width:600px;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    }
    .gallery_demo li{width:68px;height:50px;border:3px double #111;margin: 0 2px;background:#000;}
    .gallery_demo li div{left:240px}
    .gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif;}

    #main_image{
    height:435px;
    width:580px;
    background:black;
    margin-top: 0;
    margin-bottom: 60px;
    float: left;
    }
    #main_image img{
    margin-bottom:10px;
    float: right;
    }

    .nav{padding-top:15px;clear:both;font:80% ‘helvetica neue’,sans-serif;letter-spacing:3px;text-transform:uppercase;}

    .info{
    text-align:left;
    width:600px;
    border-top:1px dotted #221;
    padding-top:30px;
    margin-top: 30px;
    margin-right: auto;
    margin-bottom: 30px;
    margin-left: auto;
    }
    .info p{margin-top:1.6em;}

    <body.

    Site:

    « previous | next »

  12. AJ says:

    I am using Galleria 1.0b and want the thumbnails and the photo title caption on top, rather than the bottom of the main large display photo. I am new to coding. Much apperciated any help

  13. very beautiful and simple of picture gallery gerat

Add a Comment

To add a code snippet to your comment, please wrap your code like so: <pre name="code" class="html">YOUR CODE</pre>. You can replace the class name with "js," "css," "sql," or "php." If there are any "<" or ">" within your code, please search and replace them with: &lt; and &gt; respectively.