Question

I’m am create a custom sliding gallery using my own animate() method. I have a script which pre-loads the images for the gallery and displays image[0] once the page has finished loading. After a 2 second interval I so far can slide the image element off to the left using the css() method. So far this works.

$(document).ready(function () {

            //pre-load images
            var i = 0;
            var images = new Array();
            images[0] = "images/environments/img0.jpg"
            images[1] = "images/environments/img1.jpg"
            images[2] = "images/environments/img2.jpg"
            images[3] = "images/environments/img3.jpg"

            $("img#cover").attr("src", images[0]);
                $(this).attr("src", images[1]).css("marginLeft","630px");

            $(function () {
                setInterval(function () {

                    $("img#cover").animate({
                        marginLeft: '-980px',
                        opacity: '1'
                    }, 2000);
                }, 2000);
            });

}); //end of document function

I now want a way to slide across the gallery(array) and display the next image in the same img element or div tag whichever works best. So after the 2 second interval the “new” one slides in and the “old” one slides off simultaneously.

Im not sure if you can even store two images in the img tag? Is this possible or is it better to slide the div tags off to the left?

HTML:

<div id="mainimage"><img id="cover" src="" /></div>

Answer 1

You’re best off having four images and having them masked bi a div using the overflow:hidden attribute.

// Your markup
<div id="imgMask" style="overflow:hidden; height:200px; width:200px;">
    <div id="inner" style="position:relative; left:0;">
        <img src="images/environments/img0.jpg" />
        <img src="images/environments/img1.jpg" />
        <img src="images/environments/img2.jpg" />
        <img src="images/environments/img3.jpg" />
    </div>
</div>

// Your js
function slideLeft(){
    $('#inner').animate({
        left: -200px;
    },2000, function(){
        $('#inner img').eq(0).remove().appendTo('#inner');
        $('#inner').css({
            'left',0
        });
    });
}

This way you are only sliding one parent element instead of multiple images. Hope it helps – the above code is untested but assumes you have an image height and width of 200px, and of course the styles are better off in your stylesheet than being inline like this.