smoothSlider

Websayfanızda tam ekran slayt resimler kullanabilmeniz için geliştirilmiş bir jQuery uygulamasıi. Eklentinin özeli bir  adı yok.   Dynamic Drive sitesi tarafından hazırlanmış olan bu uygulama sayesinde tam ekran slayt resimler kullanabilirsiniz.

Sırasıyla  slayt olarak değişecek resimleri teker teker json dosyasından çekiyor ve farklı animasyonlarla websayfasında ziyaretçilere  hoş bir görüntü sağlıyor. Resimler arası slayt geçiş esnasında resimlerin büyüyerek, küçülerek, sola-sağa-yukarı-aşağı kayarak yada  resimden resime geçişi direk sağlayabilirsiniz.  Resimler arası geçiş esnasında resimlerin solarak kaybolmasıda çok güzel bir görünüm ortaya koyuyor. Css kodlarda resimlerin görüntülendiği çerçeveyi küçültüp farklı boyutlarda slayt örnekleri de hazırlayabilirsiniz.

Kullanım

• Head etiketleri arasına eklemeniz gereken bölümler.

Js ve css dosya adresleri.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery-slider.js"></script>
<link rel="stylesheet" type="text/css" href="smooth_slider.css" />

Css :

.slideshowwrapper{ /* dimensions of outermost slideshow container */
 width: 80%;
 height: 600px;
 position: relative;
 overflow: hidden;
 }

JavaScript :

<script>
 $(function() {
 $('#resume').on('click', function(){ // set up resume button behavior
 $("#pan_area").smoothslider("resume") // resume playing of this slideshow. Pass in "pause" to pause it instead
 $(this).hide() // hide resume button
 }) 
 $("#pan_area").smoothslider("install", {
 "playlist_url":"playlist.json", // get the playlist and some config from the server
 // this function gets called whenever there's an image change
 "on_image_change":function(caption, image_url) { 
 var area= $("#img_msg_area").find("span");
 area.animate({"opacity": 0}, 500, "swing", function() {
 area.text(caption);
 area.animate({"opacity": 1}, 500); // fade in & out take 500ms each
 });
 },
 "loops": 2, // number of loops before stopping. Remove thisoption to run continuously
 "throbber":$("#throbber"), // an image to show when waiting for images to load
 on_pause:function(){
 $('#resume').show()
 }
 });
 });
 </script>

playlist.json 

{
 "playlist": [
 {
 "url": "img/img0.jpg",
 "caption": "A bird perching on a twig."
 },
 {
 "url": "img/img1.jpg",
 "caption": "Lions lounging on the grass."
 },
 {
 "url": "img/img2.jpg",
 "caption": "Seagulls gazing collectively."
 },
 {
 "url": "img/img3.jpg",
 "caption": "Snail on a table."
 },
 {
 "url": "img/img4.jpg",
 "caption": "A lone wolf looks on..."
 }
 ],
"hold_time":2,
 "loops":2,
 "transition_time":1
}

• Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

<div class="slideshowwrapper">
 <div id="throbber"><img src="img/throbber.gif"></div>
 <div id="resume" style="display:none">Replay</div>
 <div id="pan_area"></div>
 <div id="img_msg_area"><span></span></div>
 <div id="static_text_area">Anasayfa açıklaması.</div>
</div>