“iView”

“iView” v2.0 “Hemn Chawroka” dan Doküman | Çeviri Meftun MEDE

Created: July 09, 2012
By: Hemn Chawroka
Website: iProDev
Contact: https://iprodev.com/contact/

İçindekiler

Kurulum
Mevcut Parametreler
HTML5 "data-" nitelikleri
CSS Stilleri ve Yapı
JavaScript

A) Kurulum - üst

Sayfanın HEAD kısmına aşağıdaki javascript ve css kodunu ekleyin:

<link rel="stylesheet" href="iview.css" type="text/css" media="screen" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="raphael-min.js" type="text/javascript"></script>
<script src="jquery.easing.js" type="text/javascript"></script>
<script src="iview.packed.js" type="text/javascript"></script>

Sonra hangi efekti uygulamak istiyorsanız body bölüme slayt (ya da slaytlar) ekleyebilirsiniz.

<div id="iview">
	<!-- Slide 1 -->
	<div data-iview:thumbnail="photos/photo1_thumb.jpg" data-iview:image="photos/photo1.jpg"></div>
	<!-- Slide 2 -->
	<div data-iview:thumbnail="photos/photo2_thumb.jpg" data-iview:image="photos/photo2.jpg"></div>
</div>

Hemen üzerine div class "iview-caption" ile bir div koyabilirsiniz, slayta başlık ekleyebilirsiniz:

<div id="iview">
	<!-- Slide 1 -->
	<div data-iview:thumbnail="photos/photo1_thumb.jpg" data-iview:image="photos/photo1.jpg">
		<!-- Caption -->
		<div class="iview-caption" data-x="0" data-y="0" data-width="400" data-height="300" data-transition="wipeRight" data-speed="700"><h3>The Responsive Caption</h3>This is the product that you <b><i>all have been waiting for</b></i>!<br><br>Customize this slider with just a little HTML and CSS to your very needs. Give each slider some captions to transport your message.<br><br>All in all it works on every browser (including IE6 / 7 / 8) and on iOS and Android devices!</div>
	</div>
	<!-- Slide 2 -->
	<div data-iview:thumbnail="photos/photo2_thumb.jpg" data-iview:image="photos/photo2.jpg">
		<!-- Caption -->
		<div class="iview-caption" data-x="70" data-y="70" data-transition="expandLeft">Caption Description</div>
	</div>
</div>

Bir tane daha ekleyerek html5 data-niteliği "iview-caption" div için size resim yazısı efektine karar verebilirsiniz.
Olası efektler şunlardır:
"wipeLeft", "wipeRight", "wipeTop", "wipeBottom", "expandLeft", "expandRight", "expandTop", "expandBottom", "fade"

	<div class="iview-caption" data-transition="fade">Caption description</div>

Bir resim yazısı bu durumda bir solma "fade" efekti ile gösterilir, bir veri-geçiş "data-transition" "fade" soldurma olabilir.
Daha fazla mevcut HTML5 data-attributes:

Parametre	Kabul edilen değerler
data-transition	Geçiş türü, aşağıdakilerden herhangi biri olabilir: "wipeLeft", "wipeRight", "wipeTop", "wipeBottom", "expandLeft", "expandRight", "expandTop", "expandBottom", "fade"
data-easing	Tam liste için https://jqueryui.com/demos/effect/easing.html
data-speed	Milisaniye cinsinden süre geçişi.
data-x	Piksel olarak resim yazısı x konumu.
data-y	Piksel olarak resim yazısı y konumu.
data-width	Piksel olarak resim yazısı genişliği, set değilse kaynak resim yazısı genişliğini alacak.
data-height	Piksel olarak resim yazısı yükseklik ayarlamadıysanız eğer kaynak resim yazısı yüksekliğini alacak.

VIDEOLAR

Slayt gösterinizin içine videoyu dahil etmek için Slaytlarınızın içine bir iframe koymak gerekir:

<div data-iview:image="photos/photo.jpg">
	<!-- Video iFrame -->
	<iframe src="https://player.vimeo.com/video/11475955?byline=1&portrait=0" width="100%" height="100%" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

	<!-- Caption -->
	<div class="iview-caption" data-x="70" data-y="70" data-transition="expandLeft">Caption Description</div>
</div>

Gördüğünüz gibi ben 100% genişlik ve iframe yüksekliğini ayarlamak, bu yüzden Slideshow büyüklüğü ile uygun olarak boyutu değişir. (Yani iframe video kendi oranını koruyacak).

Son olarak $(document).ready() function: kullanarak script komut dosyasını bağlamak gerekir

<script type="text/javascript">
$(document).ready(function() {
    $('#slider').iView();
});
</script>

B) Mevcut Parametreler - Yukarı

IView Slider ile vakit geçirmek için bol seçenek vardır. Aşağıdaki tüm seçenekler ve varsayılan ile bir kod örneği:

<script type="text/javascript">
$(document).ready(function() {
    $('#slider').iView({
		fx: 'random', // Setleri belirtin: 'left-curtain,fade,zigzag-top,strip-left-fade'
		easing: 'easeOutQuad', // tam liste için  https://jqueryui.com/demos/effect/easing.html
		strips: 20, // Strip animasyonlar için şerit sayısı
		blockCols: 10, // Blok animasyonlar için blok sütun sayısı
		blockRows: 5, // Blok animasyonlar için blok satır sayısı
		captionSpeed: 500, // Resim yazısı geçiş hızı
		captionEasing: 'easeInOutSine', // Resim yazısı geçiş efekti hafifletilmesi
		captionOpacity: 1, // Resim yazısı donukluk
		animationSpeed: 500, // Slayt geçiş hızı
		pauseTime: 5000, // Her bir slayt ne kadar süreyle gösterecek
		startSlide: 0, // Slide başlangıç ayarlama (0 index)
		directionNav: true, // Sonraki ve Önceki navigasyon (Next & Previous navigation)
		directionNavHoverOpacity: 0.6, // Hover Saydamlık
		controlNav: true, // 1,2,3,4... navigasyon
		controlNavNextPrev: true, // önceki, sonraki navigasyon
		controlNavHoverOpacity: 0.6, // Hover Saydamlık navigasyonu
		controlNavThumbs: false, // küçük resim navigasyonu göster
		controlNavTooltip: true, // resim önizleyicide ipucu göster
		autoAdvance: true, // Kuvvetli otomatik geçişler
		keyboardNav: true, // sağ & sol okları kullan
		touchNav: true, // Slaytları değiştirmek için dokunun kaydırmayı kullanın
		pauseOnHover: false, // Üzerindeyken slider'ı Durdur
		nextLabel: "Next", // Sonraki "next" düğmesinin dizesini ayarlamak için (Çoklu Dil kullanımı)
		previousLabel: "Previous", // Önceki "previous" düğmesinin dizesini ayarlamak için (Çoklu Dil kullanımı)
		playLabel: "Play", // Oynatma "play" düğmesinin dizesini ayarlamak için (Çoklu Dil kullanımı)
		pauseLabel: "Pause", // Duraklatma "pause" düğmesinin dizesini ayarlamak için (Çoklu Dil kullanımı)
		closeLabel: "Close", // kapat "close" düğmesinin dizesini ayarlamak için (Çoklu Dil kullanımı)
		randomStart: false, // Rastgele slayt başlayın
		timer: 'Pie', // zamanlayıcı tarzı: "Pie", "360Bar" or "Bar"
		timerBg: '#000', // zamanlayıcı arka plan rengi
		timerColor: '#EEE', // zamanlayıcı rengi
		timerOpacity: 0.5, // zamanlayıcı saydamlık
		timerDiameter: 30, // zamanlayıcı çapı
		timerPadding: 4, // zamanlayıcı padding
		timerStroke: 3, // Zamanlayıcı vuruş genişliği
		timerBarStroke: 1, // Zamanlayıcı Bar vuruş genişliği
		timerBarStrokeColor: '#EEE', // Zamanlayıcı Bar kontur rengi
		timerBarStrokeStyle: 'solid', // Zamanlayıcı Bar inme stili
		timerX: 10, // Zamanlayıcı X pozisyon eşiği
		timerY: 10, // Zamanlayıcı Y pozisyon eşiği
		tooltipX: 5, // İpucu Penceresi X konumu eşiği
		tooltipY: -5, // İpucu Penceresi Y konumu eşiği
		onBeforeChange: function(){}, // Bir slayt geçişinden önce tetikler
		onAfterChange: function(){}, // Bir slayt geçiş sonra tetikler
		onSlideshowEnd: function(){}, // Tüm slaytlar gösterilmiştir sonra tetikler
		onLastSlide: function(){}, // Son slayt gösterildiğinde tetikler
		onAfterLoad: function(){}, // Slider yüklendiğinde tetikler
		onPause: function(){}, // Slider duraklatıldığı zaman tetikler
		onPlay: function(){} // Slider başlatıldığı zaman tetikler
    });
});
</script>

The effect parametresi aşağıdakilerden herhangi biri olabilir:

random
strip-down-right
strip-down-left
strip-up-right
strip-up-left
strip-up-down
strip-up-down-left
strip-left-right
strip-left-right-down
slide-in-right
slide-in-left
slide-in-up
slide-in-down
left-curtain
right-curtain
top-curtain
bottom-curtain
fade
block-random
block-fade
block-fade-reverse
block-expand
block-expand-reverse
block-expand-random
block-drop-random
zigzag-top
zigzag-bottom
zigzag-grow-top
zigzag-grow-bottom
zigzag-drop-top
zigzag-drop-bottom
strip-left-fade
strip-right-fade
strip-top-fade
strip-bottom-fade

C) HTML5 "data-" nitelikleri - Yukarı

Slaytta resmin URL HTML5 data- veri niteliğini kullanarak eklenir. Bu görüntüyü yüklemek için izin verir sadece slayt gösterisi onu çağırdığında (ağır yükleme yöntemi).

HTML5 dat- veri niteliğini kullanarak slayda birçok özellikler ekleyebilirsiniz genel olanları üzerine. Örneğin küçük resim URL'si:

<div data-iview:thumbnail="photos/photo1_thumb.jpg" data-iview:image="photos/photo1.jpg"></div>

veya bir slayt için bir geçiş efekti sadece:

<div data-iview:image="photos/photo1.jpg" data-iview:transition="zigzag-top"></div>

Birçok etkileri arasında rastgele bir geçiş ayarlayabilirsiniz:

<div data-iview:image="photos/photo1.jpg" data-iview:transition="zigzag-top,top-curtain,fade"></div>

Aşağıda tüm diğer "data" olanaklarını görebilirsiniz:

Parametre	Kabul edilen değerler
data-iview:transition	Geçiş türü, aşağıdakilerden herhangi biri olabilir: "strip-down-right", "strip-down-left", "strip-up-right", "strip-up-left", "strip-up-down", "strip-up-down-left", "strip-left-right", "strip-left-right-down", "slide-in-right", "slide-in-left", "slide-in-up", "slide-in-down", "left-curtain", "right-curtain", "top-curtain", "bottom-curtain", "fade", "block-random", "block-fade", "block-fade-reverse", "block-expand", "block-expand-reverse", "block-expand-random", "block-drop-random", "zigzag-top", "zigzag-bottom", "zigzag-grow-top", "zigzag-grow-bottom", "zigzag-drop-top", "zigzag-drop-bottom", "strip-left-fade", "strip-right-fade", "strip-top-fade", "strip-bottom-fade"
data-iview:easing	tam liste için https://jqueryui.com/demos/effect/easing.html
data-iview:image	Slayt resmin URL'si
data-iview:thumbnail	Slayt küçük resminin URL'si ('controlNavThumbs' seçeneğinin değeri true ise)
data-iview:pausetime	sliding efekt etkisinin sonunda ve bir sonraki başlangıcı arasındaki milisaniye
data-iview:type	Slayt türü (video gösterisi için kaydırma çubuğunu optimize video ayarlayın)

D) CSS Stilleri ve Yapı - Yukarı

Bu örnek iki CSS dosyaları kullanıyorum. Bunlardan ilki bağlantı etiketi renk, font-boyutları, vb sayfası için bazı genel stil içermektedir.

İkinci dosya Belirli stilleriyle tüm script komut dosyası için içermektedir. Bu değerler dosyasında başka bir yerde geçersiz kılınmış olabileceğini aklınızda tutun. Dosya kullanarak bölümlere ayrılır:

/* Slider şeritler ve bloklar */
.iview-strip {
	some styles
}
.iview-block {
	some styles
}

/* Yön navigasyon stilleri (örneğin Next & Prev) */
.iview-directionNav a {
	some styles
}
.iview-prevNav {
	some styles
}
.iview-nextNav {
	some styles
}

/* Kontrol navigasyon stilleri (örneğin 1,2,3...) */
.iview-controlNav {
	some styles
}
.iview-controlNav a {
	some styles
}
.iview-controlNav a img {
	some styles
}
.iview-controlNav a.active {
	some styles
}

/* Slider resim yazıları */
.iview-caption {
	some styles
}

/* Slider zamanlayıcı */
#iview-timer {
	some styles
}

#iview-timer div {
	some styles
}

/* Slider Preloader önyükleyici */
#iview-preloader {
	some styles
}
#iview-preloader div {
	some styles
}

/* Slider video gösterisi */
.iview-video-show {
	some styles
}
.iview-video-show .iview-video-container {
	some styles
}
.iview-video-show .iview-video-container a.iview-video-close {
	some styles
}
.iview-video-show .iview-video-container a.iview-video-close:hover {
	some styles
}


/* Slider tooltip ipucu */
#iview-tooltip {
	some styles
}

#iview-tooltip div.holder {
	some styles
}

#iview-tooltip div.holder div.container {
	some styles
}

#iview-tooltip div.holder div.container div {
	some styles
}

#iview-tooltip div.holder div.container div img {
	some styles
}

E) JavaScript - Yukarı

Slider duraklatma ve oynatma "pause ve play"?

$('#slider').trigger('iView:pause'); //Slider Durdur
$('#slider').trigger('iView:play'); //Slider Başlat

Slayt değiştirme?

$('#slider').trigger('iView:goSlide', [2]); //2. slayta git

Slider önceki ve sonraki "next & previous"?

$('#slider').trigger('iView:previous'); //Önceki slayta git
$('#slider').trigger('iView:next'); //Bir sonraki slayta git

Rasgele bir başlangıç slayt nasıl ayarlanır?

var total = $('#slider').children().length;
var rand = Math.floor(Math.random()*total);
$('#slider').iView({
	startSlide:rand
});

Eğer bu yardım dosyasının kapsamı dışında herhangi bir sorunuz varsa, benim iletişim sayfası formu aracılığıyla E-posta göndermekten çekinmeyin. Herhangi bir sorunuz varsa size yardımcı olmaktan mutluluk duyarım. Çok teşekkürler!

İçindekiler'e Git