jquery lightbox galeri kullanımı

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ı
Hangi php editörünü kullanıyorsunuz

rapid php editor
dzsoft php editor
Php designer
Notepad
Zend Studio
notepad++
phped
dreamweaver
Diğer
Diğer Anketler
Foto Galeri Video Galeri
Php kod editörleri

Tüm Galeriler
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