Have you tried looking into the generated html with Firebug if the images appear correctly in your array and the is correctly populated?

Besides, i’m noticing now that your has class=”gallery” and you’re calling .galleria() on “ul.gallery_demo”, which could be the reason why you don’t see the images…

];

Really sorry for the double posts. Some characters had been filtered out

Raibaz :
Just looking at the code, your problem seems to be in the pageSelectCallback, as you’re adding nothing to the newContent variable and thus not putting anything in the imagelist after switching pages (which actually occurs also on the first display)

Oops sorry, i forgot to add this one on top of the function.

var images = [

['', ''],

];

But it still doesn’t work…

script type=”text/javascript”

function pageselectCallback(page_index, jq){
var items_per_page = 2;
var max_elem = Math.min((page_index+1) * items_per_page, images.length);
var newcontent = ”;
for(var i=page_index*items_per_page;i<max_elem;i++)
{
newcontent += ”;
}
$(’#imagelist’).html(newcontent);
$(’#mainimage’).html(”);
$(’ul.gallery_demo’).galleria();
return false;
}

$(document).ready(function(){

$(’.nav’).css(’display’,'none’); // hides the nav initially

$(’ul.gallery_demo’).galleria({
history : false, // deactivates the history object for bookmarking, back-button etc.
clickNext : true, // helper for making the image clickable. Let’s not have that in this example.
insert : ‘#main_image’, // the containing selector for our main image.
// If not found or undefined (like here), galleria will create a container
// before the ul with the class .galleria_container (see CSS)
onImage : function(image,caption,thumb) {
$(’.nav’).css(’display’,'block’);
image.attr(’title’,'Next image >>’);

},

onThumb : function(thumb) {
thumb.css({display:’none’,opacity:_fadeTo}).fadeIn(1500); }
$(”#Pagination”).pagination(images.length, opt);

});
});

/script
style media=”screen,projection” type=”text/css”

/* BEGIN DEMO STYLE */
*{margin:0;padding:0}
body{padding:20px;background:white;background:white;color:#555;font:80%/140% ‘helvetica neue’,sans-serif;width:900px;margin: 0 auto;}
h1,h2{font:bold 80% ‘helvetica neue’,sans-serif;letter-spacing:3px;text-transform:uppercase;}
a{color:#348;text-decoration:none;outline:none;}
a:hover{color:#67a;}
/*.caption{color:#888;position:absolute;top:0px;left:500px;width:200px;}*/
.demo{position:relative;margin-top:2em;}
.gallery_demo{width:200px;float:left;}
.gallery_demo li{width:55px;height:70px;border:3px double #eee;margin: 0 2px 2px 0;background:#eee;}
.gallery_demo li.hover{border-color:#bbb;}
.gallery_demo li.active{border-style:solid;border-color:#222;}
.gallery_demo li div{left:240px}
.gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif;}

.galleria_container{margin:0 auto 60px auto;height:438px;width:700px;float:right;}

.nav{padding-top:15px;clear:both;}

.info{text-align:left;margin:30px 0;border-top:1px dotted #221;padding-top:30px;clear:both;}
.info p{margin-top:1.6em;}

.nav{position:absolute;top:410px;left:0;}

/style

/head
body

div id=”Pagination” class=”pagination”>/div
div id=”imagegallery” class=”demo”
ul id=”imagelist” class=”gallery”/
/div

span id=”mainimage” class=”galleria_container”
/span

/body
/html