Pembahasan kali ini saya akan mengangkat tema masih seputar JQuery slideshow. Ada banyak contoh JQuery Plugin yang tersedia di internet, anda pun dapat serta merta mengunduhnya dan menggunakannya untuk webblog anda.
Contoh JQuery yang saya gunakan kali ini adalah Gradually image SlideShow. Nah, bagaimana cara menggunakan JQuery plugin ini, mari kita baca tutorial berikut ini.
Langkah 1 Membaca library.
Harap mengkonfirmasi apakah imagedrawer dibaca di awal. Elemen script yang ditambahkan dalam elemen head, dan library dibaca.
<script type="text/javascript" src="../Demos/js/libraries/image-drawer/ImageDrawer.js"></script>
<script type="text/javascript" src="../Demos/js/libraries/image-drawer/ImageDrawer.Grid.js"></script>
<script type="text/javascript" src="../Demos/js/libraries/image-drawer/ImageDrawer.Expand.js"></script>
Langkah 2 Deskripsi untuk HTML
HTML yang digunakan untuk Gradually slideshow adalah sebagai berikut.
<div id="gallery" class="gradually">
<ul class="graduallyImages">
<li><img title="image1 title" alt="image1 discription" src="../Demos/images/img_demo1.jpg" width="650" height="275" /></li>
<li><img title="image2 title" alt="image2 discription" src="../Demos/images/img_demo2.jpg" width="650" height="275" /></li>
<li><img title="image3 title" alt="image3 discription" src="../Demos/images/img_demo3.jpg" width="650" height="275" /></li>
<li><img title="image4 title" alt="image4 discription" src="../Demos/images/img_demo4.jpg" width="650" height="275" /></li>
<li><img title="image5 title" alt="image5 discription" src="../Demos/images/img_demo5.jpg" width="650" height="275" /></li>
<li><img title="image6 title" alt="image6 discription" src="../Demos/images/img_demo6.jpg" width="650" height="275" /></li>
</ul>
<p class="titlebar">
<strong class="title"></strong>
<span class="current"></span> / <span class="total"></span>
</p>
</div>
Langkah 3 adalah kode javascript
Setelah menyelesaikan HTML coding, berikutnya adalah menjelaskan javascript yang digunakan untuk menentukan opsi mana yang digunakan Gradually.Slideshow.
var expand = new ImageDrawer.Expand({
'slideWidth': 65,
'interval': 70,
'duration': 600,
'transition': 'expo:in:out'
});
var gallery = document.id("gallery");
var images = gallery.getElements(".graduallyImages li img");
new Gradually.Slideshow(gallery, {
'drawer': expand, //Instance of ImageDrawer
'images': images,
'interval': 3000
});
Options
All options have default values assigned, hence are optional.
Version 2.0
drawer: (object) - Instance of ImageDrawer.
images: (array) - Image element to display.
zIndex: (number) - The hierarchy and the default of the layer are 9000.
interval: (number) - Interval when image is switched.
titleClass: (string) - Class of element that sets title of present image.
currentClass: (string) - Class of element that sets present image number.
totalClass: (string) - Class of element that sets the number of sheets of image.
onPreload: (function) - When preload of the image is completed, this event is generated.
onSelect: (function) - When the image changes, it is generated. In the first argument, the number and the second argument in the selected image are the panel object.
onDrawStart: (function) - When drawing of the image begins, it is generated. The first argument is a panel object, and the second argument is an instance of ImageDrawer.
onDrawComplete: (function) - When drawing of the image is completed, it is generated. The first argument is a panel object, and the second argument is an instance of ImageDrawer.
Slider Details Slider Demo Download Script
