slide gallery to correct position on page load?
On page load, the javascript would make the menu button active.
$('#menu ul li.menuItem:eq(1)').addClass('act').siblings().addClass('inact');
but the image on the gallery does not slide to the corresponding menu button. The gallery always starts with the first image. What can i add to it so that any menu button that i set as active on page load, whether it be (eq(1), eq(2), eq3)..), can have the correct image to show up
the javascript file is below
$(document).ready(function(){
var totWidth=0;
var positions = new Array();
$('#slides .slide').each(function(i){
/* Loop through all the slides and store their accumulative widths in totWidth */
positions[i]= totWidth;
totWidth += $(this).width();
/* The position开发者_如何学Gos array contains each slide's commulutative offset from the left part of the container */
if(!$(this).width())
{
alert("Please, fill in width & height for all your images!");
return false;
}
});
$('#slides').width(totWidth);
/* Change the cotnainer div's width to the exact width of all the slides combined */
$('#menu ul li a').click(function(e){
/* On a thumbnail click */
$('li.menuItem').removeClass('act').addClass('inact');
$(this).parent().addClass('act');
var pos = $(this).parent().prevAll('.menuItem').length;
$('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450);
/* Start the sliding animation */
e.preventDefault();
/* Prevent the default action of the link */
});
$(window).load(function(){
$('#menu ul li.menuItem:eq(1)').addClass('act').siblings().addClass('inact');
$('#menu ul li.menuItem:eq(1) a').trigger('click'); // this will trigger an click at page load
});
精彩评论