Question

I added this slideshow jquery gallery in here: http://bellated.us.lt/

Actually jquery adds up this line var slideWidth = 500;

So at them moment only the last slide is displayed as wanted.

var slideWidth = 500; gives a constraint for a 500px width. For a 500px slideshow it works fine, but what I need is 673px width. Tried to change in query script the width to 673px but it got more messy. Any ideas how to fix this?

The whole jquery script:

<script type="text/javascript">
$(document).ready(function() {

        var currentPosition = 0;
        var slideWidth = 500;
        var slides = $('.slide');
        var numberOfSlides = slides.length;
        var slideShowInterval;
        var speed = 6000;

        //Assign a timer, so it will run periodically
        slideShowInterval = setInterval(changePosition, speed);

        slides.wrapAll('<div id="slidesHolder"></div>')

        slides.css({ 'float' : 'left' });

        //set #slidesHolder width equal to the total width of all the slides
        $('#slidesHolder').css('width', slideWidth * numberOfSlides);



        manageNav(currentPosition);

        //tell the buttons what to do when clicked
        $('.nav').bind('click', function() {

            //determine new position
            currentPosition = ($(this).attr('id')=='rightNav')
            ? currentPosition+1 : currentPosition-1;

            //hide/show controls
            manageNav(currentPosition);
            clearInterval(slideShowInterval);
            slideShowInterval = setInterval(changePosition, speed);
            moveSlide();
        });

        function manageNav(position) {
            //hide left arrow if position is first slide
            if(position==0){ $('#leftNav').hide() }
            else { $('#leftNav').show() }
            //hide right arrow is slide position is last slide
            if(position==numberOfSlides-1){ $('#rightNav').hide() }
            else { $('#rightNav').show() }
        }


        //changePosition: this is called when the slide is moved by the timer and NOT when the next or previous buttons are clicked
        function changePosition() {
            if(currentPosition == numberOfSlides - 1) {
                currentPosition = 0;
                manageNav(currentPosition);
            } else {
                currentPosition++;
                manageNav(currentPosition);
            }
            moveSlide();
        }


        //moveSlide: this function moves the slide 
        function moveSlide() {
                $('#slidesHolder').animate({'marginLeft' : slideWidth*(-currentPosition)});
        }

    });
</script>

Answer 1

This is just a styling problem. Here is how I corrected it.

First, I changed the slideWidth to 673px.

var slideWidth = 673px;

Next, I changed the #slidesHolder to something really wide. It doesn’t matter how wide it is as long as it wider than slideWidth * numberOfSlides.

#slidesHolder {
    width: 4000px;
}

Finally, I changed the #slideshowWindow style to 673px.

#slideshowWindow {
    width: 673px;
}

This should solve the problem that you were having.

Another suggestion

You should try using setTimeout instead of setInterval. It will give you better control when you need to pause or jump to a new slide.