Ali Emre
👑Efsanevi Grafiker👑
Web tasarım ile iç içe olan hemen hemen herkes jQuery yi duymuştur. Bu javascript kütüphanesi ile her şeyi animasyonlu bir şekilde yapmamız mümkün. Manşet haber başlıkları, fotoğraf galerileri, tooltipler, overlayboxlar vs vs..
Şimdi bahsedeceğim jQuery Popeye plug-in i ile web sitenizdeki tüm görselleri kişiselleştirebilirsiniz. Gelişmiş interaktif görseller için hazırlanan jQuery Popeye sayesinde fotoğraflarınız ile slayt gösterileri hazırlayabilir, fotoğraflarınızın altına notlar yazabilir veya fotoğrafınızın orjinal/büyük halini aynı sayfada yayınlayabilirsiniz.
Demo İçin:
Demo | jQuery.popeye 2.0 | an inline lightbox alternative
İndirmek İçin:
https://plugins.jquery.com/files/jquery.popeye-2.0_0.zip
Kullanımı:
İlk önce,
-jquery.1.4.2.min.js
-jquery.popeye-2.0.min.js
-jquery.popeye.css
-jquery.popeye.style.css
dosyalarını HTML ile sayfamıza çağıralım.
Ardından jQuery fonksiyonunu çalıştıralım:
Fonksiyonun ayarlarını içeren kodu yazalım:
Ayarların alabileceği değerleri aşağıdaki linke tıklayıp "Options" tablosunda görebilirsiniz..
Documentation | jQuery.popeye 2.0 | an inline lightbox alternative
HTML ile bir fotoğraf listesi yapıp nasık Popeye eklentisine bağlayacağımızı görelim, ilk önce sırasız liste (ul) içinde fotoğraflarımızı çağıralım.
Veya bu şekilde yazarak açıklamaları daha değişik gösterebilirsiniz...
Artık bu şekilde sayfalarınızdaki fotoğrafları daha şık gösterebilirsiniz...Bu fonksiyon kullanılarak hazırlanmış örneklere demo sayfasında bakabilirsiniz. Bu örneklerin kodları ise aşağıda yer almaktadır:
Örnek 1:
Örnek 2:
Örnek 3:
Kolay gelsin...
Bu yazı Creative Commons ile lisanlanmıştır.Kaynak gösterilmeden alıntı yapılması yasaktır.
Creative Commons Attribution-No Derivative Works 3.0 Unported License.
Şimdi bahsedeceğim jQuery Popeye plug-in i ile web sitenizdeki tüm görselleri kişiselleştirebilirsiniz. Gelişmiş interaktif görseller için hazırlanan jQuery Popeye sayesinde fotoğraflarınız ile slayt gösterileri hazırlayabilir, fotoğraflarınızın altına notlar yazabilir veya fotoğrafınızın orjinal/büyük halini aynı sayfada yayınlayabilirsiniz.
Demo İçin:
Demo | jQuery.popeye 2.0 | an inline lightbox alternative
İndirmek İçin:
https://plugins.jquery.com/files/jquery.popeye-2.0_0.zip
Kullanımı:
İlk önce,
-jquery.1.4.2.min.js
-jquery.popeye-2.0.min.js
-jquery.popeye.css
-jquery.popeye.style.css
dosyalarını HTML ile sayfamıza çağıralım.
HTML:
<script type="text/javascript" src="klasöradınız/jquery.1.4.2.min.js" /></script>
<script type="text/javascript" src="klasöradınız/jquery.popeye-2.0.min.js" /></script>
<link rel="stylesheet" type="text/css" href="klasöradınız/jquery.popeye.css" />
<link rel="stylesheet" type="text/css" href="klasöradınız/jquery.popeye.style.css" />Ardından jQuery fonksiyonunu çalıştıralım:
HTML:
<script type="text/javascript">
$(document).ready(function () {
$("Bu kısıma seçicinizi yazın id veya class olarak.#idismi veya .classismi şeklinde").popeye();
});
</script>Fonksiyonun ayarlarını içeren kodu yazalım:
HTML:
<script type="text/javascript">
$(document).ready(function () {
var options = {
caption: false,
navigation: 'permanent',
direction: 'left'
}
$("Seçicinizi belirtin").popeye(options);
});
</script>Ayarların alabileceği değerleri aşağıdaki linke tıklayıp "Options" tablosunda görebilirsiniz..
Documentation | jQuery.popeye 2.0 | an inline lightbox alternative
HTML ile bir fotoğraf listesi yapıp nasık Popeye eklentisine bağlayacağımızı görelim, ilk önce sırasız liste (ul) içinde fotoğraflarımızı çağıralım.
HTML:
<ul class="ppy-imglist">
<li><a href="Büyük resmin adresi"><img src="Küçük resmin adresi" alt="Açıklama" /></a></li>
<li>...</li>
...
</ul>Veya bu şekilde yazarak açıklamaları daha değişik gösterebilirsiniz...
HTML:
<ul class="ppy-imglist">
<li>
<a href="URL_OF_BIG_IMAGE"><img src="URL_OF_THUMBNAIL" alt="" /></a>
<span class="ppy-extcaption">
HTML_CAPTION
</span>
</li>
<li>...</li>
</ul>Artık bu şekilde sayfalarınızdaki fotoğrafları daha şık gösterebilirsiniz...Bu fonksiyon kullanılarak hazırlanmış örneklere demo sayfasında bakabilirsiniz. Bu örneklerin kodları ise aşağıda yer almaktadır:
Örnek 1:
HTML:
<div class="ppy-outer">
<div class="ppy-stage">
<div class="ppy-nav">
<a class="ppy-prev" title="Previous image">Previous image</a>
<a class="ppy-switch-enlarge" title="Enlarge">Enlarge</a>
<a class="ppy-switch-compact" title="Close">Close</a>
<a class="ppy-next" title="Next image">Next image</a>
</div>
</div>
</div>
<div class="ppy-caption">
<div class="ppy-counter">
Image <strong class="ppy-current"></strong> of <strong class="ppy-total"></strong>
</div>
<span class="ppy-text"></span>
</div>Örnek 2:
HTML:
<div class="ppy-outer">
<div class="ppy-stage">
<div class="ppy-counter">
<strong class="ppy-current"></strong> / <strong class="ppy-total"></strong>
</div>
</div>
<div class="ppy-nav">
<a class="ppy-next" title="Next image">Next image</a>
<a class="ppy-prev" title="Previous image">Previous image</a>
<a class="ppy-switch-enlarge" title="Enlarge">Enlarge</a>
<a class="ppy-switch-compact" title="Close">Close</a>
</div>
</div>Örnek 3:
HTML:
<div class="ppy" id="ID_CAN_BE_USED_TO_START_POPEYE_SCRIPT">
<ul class="ppy-imglist">
<li><a href="URL_OF_BIG_IMAGE"><img src="URL_OF_THUMBNAIL" alt="CAPTION_STRING" /></a></li>
<li>...</li>
</ul>
<div class="ppy-outer">
<div class="ppy-stage">
<div class="ppy-counter">
<strong class="ppy-current"></strong> / <strong class="ppy-total"></strong>
</div>
</div>
<div class="ppy-nav">
<a class="ppy-next" title="Next image">Next image</a>
<a class="ppy-prev" title="Previous image">Previous image</a>
<a class="ppy-switch-enlarge" title="Enlarge">Enlarge</a>
<a class="ppy-switch-compact" title="Close">Close</a>
</div>
</div>
</div>Kolay gelsin...
Bu yazı Creative Commons ile lisanlanmıştır.Kaynak gösterilmeden alıntı yapılması yasaktır.
Creative Commons Attribution-No Derivative Works 3.0 Unported License.
