Tek Kod İle Tüm Resimleri Lightbox İle Açmak [Blogger]

Blogger'in yeni eklentilerinden biri olan Lightbox'u duymayana yoktur heralde. 2 gündür doğru düzgün bir kod arıyordum tüm resimleri tek bir kod ile lightbox'ta açmak için ve sonunda 2 farklı sitede gördüğüm kodların birleşimiyle bunu halletim.

Diğer sitelerde anlatılanlarda her resim için ayrı ayrı rel="lightbox" title eklenmesi gerekiyordu ama bu kodda öyle bişey yok. Kodu sitenize eklediğiniz anda tüm resimleriniz otomatik olarak Light Box şeklinde açılacaktır.

Tek yapmanız gerekenler şunlar :

Tasarım -> HTML'yi Düzenle kısmından "Widget Şablonunu Genişlet" yaptıktan sonra;

</head>

kodunu buluyoruz ve hemen üstüne aşağıdaki kodu yapıştırıyoruz ve ayarları kaydediyoruz. Hepsi bu kadar. Hayırlı olsun artık tüm resimleriniz Lightbox şeklinde açılacaktır. :)

*Kodu seçtikten sonra CTRL + C tuş kombinasyonunu kullanarak kodu kopyalayabilirsiniz. <!--Lightbox Blogger Resim Kodu--> <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>#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--> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/> <style type='text/css'> /* jQuery lightBox plugin - Gallery style */ #gallery { background-color: #444; padding: 10px; width: 520px; } #gallery ul { list-style: none; } #gallery ul li { display: inline; } #gallery ul img { border: 5px solid #3e3e3e; border-width: 5px 5px 20px; } #gallery ul a:hover img { border: 5px solid #fff; border-width: 5px 5px 20px; color: #fff; } #gallery ul a:hover { color: #fff; } </style> <script src='http://dinhquanghuy.110mb.com/lightbox/jquery.lightbox-0.5.js' type='text/javascript'/> <link href='http://dinhquanghuy.110mb.com/lightbox/jquery.lightbox-0.5.css' media='screen' rel='stylesheet' type='text/css'/> <script type='text/javascript'> $(function() { $('a[href$=jpg], a[href$=JPG], a[href$=jpeg], a[href$=JPEG], a[href$=png], a[href$=gif], a[href$=bmp]:has(img)').lightBox(); }); </script>
14.07.2012 - Ekleme : Bu kodları sitenizde kullandığınız zaman resimleriniz Lightbox ile açılacak ve görüntü olarak hoş bir görüntü verecektir ama siteniz normalden birkaç saniye daha geç açılacaktır. Yani sonuç olarak kod, sitenin daha geç yüklenmesine sebep oluyor. Kullanacaklar için bunu da ek bir bilgi olarak belirtmek istedim. Ben 1 hafta kullandım ve izlenimlerim sonucu böyle bir sonuca vardım. Kullanıp kullanmamak ise sizlere kalmış tabi.