Galleriffic 2.0

Say hello to Galleriffic 2.0.

For first time readers, Galleriffic is a jQuery photo gallery optimized to handle high volumes of photos while conserving bandwidth.  h0bbel has posted a nice read on some of the benefits of Galleriffic over other photo gallery scripts.

New Features

  • Keyboard Navigation
  • Support for synchronized transitions (image cross-fades)
  • Ability to add or remove images after the gallery is initialized
  • Support for custom hash identifiers (when using history)
  • Better API to make it easier to customize
  • Smarter pagination
  • Integration with the jquery.history plugin for history support

Warnings to users attempting to upgrade from version 1.0

  • The onChange event in 1.0 has been renamed to onSlideChange.
  • All transition event handlers have new signatures, so you will need to make sure to update any transition event handlers you have implemented.
  • Using synchronized transitions requires changes to your stylesheet – primarily the additional of relative and absolutely positioning so that two images can occupy the same space at the same time.

There are now 5 examples, each builds on the previous.  For a visual treat, check out the last example, whose colors I inverted.

1,047 Comments

    Eve

    This is one of the sites I have used your excellent gallery for. I have a question:

    I have been trying to make the images respond to window size changes, width:100%; etc. I can’t get it to work, no matter what I try. Any suggestions?
    THANKS! Gallerific is the best gallery, and I have made a slider for the thumbnails, if I could get it to resize I would be thrilled.

    Ted

    I’d love to donate if I could figure how to make it work…..What downloaded js files go where??

    Todd

    Is there any way to add sorting to this in the parameters? Like sort by date or filename, ascending/descending?

    Weslley

    ie is blocking the content. what do I do?

    Weslley

    Sorry! I put the site on the net and it worked fine in IE. Congratulations!!

    Wilm

    Hi,

    love your code. However, I want to file a little “bug report”. It seems that your use “$( selector )” for finding the controls etc. You should use “$(this).find( selector )”.

    I want more than one gallery in a page, thus you code isn’t working properly.

    However, thanks for your work.

    Ben F.

    is there a way to show the image on hover?

    Ben F.

    I replaced all instance of ‘clickHandler’ with ‘hoverHandler’ on the jquery.gallerif.js file.

    It now shows the image when the respective thumbs are hovered. Thanks for an excellent package.

    vincent

    Hi
    thanks for your great script I used for years.
    Unfortunatly, it seems not be full compatible with jquery 1.9.0
    Is there an upgrade in the future portable?
    It would be realy a nice think for all users of your script .

    vincent bourganel

    hi
    thanks for this great script I used for years with zenphoto cms.
    unfortunatly, your script seems not be compatible with jquery 1.9.0.
    An upgade of your script would be appreciated for all users.

    Norbu

    the hover effect is not supported by google chrome

    Mimi

    Is there a way to add sub thumbnails to the gallery. When a main image is loaded, that other thumbnails display to show other images of the same photo?

    kicoe

    Hi,

    I’m trying to use galleriffic with the jquery plugin “Zoom” by Jack Moore, is that even possible?

    So far, no luck trying, I could use some help.

    Thanks,

    Kicoe

    Ed Harris

    After some tinkering I came up with a rather nice look and feel for galleriffic 2.0 on this web site:

    http://www.catamountpainting.com/

    However it has a strange quark that caused me to remove it from their contact page. Every time you hit the space bar the slideshow image advances, making the space bar useless for typing a message, such as on a contact page form (unless one wishes to have one long word without spaces.)

    Is there any way to correct this?

    TJ

    Turns out, there is a problem with the latest OS X release of Google Chrome that broke this script. While the thumbnails show up, the larger images in the slide do not.

    See the following:
    http://support.galleria.io/discussions/problems/4376-chrome-27-crash-uncaught-error-dom-exception-8
    https://code.google.com/p/chromium/issues/detail?id=243033

    So for Mac users of Chrome this script will stay broken until the next Chrome release, assuming users upgrade. There is a workaround that I’ve tested.

    HOW TO FIX:
    ===============
    Swapping out the 2 occurrences of ‘new Image’ with ‘document.createElement(‘img’)’ will fix the issue:

    FILE: jquery.gallerific.js
    LINE #’s 330 & 599
    ===============
    BROKEN: var image = new Image;

    FIXED: var image = document.createElement(‘img’);

    Marco

    },
    onPageTransitionOut: function(callback) {
    this.fadeTo(‘fast’, 0.0, callback);
    },

    Guys why is there a syntax error for line onPageTransitionOut , it says expected , but found :

    But looking at examples on the net, the syntax seems right ?

    Marco

    I am using the netbeans editor…

    bill

    Can I get hold of version 2.1 – I REALLY need to be able to put the thumbnails BELOW the main image

    Or can someone help me with the css for this ?

    Sid

    how can we make it responsive? BTW awesome!

    Tony

    Great script, it was exactly what I was looking for! However, I have two issues I’m having trouble resolving. If this is not the place for troubleshooting, can you recommend somewhere? First, when a thumbnail is clicked on, the image loads below the destination frame and then jumps to where it should be. This makes it look odd.
    Second, it appears that there is something in the jquery-1.3.2.js file that is causing some elements on the page to shift to the right. I’ve spent so long, but can’t figure out what is causing this. Any advice would be greatly appreciated!
    Thanks!

    FC

    Can’t make the big image work.

    Loading appears on .content, images url’s are the full path to them instead of hash and I have name attribute filled in my links.

    Any idea?

    Troy

    This is great javascript, I love to use it.

    I have one suggestion on this js. would that be possible to setup auto height of the image rather fix div of the slider show. hope you understand what I’m saying.

    afsane

    I need some help to develop my gallery as a dynamic gallery.I called a service to get the list of image names.Then i wrote below code to change the pictures in thumbnail panel.but this code does not replace new pics with old images and adds them after old images. help me please.
    var clone = Template.replace(/\$Image/ig, data[i].Name); $(“.thumbs”).append(clone);

    momolu

    i need to create multiple photo galleries per page.
    is there documentation for multiple galleries per page?

    Amy

    Hi. I used your Galleriffic gallery for my friend’s photo gallery and was AMAZED I was able to do it because I am kinda slow. It has worked beautifully, seamlessly, flawlessly and my friend will be sending you a small donation very soon. We <3 you and think your new baby is precious.

    Our great hope is to be able (well, that I will be able) to install one of the premium Galleria galleries which display images BIG and look very up to date. Are you, Trent of Galleriffic, also Galleria? Not that it matters but we just want some elucidation figuring it would be great to continue on with software I already am (sorta) familiar with. More than anything, having access to a support forum which Galleria offers, will be a blessing to me.

    We'll be looking for a reply here or you can reach me via email. Thank you!

    robert

    Can you add a feature to auto-focus on a given image based on URL parameter when the page loads?

    Giovanni

    Hi guys,

    thank you for the gallery… i would like to make some changes to your gallery… It’s possible to merge (to unify) example-1 to example-2?
    My target is: to have the thumbnails and text menu at the same time.
    Thank you so much
    Best Regards
    Giovanni

    Karlo

    I’m using example-5.
    Is it possible?
    1. add extra div -> http://imageshack.com/a/img43/449/igtq.jpg


    (Any html can go here)

    2. disable switching to next image when I click on the big picture in the gallery
    3. if I have 50 pictures in gallery. Is it possible to load 10 by 10 images( when clicking “next arrow”), instead of loading all when click on gallery)
    Great gallery anyway!
    Greetings,
    Karlo

    Lika

    Hello

    Thanks for the great gallery!
    I’m having a slight problem though
    I don’t know JS very well and I can’t seem to figure out how to add caption to the exemple 1 version
    I’d be so grateful if you could help me !!!

    Thanks in advance!

    Lika

    Hello again

    Never mind I managed to add the captions eventually 🙂

    Regards

    Asma Farhat

    Im trying to use jquery nailthumb plugin (http://www.garralab.com/nailthumb.php) to work with gallerific plugin ,as im resizing the images before being sent to gallerific plugin .However gallerific plugin is not working properly with it. For some reason , i cannot see the images .
    This is my structure , to which im applying gallerific plugin after nailthumb does its work.


    Ben

    So pleased to have found this gallery as it doesn’t exactly what I was looking for. Thanks for sharing it.

    I’m using it with a Statamic site for a photographer’s portfolio. A couple of questions though:
    – Is there a way to not have the slideshow loop? ie: when a user arrives at the page the previous button is disabled (not a link) and when they reach the end they can only go back (next button is not a link)

    – I will like to take advantage of Elixir – https://tinyanvil.com/elixir/docs – which is a responsive image add-on. This would allow for separate sized images to be loaded for the thumbnail and the main image. Can you suggest any way to allow for different markup for source between the thumbs and main image?

    Many thanks.

    Ben

    … I was premature with the need for help on using Elixir. I think I’ve got it figured out.

    Would be great to know if looping was possible to disable though.

    Thanks.

    ahmet

    is there a way to show image folders in the Galleriffic [ as images links to folders which has images classified by categories ]. lets say I have many animal images , I put them in folders like fishes, birds, insects , mammals etc.
    I want to show first folders in the Galleriffic and then clicking one of the folders to browse all images in that folder other than creating different pages for each different folder.

    eric

    i’m trying use the code integrating with php burt when i use other variables he don´t work. Eaxmple:
    this works:

    <a class="thumb" href="admin/imagens/produtos/”><img src="admin/imagens/produtos/”>

    when i try for de second thumbnail:

    <a class="thumb" href="admin/imagens/produtos/”><img src="admin/imagens/produtos/”>

    Someone can help me?

    Spindle

    It would be nice if there was a simple option to turn off the function that enables the spacebar to activate the next thumbnail. (See line 939 of jquery.galleriffic.js) I had to turn it off in the jquery file which feels kinda ‘hackisch’.

    Terry Schroeder

    Great piece of software! I have been trying to weave into my site and trying to put a border around the large image that is referenced by “href”

    I have tried
    a[href$=”.jpg”] {border:10px solid black}
    but doesn’t work.
    Any ideas?

    Terry Schroeder

    I figured it out. Sorry …

    lovu4ever

    jquery version issue fixed link:-
    https://code.google.com/p/galleriffic/issues/detail?id=139

    Sandy

    I’m trying to implement galleriffic example-5 in place of the current slideshow jquery on this page: http://www.orliauslander.com/commerce.html. How do I center the main image? I see there was a thread opened at some point for this but no resolution was noted. Also saw a link that someone named Cristi has solved the issue but the link is dead. Have tried just about everything, adding a class, changing the setting of the existing classes for the slideshow img and slideshow container but no luck yet.

    Any help would be greatly appreciated.

    Jonas

    I wasted my time on this…. It needs an update with support for a dynamic height. Every new website that I make i responsive……

    OLD STUFF – SADLY….

    Cait

    I am trying to implement your gallery on my site, which is hosted in an Ektron CMS. I basically have a WYSIWYG to work with, and am not able to upload the Javascript on my server. Is there any way to isolate the code to not be affected by other Javascript on the site? Not sure how often you’re looking at this thread, but I’m trying to turn this around as quickly as possible.

    Thanks!!

    Milo

    Hello
    This is excellent, I have implemented the gallery into my site. But, the large image is floating not in the right position on the screen, how can I get this right? The sample links to an image in google, and this image is centered on the page. I don’t know where I would alter the position of my image?

    Pat

    hi, I am trying to show the next image in the gallery alongside the main one. Please see the attached example. I am using the following code to append images to the img tag:

    $(‘span.previewnext img’).attr(“src”, [path]);

    is there a function i can write for this, or is there a variable there already?

    kumar

    I am unable to setup 3 different gallery in one page. i am using local scroll for page division and each page have different gallery.

    i make some changes in id in html so its work fine but when i scroll to other page the gallery large image display the same which we previously browsed in prev page

    //snippet of defaut code

    jQuery(document).ready(function($) {
    // We only want these styles applied when javascript is enabled
    $(‘div.navigation’).css({‘width’ : ‘300px’, ‘float’ : ‘left’});
    $(‘div.content’).css(‘display’, ‘block’);

    // Initially set opacity on thumbs and add
    // additional styling for hover effect on thumbs
    var onMouseOutOpacity = 0.67;
    $(‘#thumbs_first ul.thumbs li,#thumbs_second ul.thumbs li’).opacityrollover({
    mouseOutOpacity: onMouseOutOpacity,
    mouseOverOpacity: 1.0,
    fadeSpeed: ‘fast’,
    exemptionSelector: ‘.selected’
    });

    // Initialize Advanced Galleriffic Gallery
    var gallery = $(‘#thumbs_first,#thumbs_second’).galleriffic({
    delay: 2500,
    numThumbs: 15,
    preloadAhead: 10,
    enableTopPager: true,
    enableBottomPager: true,
    maxPagesToShow: 7,
    imageContainerSel: ‘#slideshow_first,#slideshow_second’,
    controlsContainerSel: ‘#controls_first,#controls_second’,
    captionContainerSel: ‘#caption_first,#caption_second’,
    loadingContainerSel: ‘#loading_first,#loading_second’,
    renderSSControls: true,
    renderNavControls: true,
    playLinkText: ‘Play Slideshow’,
    pauseLinkText: ‘Pause Slideshow’,
    prevLinkText: ‘‹ Previous Photo’,
    nextLinkText: ‘Next Photo ›’,
    nextPageLinkText: ‘Next ›’,
    prevPageLinkText: ‘‹ Prev’,
    enableHistory: false,
    autoStart: false,
    syncTransitions: true,
    defaultTransitionDuration: 900,
    onSlideChange: function(prevIndex, nextIndex) {
    // ‘this’ refers to the gallery, which is an extension of $(‘#thumbs’)
    this.find(‘ul.thumbs’).children()
    .eq(prevIndex).fadeTo(‘fast’, onMouseOutOpacity).end()
    .eq(nextIndex).fadeTo(‘fast’, 1.0);
    },
    onPageTransitionOut: function(callback) {
    this.fadeTo(‘fast’, 0.0, callback);
    },
    onPageTransitionIn: function() {
    this.fadeTo(‘fast’, 1.0);
    }
    });
    });

    Any help will be highly appreciable.

    Andrew D Ingram

    I love how this photo gallery engine works.
    It does everything I want it to do and then some.

    However, I’m having a little difficulty setting it up to my website’s specifications.
    I have moved the Thumbnails to align inside one div, and that’s fine where it is.
    I moved the Captions to outside the box and moved it to the bottom of the page.
    So, as far as arrangement, this is working quite nicely.

    However, I’d like to see if there isn’t some way to contain the displayed image within the confines of its DIV.
    I like how the image would retain its shape as the slideshow plays, but if I use a picture that is greater than specified pixels it goes off the page. Or if I resize the browser, or change the resolution it is either too small or too large.

    Is there a way to adjust this so that the images are “contained” within the parent DIV?

    You can view the page: http://www.alienatedillusions.com/PAGE_GALLERY.html

    Once I have this just the way I want it, I’ll be able to move my portfolio from DeviantArt to my website.

    Thanks for your time.

    Andrey

    Hello everyone!

    I had a slight problem when initializing the plugin, you need to correct information … nowhere?
    problem:

    Couldnt load plugin galleriffic ” from path: /home/users/g/…/core/components/gallery/model/gallery/plugins/