Zeroth

Topic: Galleria+jCarousel+ajax issues

Currently, I am using Alex Wilson's combination of jCarousel and Galleria, in conjunction with a bit of background ajax. It just pulls a new image url wrapped in an img tag from the server, when needed, however, the new image box is not clickable. However, the hotkeys do work, meaning that galleria.next() and galleria.prev() work as expected, but, you just can't get the new images to expand.

What do I need to do to get galleria to work with the new images, properly?

David

Re: Galleria+jCarousel+ajax issues

Hi Zeroth, welcome to the forums!

Do you have an example url? I'm pretty sure you need to run the galleria script on each image load instead of just on DOM ready.

Zeroth

Re: Galleria+jCarousel+ajax issues

Okay, how do I run the galleria code on each image load? I looked through the source code for galleria, and the closest I found was to use
$.historyInit()
$.historyLoad()
But I don't think those will work... is it onPageLoad?

Zeroth

Re: Galleria+jCarousel+ajax issues

Okay, I got the images to expand properly, by doing this:

Code:

$('ul.gallery_show').galleria({
    history   : true, // 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) {
        onImageGalleria(image, caption, thumb);
    },
    onThumb   : function(thumb) {
        onThumbGalleria(thumb);
    }
});

where onImageGalleria and onThumbGalleria are:

Code:

function onImageGalleria(image, caption, thumb){ // let's add some image effects for demonstration purposes
                
    // fade in the image & caption
    image.css('display','none').fadeIn(200);
    caption.css('display','none').fadeIn(200);
                
    // fetch the thumbnail container
    var _li = thumb.parents('li');
        
    // fade out inactive thumbnail
    _li.siblings().children('img.selected').fadeTo(100,0.6);
        
    // fade in active thumbnail
    thumb.fadeTo('fast',1).addClass('selected');
                
    // add a title for the clickable image
    image.attr('title','Next panel >>');
                
        $('#main_image').trigger('img_change');
};
    
function onThumbGalleria(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.6';
                
    // fade in the thumbnail when finished loading
    thumb.css({display:'none',opacity:_fadeTo}).fadeIn(500);
                
    // hover effects
    thumb.hover(
        function() { thumb.fadeTo('fast',1); },
        function() { _li.not('.active').children('img').fadeTo('fast',0.6); } // don't fade out if the parent is active
        )
};

Yes, the two functions are from Alex Wilson's gallery code, credit where credit is due. I'm quite inexperienced with javascript, but not with programming in general, so I've been muddling my way through as best as I can.

However, it now reprocesses all the images, and adds :<index> to each image's title attribute everytime it gets called. As well, it shows the image about 4-5 times down the page when its clicked. Any advice?