Bir lightbox uygulaması daha önce görmediyseniz yandaki resme yıklayarak olanları görebilirsiniz.
Lightbox kurulumu: Anlatımı Wordpress için yapıyoruz, kendi kodlarınızı yazıyorsanız da kurulum aynıdır ve belki benzer bir sorunun çözümü olabilir.
1. Yaptığınız tüm lightbox değişikliklerinizi geri alın, varsa eklediğiniz kodları kaldırın, kurduysanız lightbox eklentilerinizi kaldırın ve buraya tıklayarak lightbox dosyalarını indirin. (Dosyaların orjinali Dynamicdrive.com adresindedir.)
2. İndirdiğiniz sıkıştırılmış dosyayı açın, css ve js klasörlerini temanızın dizinine (wp-content/themes/temanizinadi/) gönderin. images klasörünü ise blog anadizinine (wp-config.php dosyasının bulunduğu yer) gönderin.
3. Temanızın header.php dosyasını açın. </head> tagından önce aşağıdaki kodları ekleyin, sitenizinadi ve temanizinadi kısımlarını kendinize göre değiştirin.
<script type="text/javascript" src="http://www.sitenizinadi.com/wp-content/themes/temanizinadi/js/prototype.js"></script>
<script type="text/javascript" src="http://www.sitenizinadi.com/wp-content/themes/temanizinadi/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="http://www.sitenizinadi.com/wp-content/themes/temanizinadi/js/lightbox.js"></script>
<link rel="stylesheet" href="http://www.sitenizinadi.com/wp-content/themes/temanizinadi/css/lightbox.css" type="text/css" media="screen" />
4. Uygulaması: Artık bir resim eklediğinizde aşağıdaki taglar arasına alıyorsunuz. Resimtagı yerine yazacağınız <img src="http://www.sitenizinadi.com/wp-content/uploads/resim.jpg" /> benzeri tagda src kısmına üzerine tıklanacak olan küçük resmin adresini yazıyoruz. Aşağıdaki href yoluna da açılacak olan büyük resmin adresini yazıyoruz.
<a href="http://www.siteadiniz.com/resim1.jpg" rel="lightbox" title="resim1">resimtagı</a>
Eğer resimleri grup halinde verecekseniz yani üzerine gelince ileri geri düğmesi çıksın istiyorsanız aşağıdaki gibi bir düzen oluşturmanız gerekiyor, biz gruba "deneme" ismini verdik. Çalışan örnek görmek için tıklayınız.
<a href="http://www.siteadiniz.com/resim1.jpg" rel="lightbox[deneme]">resimtagı</a>
<a href="http://www.siteadiniz.com/resim1.jpg" rel="lightbox[deneme]">resimtagı</a>
<a href="http://www.siteadiniz.com/resim1.jpg" rel="lightbox[deneme]">resimtagı</a>
**Normalde Lightbox kurulumu bu kadar. Şimdi eğer lightbox eklentisi çalışmıyor ve resimler yeni pencerede açılıyorsa ne yaparız ona bakalım:
Temanızın header.php dosyasında <body> tagını bulun ve aşağıdaki ile değiştirin.
<body onload="initLightbox()">
Eğer <body> tagınızda aşağıdaki gibi tanımlamalar varsa;
<body onload="MM_preloadImages(‘/images/menu_on.gif’)…;">
en sona noktalı virgülden sonra initLightbox() ismini ekliyorsunuz ve aşağıdaki gibi oluyor:
<body onload="MM_preloadImages(‘/images/menu_on.gif’)…;initLightbox()">
Bütün bunlara ne gerek var, zaten Wordpress eklentileriyle bunu yapabiliriz diyebilirsiniz, doğrudur. Eğer bir sorunla karşılaşan olursa yukardaki gibi deneyebilir.
Bu yazı toplam 3568 defa görüntülenmiştir.
Yazıyı paylaşmak ister misiniz?
Selam
bende lighbox u kullanarak fotograf kullanıyorum, fakat ben iler ve geri tuşlarının sürekli görünmesini istyorum nereden düzeltebiliriz?
yardmcı olursanız sevinirim.
kolayy gelsin.