CODEWITHSUNDEEP
javascriptjqueryslideshow
Johnathan Brown
Johnathan Brown

Reputation: 713

jQuery automatic scroll through images

I'm creating a simple little slideshow for a site I'm designing for a friend. So far I have it to work just perfectly via clicking images to show / hide the respective image. I'm trying to get it to automatically scroll through the images but it won't seem to work. Here's my code:

<script type="text/javascript">
$(function() // run after page loads
{
  $('.slide1t').show();

  $('.slide2').click(function()
  { 
    $('.slide2t').show();
    $('.slide1t').hide();
    $('.slide3t').hide();
    $('.slide4t').hide();
  });
  $('.slide1').click(function()
  { 
    $('.slide1t').show();
    $('.slide2t').hide();
    $('.slide3t').hide();
    $('.slide4t').hide();
  });
  $('.slide3').click(function()
  { 
    $('.slide3t').show();
    $('.slide1t').hide();
    $('.slide2t').hide();
    $('.slide4t').hide();
  });
  $('.slide4').click(function()
  { 
    $('.slide4t').show();
    $('.slide1t').hide();
    $('.slide2t').hide();
    $('.slide3t').hide();
  });
});

</script>

This is the code i'm using to hide/show images when clicked. Could this be shortened using toggle?

This is what i've tried to get them automatically scrolling:

<script type="text/javascript">
$(function() // run after page loads
{
  $('.slide1t').show([1000]),
  $('.slide1t').hide(),
  $('.slide2t').show([1000]),
  $('.slide21t').hide(),
  $('.slide3t').show([1000]),
  $('.slide3t').hide(),
  $('.slide4t').show([1000]),
  $('.slide4t').hide()
});

</script>

I've tried other aspects of this same code to try and get it to do something, but to no anvil.

<div id="slideshow">

        <div class="text"> 
            <a class="slide1" href="#"><img src="images/1.png" width="240" height="60" /></a>
            <a class="slide2" href="#"><img src="images/2.png" width="240" height="60" /></a> 
            <a class="slide3" href="#"><img src="images/3.png" width="240" height="60" /></a> 
            <a class="slide4" href="#"><img src="images/4.png" width="240" height="60" /></a>
        </div>

        <div class="image">        
            <a class="slide1t" href="#"><img src="images/image1.png" width="525" height="210" /></a>
            <a class="slide2t" href="#"><img src="images/image1.png" width="525" height="110" /></a>
            <a class="slide3t" href="#"><img src="images/image1.png" width="525" height="170" /></a>
            <a class="slide4t" href="#"><img src="images/image1.png" width="525" height="190" /></a>
        </div>

    </div>

I've looked into the documentation and saw you can use .show([duration],[easing],[callback]) but I don't really know what to input into them.

Thanks all

Upvotes: 0

Views: 4922

Answers (4)

Zach Saucier
Zach Saucier

Reputation: 26014

If you don't want to change your structure much and still want to retain the click function, you can do something like this

This is similar to your original approach but is based in a function and element's siblings instead of doing each image individual. This is optimized for adding new elements easily and retaining functionality. I used a setInterval to loop the animation function as well

HTML (changed slightly)

<div id="slideshow">
        <div class="text"> <a id='one' href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png" width="240" height="60" /></a>
     <a id='two' href="#"><img src="https://si0.twimg.com/profile_images/604644048/sign051.gif" width="240" height="60" /></a>  <a id='three' href="#"><img src="https://g.twimg.com/business/page/image/11TwitterForSmallBusiness-300_1.png" width="240" height="60" /></a>  <a id='four' href="#"><img src="https://si0.twimg.com/profile_images/2204583306/fb_logo.png" width="240" height="60" /></a>

</div>
        <div class="image"> <a id='one' href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png" width="525" height="210" /></a>
     <a id='two' href="#"><img src="https://si0.twimg.com/profile_images/604644048/sign051.gif" width="525" height="110" /></a>
     <a id='three' href="#"><img src="https://g.twimg.com/business/page/image/11TwitterForSmallBusiness-300_1.png" width="525" height="170" /></a>
     <a id='four' href="#"><img src="https://si0.twimg.com/profile_images/2204583306/fb_logo.png" width="525" height="190" /></a>

        </div>
    </div>

CSS:

.image a:not(#one) {
    display:none;
}

javascript:

$('.text a').click(function () {
    var idName = $(this).attr('id');
    $('.image a').each(function () {
        if ($(this).attr('id') === idName) $(this).show(1000);
        else {
            $(this).hide(1000);
        }
    });
    window.clearInterval(loop);
    loop = self.setInterval(function () {
        autoChangeSlide()
    }, 5000);
});

function autoChangeSlide() {
    var elem;
    $('.image a').each(function () {
        if ($(this).is(':visible')) elem = $(this);
    });
    if (elem.attr('id') != $('.image').children('a').last().attr('id')) {
        elem.hide(1000).next().show(1000);
    } else {
        elem.hide(1000).parent().children('a').first().show(1000);
    }
}
var loop = self.setInterval(function () {
    autoChangeSlide()
}, 5000);

You can combine my solution with Dolchio's to make it particularly awesome

Upvotes: 1

Dolchio
Dolchio

Reputation: 467

Are you making a slideshow where you can see to previous and next slide to the left and right of the current slide, or just one slide fading into another?

If it's the latter you can use this very simple code for doing this.

HTML:

<div class="image">        
    <img src="images/image1.png"  />
    <img src="images/image2.png"  />
    <img src="images/image3.png"  />
    <img src="images/image4.png"  />
</div>

CSS:

.image
{
    position:relative;
}

.image img
{
   position:absolute;
   top:0;
   left:0;
}

jQuery:

$(function() {

    $('.image img:gt(0)').hide(); // to hide all but the first image when page loads

    setInterval(function()
    {
        $('.image :first-child').fadeOut(1000)
            .next().fadeIn(1000).end().appendTo('.image');
    },5000);        
}

This basically shuffles the images like a pack of cards. 5000 (5 seconds) is the interval between fading, 1000 (1 second) is the speed of the fading animation.

For this to work however you must use position:relative on the containing div and position:absolute to position the images on top of each other.

jsFiddle demo

Upvotes: 2

palaѕн
palaѕн

Reputation: 73966

You can do this:

$('.image a').each(function (index) {
    $(this).show(1000, function () {
        $(this).delay(index * 1000).hide(1000);
    });
});

FIDDLE DEMO

Upvotes: 1

LHolleman
LHolleman

Reputation: 2596

The thing is, .show is async. So your javascript will continue will it does the effect. That's what the third parameter is for, it's an anonymous function that will get called when the effect has finished.

You should look into a jquery plugin, making this things yourself is wasting time. There are hundreds of these plugins so there is always one fitting your needs.

For example: http://www.1stwebdesigner.com/css/fresh-jquery-image-gallery-display-solutions/

Upvotes: 1

Related Questions