Jquery Slider Eklentisi

Arkadaşlar Merhaba Bu gün lazım oldu diye hazırladığım bir jquery slider pluginini sizlerle paylaşmak isterim;

ilk olarak html kodlarımızı yazıyoruz :

$file = fopen("request/slider.img",'r');
while(!feof($file)){
$satir = fgets($file);
$parca = explode(",",$satir);
?>

$file = fopen("request/slider.cpt",'r');
while(!feof($file)){
$satir = fgets($file);
$parca = explode(",",$satir);
$temizle = str_replace("(","",$parca[0]);
$temizle = str_replace(")","",$temizle);
?>

daha sonra css ayarlamalarını yapıyoruz :


/* @todo:: sliderCSS */
.slider-container { position: absolute; left: 0; z-index: 2; top:41%; }
.images { position: relative; float: left; width: 100%; height: auto; display: block; overflow: hidden; }
.images img { position: absolute; width: 100%; height: auto; }


.slider-container .caption { width: 100%; height: auto; height: 73px; position: relative; float: left; overflow: hidden;}
.slider-container footer {
display: block; width: 100%; height: 35px; position: relative; float: left;
background-image: url("../images/footer-bg.png"); background-repeat: no-repeat; background-position: center top;
}
.captions { padding: 0; margin: 0; }
.captions li {
width: 100%; max-width: 350px; line-height: 22px;
list-style: none; position: absolute; left: 0; top:10px;
font-size: 22px;
}



burada ise jquery eklentisi dosyamızı yapıyoruz :



(function ($) {
$.fn.TDSlider = function (Opts) {
/* eklentinin değerlerini dışarıdan değiştirmeyi sağlayan fonksiyon -> */
var OptdS = $.extend({

},Opts);
function SizeForSlider() {
/* todo:: step one (slider size) */
$data['cW'] = $(".container").outerWidth();
$(".images").css({ width : $data['cW'] + "px" });
/* todo:: step two (slider size) */
$data['iH'] = $(".images").find("img").outerHeight();
$(".images").css({ height : $data['iH'] + "px" });
}
var JustFirst = {
'image' : function(Im) {
$(".images",Im).find("img").hide();
$data['delay'] = $(".images",Im).find("img:first").attr("slider-delay");
$(".images",Im).find("img:first").fadeIn($data['delay']);
$(".images",Im).find("img:first").addClass("Now-You-See-Me");
},
'caption' : function (Im) {
$(".captions",Im).find("li").hide();
$(".captions",Im).find("li:first").fadeIn($data['delay']);
}
};
var anims = {
'next' : function (Im,NIn) {
$data['delay'] = $(".images",Im).find("img:eq("+ NIn +")").attr("slider-delay");
$(".images",Im).find("img").removeClass("Now-You-See-Me");
$(".images",Im).find("img").fadeOut($data['delay']);
/* ## */
$(".images",Im).find("img:eq("+ NIn +")").fadeIn($data['delay']);
$(".images",Im).find("img:eq("+ NIn +")").addClass("Now-You-See-Me"); return anims['forFirst'];
},
'todoFirst' : function (Im) {
$data['delay'] = $(".images",Im).find("img:first").attr("slider-delay");
$(".images",Im).find("img").fadeOut($data['delay']);
$(".images",Im).find("img").removeClass("Now-You-See-Me");
/* ## */
$(".images",Im).find("img:first").fadeIn($data['delay']);
$(".images",Im).find("img:first").addClass("Now-You-See-Me");
$data['ThisIndex'] = 1;
},
'nextCaption' : function (Im,NIn){
$(".captions",Im).find("li").fadeOut($data['delay']);
$(".captions",Im).find("li:eq("+ NIn +")").fadeIn($data['delay']);
},
'todoFirstCaption': function (Im){
$(".captions",Im).find("li").fadeOut($data['delay']);
$(".captions",Im).find("li:first").fadeIn($data['delay']);
}
}
/* İşlem geri dönüşü -> */
return this.each(function () {
$me = this;
$data = {};
$data['HowMany'] = $(".images",$me).find("img").length;

/* @todo:: slider Size callback */
SizeForSlider();

/* @todo:: slider Size callback for resize window */
$(window).resize(function () {
SizeForSlider();
});

/* @todo:: slider First Image and caption */
JustFirst['image']($me);
JustFirst['caption']($me);

/* @todo:: slider Next Image and caption */
$data['ThisIndex'] = $(".Now-You-See-Me").index() + 1;
setInterval(function () {
if($data['ThisIndex'] <= $data['HowMany'] - 1){
anims['next']($me,$data['ThisIndex']);
anims['nextCaption']($me,$data['ThisIndex']);
$data['ThisIndex'] += 1;
}else {
anims['todoFirst']($me);
anims['todoFirstCaption']($me);
}
},5000);

});
}
})(jQuery);




son olarak slideri sayfamızda çalıştırıyoruz :

<script>
$(function () {
$(".slider-container").TDSlider();
})
</script>



bu data.img dosyasının içeriği :



(0),1.jpg
(1),2.jpg
(2),3.jpg



buda data.cpt dosyasının içeriği :



(0),Yeni nesil mobilya satış uzmanıyla tanışmaya hazır mısınız ?
(1),Caption 2
(2),Caption 3
(3),Caption 4



çalışma dosyalarında bölümlerin açıklamaları mevcut dosya isimlerini istedğiniz gibi yapabilirsiniz. belki işinize yarar belki de bir parçası işinizi görür diye paylaşmak istedim.

iyi forumlar;