10 Mayıs 2010 Pazartesi

3
Blogger Lightbox Eklentisi | Resme Tıklayın Büyüsün !

Birçok sitede görüyoruz.Resim ekliyorlar fakat resim çok küçük oluyor , yeni sayfada açsak bile istediğimiz görüntüyü elde edemiyoruz.Lightbox eklentisi burada devreye giriyor.Yani resme tıklıyorsunuz ve resim arkplanı siyah olmak üzere büyüyor.

Aşama 1 : Kod Değişimi
Yerleşim / HTML'yi Düzenle'ye giriyor Widget Şablonunu Genişlet diyoruz.

CTRL + F yardımıyla aşağıdaki kodu buluyoruz :
</head>





ve bu kodun üstüne aşağıdaki kodu ekliyoruz:
    <!--Bilquer Lightbox Blogger Resim Kodunu Sunar-->
    <style>
    #lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
    #lightbox img{ width: auto; height: auto;}
    #lightbox a img{ border: none; }

    #outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
    #imageContainer{ padding: 10px; }

    #loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
    #hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
    #imageContainer&gt;#hoverNav{ left: 0;}
    #hoverNav a{ outline: none;}

    #prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
    #prevLink { left: 0; float: left;}
    #nextLink { right: 0; float: right;}
    #prevLink:hover, #prevLink:visited:hover { background: url(http://i43.tinypic.com/mj5wyd.jpg) left 15% no-repeat; }
    #nextLink:hover, #nextLink:visited:hover { background: url(http://i44.tinypic.com/mjljmh.jpg) right 15% no-repeat; }

    #imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }

    #imageData{ padding:0 10px; color: #666; }
    #imageData #imageDetails{ width: 70%; float: left; text-align: left; }
    #imageData #caption{ font-weight: bold; }
    #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
    #imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}

    #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
    round-color: #000; }
    lute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
    round-color: #000; }
    </style>
    <script src='http://sites.google.com/site/bilquer/Prototype.js' type='text/javascript'/>
    <script src='http://files.bloggerplugins.org/lbox/js/scriptaculous.js' type='text/javascript'/>
    <script src='http://www.weebly.com/uploads/2/2/1/0/2210502/lightbox.js' type='text/javascript'/>
    <!--Bilquer Lightbox Blogger Resim Kodunu Sundu-->


Buraya kadar işin pasif kısmını atlattık.Şimdi geldi sıra aktif kısma.Bu kısımda resmi yazılarımıza nasıl kullanacağımızı anlatacağım.

İlk olarak yazımıza başlıyoruz ve resim ekleme sırası geldiğinde resmimizi Blogger'a yüklüyoruz.

Aşama 2: Blogger'a Resim Yükleme:
Aşağıda gösterdiğim simgeye tıklıyoruz.


Karşımıza bir pencere çıkacak.Buradan sırasıyla Dosya Seç butonuna tıklıyoruz ve resmimizi seçtikten sonra aç diyoruz ve resmimizin yüklenmesini bekliyoruz.


Yüklendikten sonra karşımıza şöyle bir pencere çıkacak.Buna da Tamam diyoruz ve Blogger resim yükleme aşamasını geçmiş oluyoruz.

Aşama 3: Resim Kodumuz
Kodları ekledik , resmimizi yükledik şimdi ne yapacağız?
Resmimizi yükledikten sonra sayfamızdaki HTML'yi Düzenle butonuna basıyoruz.

Resminize ait imageanchor="1" rel="lightbox" title="Bilquer" kodunu buluyoruz ve bu kodun hemen yanına rel="lightbox" title="Resim Açıklaması" kodunu ekliyoruz.Bu kodu eklemezseniz resme tıklayınca, resim yeni sayfada açılır.Lightbox kullandığınızda yani bu kodu yazdığınızda resme tıklayınca resim büyüyecektir.


Yani ekledikten sonra şöyle bir kod oluşacak : imageanchor="1" rel="lightbox" title="Resim Açıklaması"


Bu arada Resim Açıklaması'nı istediğiniz gibi değiştirebilirsiniz.


Unutmayın büyütmek istediğiniz her resme bu kodları ekleyeceksiniz, eklediğiniz resimler bu kodu otomatik olarak eklemez ;)




İşte Örnek Resimler (Üzerlerine Tıklayınız) :









* Yazıda Özgün İçeriğin Yanı Sıra Aşağıdaki Sitelerden De Yararlanılmıştır


3 yorum:

Erkin Eren dedi ki...

şuandaki bloggerla uyumlu değil galiba? nasıl uygulayabililrm?

Admin dedi ki...

@Erkin Eren,

Hayır uygun zaten konu içine koyduğum fotoğraflara tıklayınca açılıyor ordan da görebilirsin ;) Sanırım yanlış bir şey yaptın.

Site yedeğini aldıktan sonra adımları daha iyi takip ederek uygulayabileceğini düşünüyorum.Eğer hala uygulayamazsan özel olarak yapmana yardımcı olabilirim ;) Kolay gelsin.

Furkan Özden dedi ki...

İşte bu kısımdan sonra benim yazım devreye giriyor :)

@Bilquer sizin verdiğiniz kodda, resimlere tek tek rel="lightbox" kodu eklemek lazım geliyor, işte bende bunu araştırdım, o kodu bizim yerimize koyan bir kod buldum :) http://furkanozden.blogspot.com/2011/09/tum-resimlere-lightbox-kodu-ekleme.html Maksat insanlar faydalansın, yorumumu onaylarsan sevinirim. Saygılarımla.

Yorum Gönder

Anlayamadığınız yerleri lütfen yorum olarak belirtiniz. ''Buraya yorum yazsam ne zaman cevap verir ki? ... '' diye düşünmeyin zaten her dakika blogdayım ;) Sorularınıza elimden geldiği kadarıyla cevap vermeye çalışacağım.