Datalife Engine Türkçe Yama İndir

Datalife Engine 14.0

  • Temalara yeni taglar eklendi ve geliştirildi
  • Yeni AirPlay medya oynatıcısı eklendi
  • 1500 adet yeni ifade (emoji) eklendi

Github'dayız

Kendi yapımımız olan modüllerin neredeyse tamamını ücretsiz olarak Github üzerinden yayımladık. Sadece bu modüller için "destek" verilecektir.

We are on Github

Almost all of our own modules have been released free of charge via Github. We support only these modules

» » Otomatik Geçişli Slider carouFredSel

Otomatik Geçişli Slider carouFredSel

Sitenizdeki içerikleriniz için kullanabileceğiniz otomatik geçiş özelliğine sahip JQuery carouFredSel eklentisinin DLE uyarlanmış halidir.

carouFredSel DLE Ekran GörüntüsücarouFredSel DLE Ekran Görüntüsü

Kurulum :
  1. javascript'i ekleme
    Dosyayı kaydet: jquery.carouFredSel-5.5.0.js.zip [14,97 Kb] (İndirilme: 611) indirin ve temanızda javascript dosyalarının bulunduğu klasöre atın
    Örnek olarak benim temamda scriptler klasöründe bulunuyor. Aşağıdaki kodda scriptler yazan yeri temanızdaki javascriptlerin bulunduğu klasörle değiştirin ve main.tpl dosyasına uygun bir şekilde ekleyin. ( head arasına )
    <script type="text/javascript" src="{THEME}/scriptler/jquery.carouFredSel-5.5.0.js"></script>


    main.tpl de {AJAX} tagının hemen altına ekleyin.
    Koddaki duration: 1000, gözüken her resim için 1sn bekle anlamına geliyor. Yani 5 resim gözüküyor işe 5sn bekleyecek demektir.

    <script type="text/javascript" language="javascript">
    $(function() {
    	$('#kayan-slider').carouFredSel({
    		prev: '#prev',
    		next: '#next',
    		pagination: "#pager",
    		infinite: true,
    		scroll: {
    			easing: 'swing',
    			duration: 1000,
    		},
    		auto: {
    			pauseOnHover: 'resume',
    			onPauseStart: function( percentage, duration ) { $(this).trigger( 'configuration', ['width', function( value ) { $('#zamanlayici').stop().animate({ width: value }, { duration: duration, easing: 'linear' }); }]); },
    			onPauseEnd: function( percentage, duration ) { $('#zamanlayici').stop().width( 0 ); },
    			onPausePause: function( percentage, duration ) { $('#zamanlayici').stop(); }
    		}
    	});
    });
    </script>



  2. CSS'yi ekleme
    Temanızda çalışan bir css dosyasını açıp en sonuna ekleyebilirsiniz.
    Slider koyduğunuz yerdeki genişliğe göre kendisi şekillenecektir. İçindeki resim sayısını ona göre ayarlacaktır. Eğer resimler küçükse çok, büyükse az gözükecek. Yani resimlerin genişlik ayarını değiştirerek sayıyı arttırabilirsiniz.

    .list_carousel {
    	background-color: #232323;
    	border-top: 4px solid #000000;
    	border-bottom: 4px solid #000000;
    	margin: 10px 0px;
    	width: 100%;
    	height: 328px;
    }
    .list_carousel ul {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    	display: block;
    }
    .list_carousel li {
    	color: #999;
    	text-align: center;
    	background-color: #eee;
    	border: 2px solid #999;
    	width: 200px;
    	height: 312px;
    	padding: 0;
    	margin: 6px;
    	display: block;
    	float: left;
    }
    .list_carousel.responsive {
    	width: auto;
    	margin-left: 0;
    }
    .clearfix {
    	float: none;
    	clear: both;
    }
    .prev {
    	float: left;
    	margin-left: 10px;
    }
    .next {
    	float: right;
    	margin-right: 10px;
    }
    .pager {
    	float: left;
    	width: 300px;
    	text-align: center;
    }
    .pager a {
    	margin: 0 5px;
    	text-decoration: none;
    }
    .pager a.selected {
    	text-decoration: underline;
    }
    .timer {
    	background-color: #999;
    	height: 6px;
    	width: 0px;
    }


  3. HTML Kodunu Ekleme

    Sliderın gözükmesini istediğiniz yere eklemeniz gerek kod. Kodda custom tagı kullanıldı. Kullandığı şablon dosyası kayan-slider.tpl bu dosyayı aşağıdan indirip temanızın için atın.

    Dosyayı kaydet: kayan-slider.tpl.zip [228 b] (İndirilme: 625)

    İçeriklerin çekileceği kategoriyi, adetini vs. bilgileri custom kodundan değiştirebilirsiniz. ( custom kullanımı hakkında bilgiler: Kaynak 2 Kaynakları dikkatlice okuyunuz! )

    İçerik ile bilgiyi kayan-slider.tpl dosyasından düzenlemelisiniz. Kodda resim için [xfvalue_cover] etiketi kullandım. Eğer resimleriniz ilave alanda değilse {image-1} tagını da kullanabilirsiniz.
    Resimler için genişlik ve yükseklik değer bu şablon dosyası ve css kodları ile ayarlandı. Düzenleme için her ikisini de dikkate almalısınız.
    width="200" height="312"


    <div class="list_carousel">
    	<ul id="kayan-slider">
    		&#123;custom template="kayan-slider" cache="no" limit="20"}
    	</ul>
    	<div class="clearfix"></div>
    	<div id="zamanlayici" class="timer"></div>
    </div>
    



Plugini ayrı olarak indirmek isterseniz... İçerisinde daha fazla örnek ve demo var.



Bu sorular için yazıyı tekrar ve dikkatlice okuyun :
  • Resimler gözükmüyor.
  • Bazı kategorilerden resim çekmek istiyorum
  • Kaç resim çekileceğini nereden ayarlayacağız.
  • Resimlerin boyutunu nereden ayarlayacağız.
  • Geçiş süresini nereden ayarlayacağız.
  • Sayfa hata veriyor hiç bir javascript çalışmıyor.


Yapımcı: Mehmet Hanoğlu
Kaynak: https://dle.net.tr/
Bilgilendirme
Yorum Ekleyebilmeniz için Sitemize Kayıt Olmanız Gerekmektedir.
0
kralceco 1 Şubat 2018 23:11
@MaRZoCHi, mehmet abi şimdi bu slideri yapmasına yaptım ama ufak bi sorunumuz var

http://prntscr.com/i8tzfj

resimde göreceğin gibi ortadaki yani buradaki sliderin sağ köşesini biraz daha uzatıp üsteki slider ile eşit görünüm sağlamam lazım nasıl yapabilirim width="200" height="312" bunlarla oynadım yine sağ tarafı eşitleyemedim
0
mertcan2518 13 Temmuz 2016 00:05
Hocam bir çözüm paylaşmak isterim eğer slider otomatik geçmiyorsa


<script type="text/javascript" src="{THEME}/scriptler/jquery.carouFredSel-5.5.0.js"></script
>

koddaki scriptler klasörünü sizin javascriptiniz nerdeyse o klasörün ismini yazı mesela benimki js klasöründe 10.6 lar için bunun için kod

<script type="text/javascript" src="{THEME}/js/jquery.carouFredSel-5.5.0.js"></script>


olacak İnşallah yararlı olmuştur.
0
baraccuda 4 Nisan 2016 16:49
11.0 için kullanılabilirmi acaba uyumlumudur?
3 779
MaRZoCHi 1 Kasım 2015 12:24
@Eftimis, css deki
width: 100%;
değerini genişliğiniz kaç px ise ona göre ayarlayın.

--------------------
0
Eftimis 1 Kasım 2015 12:10
Mehmet bey slider ekledim güzel çalıştı fakat bir sorun var. slider temaya komple boylu boyuna oturdu. yanlarda nasıl kısaltabilirim.



Benim yapmak istediğim



Yardımcı olursanız memnun olurum
0
Eftimis 31 Ekim 2015 20:39
Dediklerinizi yaptım ama çok saçma bir sey oldu. yan yana değilde tek sıra halinde görünüyor. Bu adresde kontrol edebilir misiniz? Sanırım bir düzeltme sonrası düzeldi. Fakat yaptığım şeyleri hemen göremiyorum. Önbellekleme kapalı.
0
hasder 26 Eylül 2015 14:35
BENDE 1 TANE KONU GOSDERIR ONU NASIL EDIM KONULAR COK GOZUKSUN
0
Kurapika78 6 Haziran 2015 19:43
Hocam biraz ilginç gelicek ancak tüm adımları sırasıyla uyguladım slider gözüktü ancak resimler nedense gözümkmüyor..Sorun nerde olabilir ?
0
delinetci 5 Eylül 2014 16:51
Hocam belirttiğiniz satırları sildim fakat sorun hala devam ediyor.
3 779
MaRZoCHi 5 Eylül 2014 16:41
@delinetci, CSS deki
.list_carousel'e ait border-top: 4px solid #000000; ve border-bottom: 4px solid #000000; satırlarını silin.

--------------------
0
delinetci 5 Eylül 2014 16:04
Hocam kurulumu ve gerekli ayarları yapabildim ancak,


kırmızıyla belirttiğim yerlerde beyaz bir çizgi var o çizgiyi nasıl kaldırabilirim ?
Teşekkürler
0
surly 15 Ağustos 2014 22:40
Teşekkürler, güzel slider. Yenilerini bekliyoruz smile
3 779
MaRZoCHi 31 Temmuz 2014 18:17
Normalde nereye ekleneceğini yazmıştım fakat html olduğu için filtrelenmiş.
main.tpl de bulunan
<head>.....</head>

kodlarına arasında.

Diğer kodu sliderı göstermek istediğiniz yere. Yine main.tpl de.

Bu kodlar öyle kesin burada olacak diyebileceğiniz kodlar değil. Adı geçen main.tpl dosyasını açıp nereye eklemeniz gerektiğini anlayabilirsiniz. Birazcık açıp bakmak lazım öncelikle...

--------------------
0
delinetci 31 Temmuz 2014 14:18
Bu kodu nereye ekleyeceğiz?
<script type="text/javascript" src="{THEME}/scriptler/jquery.carouFredSel-5.5.0.js"></script
>

HTML Kodu nerede verdiniz?

Bu kod nedir? Nereye ekleyeceğiz?
<div class="list_carousel">
	<ul id="kayan-slider">
		{custom template="kayan-slider" cache="no" limit="20"}
	</ul>
	<div class="clearfix"></div>
	<div id="zamanlayici" class="timer"></div>
</div>

Bu kod nedir? Nereye ekleyeceğiz?
Çok teşekkürler.
3 779
MaRZoCHi 30 Temmuz 2014 21:51
@delinetci, hangi adımı yapamadınız? Açık bir şekilde yazar mısınız? Sorun nedir?

--------------------
0
delinetci 30 Temmuz 2014 17:53
Hocam kurulumu yapamadım.Bir yardım etseniz.
deneme bonusu veren siteler