CODEWITHSUNDEEP
jquerycss
Andrew Hendrie
Andrew Hendrie

Reputation: 6415

First image on jQuery slider is out of place

I'm working on a jQuery slider. There are two images so far, and the first one is positioned incorrectly.

Here's the url that I'm working from: http://www.ayrturfandtrac.org/

It's on the bottom left side of the page.

I'd like to have the first image in the same place as the second image (centered between the buttons).

Here's my code:

HTML: 

<div id="fader">
<img src="http://www.ayrturfandtrac.org/wp-content/uploads/2012/11/usedListing.png" class="usedListingImage">
<img src="http://www.ayrturfandtrac.org/wp-content/uploads/2012/12/kubotaB2320.png" class="usedListingImage">
</div>

<div id="next">
<img id="nextListing" class="nextListing" src="http://www.ayrturfandtrac.org/wp-content/uploads/2012/12/nextListingArrow.png" onmouseover="this.src='http://www.ayrturfandtrac.org/wp-content/uploads/2012/12/nextListingHover.png'" onmouseout="this.src='http://www.ayrturfandtrac.org/wp-content/uploads/2012/12/nextListingArrow.png'">
</div>

jQuery:

<script type="text/javascript">
jQuery (function() {
    $('#fader img:not(:first)').hide();

    $('#fader img').each(function() {
        var img = $(this);
        $('<img>').attr('src', $(this).attr('src')).load(function() {
            img.css('margin-left', -this.width / 2 + 'px');
        });
    });

    var pause = false;

    function fadeNext() {
        $('#fader img').first().fadeOut().appendTo($('#fader'));
        $('#fader img').first().fadeIn();
    }

    function fadePrev() {
        $('#fader img').first().fadeOut();
        $('#fader img').last().prependTo($('#fader')).fadeIn();
    }

    $('#fader, #next').click(function() {
        fadeNext();
    });

    $('#prev').click(function() {
        fadePrev();
    });

    $('#fader, .button').hover(function() {
        pause = true;
    },function() {
        pause = false;
    });

    function doRotate() {
        if(!pause) {
            fadeNext();
        }    
    }

    var rotate = setInterval(doRotate, 5000);

});

</script>

Upvotes: 2

Views: 200

Answers (2)

Paul Graffam
Paul Graffam

Reputation: 2149

You are setting the margin left of the images based on their widths:

$('<img>').attr('src', $(this).attr('src')).load(function() {
    img.css('margin-left', -this.width / 2 + 'px');
});

However one of the image's ORIGINAL width is a lot larger than the other one. You are just resizing the images in the browser (which is never a good idea) and so the javascript is getting the original non-resized value. You can either just hardcode the margin left value by setting it to a good value like -160px:

img.css('margin-left', -'160px');

or make sure the images are resized to the same width, or you could also set the images inside of divs and get the width of the div instead.

Upvotes: 1

Steven
Steven

Reputation: 180

The element style on the first image is set to margin-left: -607px; That is causing the image to be way over to the left. You need to play around with that structure. Maybe take the styling out of the HTML element and into a css file. I changed it to -160px and it looked more centered.

Upvotes: 0

Related Questions