Question

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 positions 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 */

});

Answer 1

$(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  
});