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?
