SLIDESHOW JQUERY

Jquery ialah adalah asal kata dari javascript library,jqury terbentuk dari kod-kod 'write-less-do more'.Ia dapat mewakili gambar gambar dan dokemn Html hanya dengan satu kod.Dan dibawah ini adalah salah satu kelebihan jqury.

Seperti yang ada dalam demo dibawah ini cara membuatnya.

Kemudian letak kod ini diatas kod ]]></b:skin>

/* Start Slider Code From http://blog.hostingrajawali.com/ */

ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}

li.bjqs-slide{display:none;position:absolute;}

ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;max-width:100%;}

ol.bjqs-markers{list-style:none;margin:0;padding:0;z-index:9999;}

ol.bjqs-markers li{float:left;}

p.bjqs-caption{display:block;max-width:96%;margin:0;padding:2%;position:absolute;bottom:0;background:rgba(0,0,0,0.7);color:#fff;-moz-border-radius: 6px;-webkit-border-radius: 6px;-moz-box-shadow: 4px 4px 4px #dddddd;-webkit-box-shadow: 4px 4px 4px #dddddd;}

}

/* End Slider Code From http://blog.hostingrajawali.com/ */

Dan kod dibawah ini diatas kode </head>

<!-- Start Slider Code From http://blog.hostingrajawali.com/ -->

<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>

<script src='http://yourjavascript.com/9921010228/basic-jquery-slider.min.js' type='text/javascript'/>

<script type='text/javascript'>

$(document).ready(function(){

$(&#39;#my-slideshow&#39;).bjqs({

&#39;width&#39; : 940,

&#39;height&#39; : 340,

&#39;showMarkers&#39; : true,

&#39;showControls&#39; : true,

&#39;centerMarkers&#39; : false

});

});

</script>

<!-- End Slider Code From http://blog.hostingrajawali.com/ -->

SIMPAN TEMPLATE ANDA

dan masukkan gadget seperti dibawah ini.

<div id="my-slideshow">
<ul class="bjqs">
<li><img title="This is a caption." src="http://1.bp.blogspot.com/-6VtyHuKWXec/T00nRHDBfKI/AAAAAAAAFwQ/FwyFSdzpq5I/s1600/slider-image1.jpg"/></li>

<li><img title="This is a another caption." src="http://1.bp.blogspot.com/-PpkbSLY_9TQ/T00nR_BmGGI/AAAAAAAAFwY/B-WYpsKXJTM/s1600/slider-image2.jpg"/></li>

<li><img title="This is a another longer caption." src="http://2.bp.blogspot.com/-iywK-OLiBio/T00nPynnhOI/AAAAAAAAFwI/Sic5_siiUb0/s1600/slider-image-3.jpg"/></li>

<li><img title="This is a another much longer caption." src="http://1.bp.blogspot.com/-07WMvWuPh28/T00nUTHpPZI/AAAAAAAAFwg/zQp89S1-5fY/s1600/slider-image4.jpg"/></li>

<li><img title="This is a another longer caption that can be the lenght of the image or even longer onto the next line." src="http://2.bp.blogspot.com/-c5hZdFVFe1E/T00nVcWvScI/AAAAAAAAFwo/t7hX91c07Xc/s1600/slider-image5.jpg"/></li>
</ul>
</div>

Gambar dapat dirubah dengan kod src dan judul gambar dengan kod title.

Seandainya anda membuat slideshow di blog anda dan ianya tidak berhasil sila komen dibawah ini untuk dapat penjelasan dan bantuan.Seandainya anda mengganda tulisan ini sila beri BLOG MASTER sebagai sumbernya.