Membuat Ultimate Fade-in slideshow

Ultimate Fade-in slideshow adalah sebuah tayangan slideshow yang menggabungkan beberapa fitur dan memiliki kemampuan untuk menampilkan gambar slide secara otomatis maupun manual. Dalam modus manual anda dapat mendefinisikan sendiri pilihan anda, seperti " Prev/ Next " kontrol yang dapat digunakan untuk memilih dan menampilkan gambar yang diinginkan.

Ultimate Fade-in slideshow ini juga dapat menampilkan deskripsi atau gambaran opsional secara otomatis dalam mode animmasi.
Selain effect gambar memudar, dimana saat slide akan berganti ke gambar berikutnya, Ultimate Fade-in slideshow ini juga dapat dijeda otomatis. Dengan cara menggulirkan cursor diatas gambar, maka secara otomatis tayangan slide pun berhenti.

Contoh 1:

Cara Memasang Ultimate Fade-in slideshow

Langkah Pertama:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<!-- optional touchswipe file to enable swipping to navigate slideshow -->
<script type="text/javascript" src="jquery.touchSwipe.min.js"></script>


<script type="text/javascript" src="fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Please keep this notice intact
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

var mygallery=new fadeSlideShow({
 wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
 dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
 imagearray: [
  ["http://www.dynamicdrive.com/dynamicindex4/pool.jpg"],
  ["http://www.dynamicdrive.com/dynamicindex4/cave.jpg"],
  ["http://www.dynamicdrive.com/dynamicindex4/fruits.jpg"],
  ["http://www.dynamicdrive.com/dynamicindex4/dog.jpg"] //<--no trailing comma after very last image element!
 ],
 displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
 persist: false, //remember last viewed slide and recall within same session?
 fadeduration: 500, //transition duration (milliseconds)
 descreveal: "always",
 togglerid: ""
})


var mygallery4=new fadeSlideShow({
 wrapperid: "fadeshow4", //ID of blank DIV on page to house Slideshow
 dimensions: ['50%', 300], //width/height of gallery in pixels. Should reflect dimensions of largest image
 imagearray: [
  ["http://www.dynamicdrive.com/dynamicindex14/shockwave/images/1.jpg", "", "", "There is beauty to be found in nature not just in grand landscapes, but in the petals of an unassuming flower"],
  ["http://www.dynamicdrive.com/dynamicindex14/shockwave/images/3.jpg", "", "", "The iconic telephone booths of London now in a very unfamiliar place."],
  ["http://www.dynamicdrive.com/dynamicindex14/shockwave/images/7.jpg", "", "", "A piano not played is a piano that's wasting away. "],
  ["http://www.dynamicdrive.com/dynamicindex14/shockwave/images/4.jpg", "", "", "Alone and being lonely. It's a state of mind. Which one does this image evoke in you?"] //<--no trailing comma after very last image element!
 ],
 displaymode: {type:'manual', pause:3000, cycles:0, wraparound:false},
 persist: false, //remember last viewed slide and recall within same session?
 fadeduration: 500, //transition duration (milliseconds)
 descreveal: "always",
 togglerid: "fadeshow4toggler"
})

</script>