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?