Anasayfa Haber Arşivi Künye İletişim Giriş sayfam yap Sık Kullanılanlara Ekle Sitene ekle

jquery lightbox galeri kullanımı

26 Haziran 2010 Cumartesi 20:44

jQuery'nin nimetlerinden olan lightbox galeri sistemini inceliyoruz

jquery ile sitelerimize güze galeriler ekleyebiliriz

bu galerilerden biri de lightbox

Örnek şekil için http://leandrovieira.com/projects/jquery/lightbox/ adresindeki example sekmesinden örnekleri inceleyebilirsiniz.

Kullanımı: lightbox indirmek için /img/files/jquery-lightbox-0_5.zip

Öncelikle sayfamızın tercihen head tagları arasına şu kodu ekliyoruz


<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/jquery.lightbox-0.4.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.4.css" media="screen" />

Bu kodları eklerken dosya yollarının doğru olmasına dikkat ediniz.

Daha sonra normal html olarak linklerimizi oluşturuyoruz,fakat linklerin hedef(href) değerine resmin büyük halini koyuyoruz.
Linkin ekrana gelecek kısmına ise resmin küçük hali <img ile ekleyebilirsiniz.


 <ul id=gallery> 

        <li> 

            <a href="photos/image1.jpg" title="Utilize a flexibilidade do"> 

                <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" /> 

            </a> 

        </li> 

        <li> 

            <a href="photos/image2.jpg" title="Utilize a flexibilidade dos;"> 

                <img src="photos/thumb_image2.jpg" width="72" height="72" alt="" /> 

            </a> 

        </li> 

        <li> 

            <a href="photos/image3.jpg" title="Utilize a flexibilidade dos seletores da "> 

                <img src="photos/thumb_image3.jpg" width="72" height="72" alt="" /> 

            </a> 

        </li> 

        <li> 

            <a href="photos/image4.jpg" title="Utilize"> 

                <img src="photos/thumb_image4.jpg" width="72" height="72" alt="" /> 

            </a> 

        </li> 

        <li> 

            <a href="photos/image5.jpg" title="Utilize a flexi"> 

                <img src="photos/thumb_image5.jpg" width="72" height="72" alt="" /> 

            </a> 

        </li> 

    </ul>

gibi ....

son olarak da işin ekşın kısmı...


   <script type="text/javascript"> 

    $(function() {

        $('#gallery a').lightBox();

    });

    </script>

Burda da jquerynin standart seçicisi ile gallry id si içindeki a ları seçmiş ve lightBox fonskiyonunu uygulamış....

lightbox ile güzel galeriler,sorularınızı yorum ekle kısmından sorabilirsiniz

Etiketler: ,

İlgili Başlıklar» jquery tüm seçiciler selectors
» jquery slider 2 - easy slider
» jquery slider 1 - AnythingSlider
» jquery form wizard (aşamalı form)
» jquery ve seçiciler (selectors)
» jQuery giriş
» jQuery ile güzel bir galeri fancybox

20:12 - php ile resim küçültme ve kırpma
23:34 - php ile arama motoru robotlarını tespit etme
22:17 - html5 giriş ve yeni özellikler
21:16 - php ile mysql veritabanı işlemlerine giriş
20:35 - php while döngüsü
16:57 - Php ile gmail smtp üzerinden mail göndermek
13:07 - Facebook kayıt formu
22:01 - basit renk seçici color picker
16:40 - ckeditör türkçe karakter çözümü
23:21 - fancybox otomatik çalışsın

SAMET TEMİZER
Codrops Hakkında
» Yazarın diğer yazıları

Foto Galeri

Video Galeri

Tüm Galeriler
Php kod editörleri

Haber Arşivi \| Künye \| İletişim \| Giriş sayfam yap \| Sık Kullanılanlara Ekle \| Sitene ekle \|
	Siteden yararlanırken gizlilik ilkelerini okumanızı tavsiye ederiz. Tüm hakları sakldır İzinsiz ve kaynak gösterilmeden yayınlanamaz