jQuery galleria plugin with dynamically loaded images
Posted
by panas
on Stack Overflow
See other posts from Stack Overflow
or by panas
Published on 2009-11-17T01:09:16Z
Indexed on
2010/04/04
11:03 UTC
Read the original article
Hit count: 512
I'm using the Galleria plugin with jQuery to create my image gallery. I'm trying to get load images dynamically from the user's selection into the DOM and have the gallery auto-update to display those new images but it's not working.
Firebug shows the images are successfully loading into the DOM but Galleria displays no thumbnails. I need a way to reload Galleria to display the new images.
/* ---- Gallery Code ---- */
if ($(this).find('div').attr('title') == 'photogallery' && $('.galleria_container').length == 0)
{
$('.gallery').galleria(
{
history : false,
clickNext : true,
onImage : function(image,caption,thumb)
{
if(! ($.browser.mozilla && navigator.appVersion.indexOf("Win")!=-1) )
{
image.css('display','none').fadeIn(1000);
}
var _li = thumb.parents('li');
caption.css('display','none').fadeIn(1000);
_li.siblings().children('img.selected').fadeTo(500,0.3);
thumb.fadeTo('fast',1).addClass('selected');
image.attr('title','Next image >>');
},
onThumb : function(thumb)
{
var _li = thumb.parents('li');
var _fadeTo = _li.is('.active') ? '1' : '0.3';
thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);
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
)
}
});
}
/* ---- Gallery Selector ---- */
$(document).ready(function()
{
var galleryImages = new Object();
<?php
echo $myGal;
?>
function setImages(type)
{
var image = '';
for (var i = 0; i < galleryImages[type].length; i++)
{
image += '<li><img src="' + galleryImages[type][i] + '"></li>';
}
$('ul.gallery').html(image);
}
$('ul.menu-horiz li ul li').click(function()
{
setImages($(this).attr('rel'));
});
});
The PHP code you see just creates an array of images.
So to summarise my question: How can I reload Galleria once the new images have been loaded into the DOM?
© Stack Overflow or respective owner