jQuery ile Resimlere Başlık Ekleme

Her Blogger, çoğu yazısında en azından bir tane resim kullanır. Kullanılan resimlerde öncelikli olarak çözünürlük, özgünlük, konu ile alaka gibi hususlar önemlidir. Bunun yanında resmin çerçevesi ve başlığı da bir o kadar önemlidir. jQuery ile resimlere başlık ekleme yazısı ile resimlere hem şık bir çerçeve hem de devamlı görüntülenen başlık ekleyebileceğiz. Aşağıdaki örnek resimde resim çerçevesini ve başlığı görebilirsiniz.



Resimlere jQuery ile Başlık Eklemek için yapılması gerekenler şöyle;
Temanızın yedeğini almayı unutmayın.

Adım 1: jQuery Kodunu Eklemek

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src='http://dl.getdropbox.com/u/1693834/javascript/addcaption.js' type='text/javascript'/>

Yukarıdaki kodu kopyalayın ve temanızda yer alan </head> kodunun bir üst satırına yapıştırın. Temanızı kaydedin.

Adım 2: CSS Kodunu Eklemek

/* jQuery ile Resimlere Başlık Ekleme
--------------------------------------------------- */
div.addCaption {
margin-bottom:1.5em;
padding:10px;
text-align:center;
background:#f0f0f0;
border:1px solid #ccc;
color:#565656;
display:inline-block;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}

div.addCaption img {
display:block;
}

Yukarıdaki kodu kopyalayın ve temanızdaki ]]></b:skin> kodunun bir üst sırasına yapıştırın. Temanızı kaydedin.

Adım 3 : Resimlere Başlık Ekleme

jQuery kodlarını ve CSS kodlarımızı ekledikten sonra tema kaydedildi. Ancak bu özeliğin devreye girebilmesi için yüklenen ya da yüklenecek resimlerin kodlarında ufak bir düzenleme yapılmalıdır. Yukarıdaki örnek resim kodunda, kırmızı ile kutucuğa alınan iki kodu her kullanmak istediğimiz resime elle yazılmalı. Resime addCaption ve title eklemelisiniz. Burada dikkat etmeniz gereken nokta şudur; addCaption ve title kodları, resim kodunun img ile başlayan kısımdan hemen sonra eklenmelidir. Örnek;

<img class="addCaption" title="Resim-Başlık"/>

Resimlere Zoom Ekleme özelliğinin ardından yine resimlerle alakalı faydalı bir özellik daha anlatılmış oldu. Anlaşılmayan kısımlar olursa lütfen yorumlar kısmında belirtin.

Kolay Gelsin...