Tag Archives: slideshow

[jQuery] slideshow plugins: innerFade, cycle

참조:
* InnerFade plugin: http://medienfreunde.com/lab/innerfade/

* Cycle plugin: http://malsup.com/jquery/cycle/

InnerFade plugin

<style>
  #news {
    display: block;
    height: 70px;
  }
  #news ul {
    list-style-type: none;
  }
</style>

<div id="news">
  <h2>News</h2>
  <ul>
    <li><a href="#">Barron Von Jovi spotted ... </a></li>
    <li><a href="#">Mo'Fat signs up-and-coming rapper ... </a></li>
    <li><a href="#">Glendatronix rumored to be ... </a></li>
    <li><a href="#">Man claims to be Darth Fader's son ... </a></li>
  </ul>
</div>

<script>
  $('#news ul').innerfade({
    animationtype: 'slide',
    speed: 750,
    timeout: 2000,
    type: 'random'
  });

</script>

Cycle slideshow plugin

<div id="photos">
  <img alt="Glendatronix" src="../../images/glenda_200.jpg"/>
  <img alt="Darth Fader" src="../../images/fader_200.jpg" />
  <img alt="Beau Dandy" src="../../images/beau_200.jpg" />
  <img alt="Johnny Stardust" src="../../images/johnny_200.jpg" />
  <img alt="Mo' Fat" src="../../images/mofat_200.jpg" />
</div>


<script>
$(document).ready(function(){
  $('#photos').cycle({
    fx: 'scrollDown',
    speedIn: 2500,
    speedOut: 500,
    timeout: 0,
    next: '#photos'
  });
}); 
</script>

[jQuery] Fading slideshow

<style>
  #photos img {
    display: none;
  }
  #photos .show {
    display: inline;
  }
</style>

<div id="photos">
  <img alt="Glendatronix" class="show" src="../../images/glenda_200.jpg" />
  <img alt="Darth Fader" src="../../images/fader_200.jpg" />
  <img alt="Beau Dandy" src="../../images/beau_200.jpg" />
  <img alt="Johnny Stardust" src="../../images/johnny_200.jpg" />
  <img alt="Mo' Fat" src="../../images/mofat_200.jpg" />
</div>

<script>
  $(document).ready(function() {
    slideShow();
  });
  
  function slideShow() {
    var current = $('#photos .show');
    var next = current.next().length ? current.next() : current.parent().children(':first');
    current.hide().removeClass('show');
    next.fadeIn().addClass('show');
    
    setTimeout(slideShow, 3000);
  }

</script>