Merhabalar bu yazımda sizlere anlatımını yapacağım eklenti blogunda görselliğe önem veren kişiler için muhteşem bir eklentidir.Bu eklenti sayesinde blogunuzdaki bir resime tıklandığı zaman direk resmi açmak yerine arka planı karartıp resmi ön plana çıkartır.Böylece LightBox eklentisi sayesinde blogunuza muhteşem bir görsellik kazandırmış olursunuz.LightBox eklentisini blogunuza kurmak için aşağıdaki adımları izlemeniz yeterli olacaktır.
Öncelikle blogumuzun CSS kısmına aşağıdaki kodları ekliyoruz;
#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://img222.imageshack.us/img222/2760/gerih.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://img819.imageshack.us/img819/9932/ileri.gif) 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; }
Daha sonra, blogumuzun html kodları arasında yer alan aşağıdaki kodu bulalım;
</head>
Bulduğumuz bu kodun hemen üst satırına aşağıdaki kodları ekliyoruz
<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js' type='text/javascript'/>
<script src='http://teknobeyin.googlecode.com/files/scriptaculous.js' type='text/javascript'/>
<script src='http://teknobeyin.googlecode.com/files/lightbox.js' type='text/javascript'/>
İşte herşey bu kadar..
Eklentiyi kullanmak için, yazınıza resim ekler iken eklediğiniz resmin kodlarını aşağıdaki şekilde değiştirmeniz gerekiyor.
Eklediğiniz resimin kodlarında aşağıdaki koda benzer bir kodu bulun;
imageanchor="1"
Yukarıdaki kodu bulduktan sonra, yukarıdaki kodun sağ tarafına aşağıdaki kodu ekleyin;
rel="lightbox" title="Eklediğiniz Resmin Başlığı"
Yorumlar
Yorum Gönder