JQuery Popeye ile İnteraktif Fotoğraflar...

Php, Asp, Perl, Html - JQuery Popeye ile İnteraktif Fotoğraflar... Sponsorlu Bağlantılar 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, ...

Cevapla
JQuery Popeye ile İnteraktif Fotoğraflar...
Ali Emre isimli Üye şimdilik offline konumundadır

Ali Emre(27)

Webmaster / İzmir

Standart

JQuery Popeye ile İnteraktif Fotoğraflar...

Alt 24-04-2010 #1
Sponsorlu Bağlantılar

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:
http://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" />[/HTML]

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>
[/HTML]

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>
[/HTML]

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>
[/HTML]

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>
[/HTML]

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>
[/HTML]

Ö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>
[/HTML]

Ö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>
[/HTML]

Kolay gelsin...
Bu yazı Creative Commons ile lisanlanmıştır.Kaynak gösterilmeden alıntı yapılması yasaktır.
JQuery Popeye ile İnteraktif Fotoğraflar...
Creative Commons Attribution-No Derivative Works 3.0 Unported License.
Bu mesajdan alıntı yap
Sponsor Links

Grafikerler.net Reklamları

Cevapla

Benzer Konular
Konu Konu Bilgileri Forum Cevaplar Son Mesaj
Satılık Web Tasarımlar Html+Css+Jquery+PSD Esgraf Satılık Tasarımlar 0 09-03-2010 21:18:32
Jquery ile Açılır-Kapanır İletişim Formu Yapımı el_chancho Php, Asp, Perl, Html 6 09-02-2010 16:47:37
Rifatozkan de Kullanılan Tema ve Psd Dosyaları jquery Rıfat Özkan Php, Asp, Perl, Html 13 04-02-2010 11:03:08
DERS - Jquery ve Tag Cloud xcoder Php, Asp, Perl, Html 0 24-08-2009 01:47:25
Jquery ile resim kaydıraç Bayfresh Php, Asp, Perl, Html 2 27-06-2009 17:06:13

Kapat
Şifremi Unuttum?