CSS ve jQuery Yardımıyla Resimlere Caption

Vatanay Özbeyli CSS3, jQuery, Tasarım Unsurları

Merhaba arkadaşlar. Bu yazımda CSS ve jQuery yardımıyla görsellerimiz için açıklama metinleri oluşturacağız. Bu işlemi yaparken jquery-1.8.3.min.js dosyasına ihtiyaç duyacağız.

Dosyayı buradan indirebilirsiniz veya direkt olarak aşağıda gösterdiğim gibi çağırabilirsiniz.

Bu işlem içerisinde JS kodları barındırsa da performans olarak problem yaratabilecek nitelikte değil. Yani hiç düşünmeden kullanabilirsiniz.

JavaScript‘in replace koduyla çalışmakta. Sayfa içerisindeki altyazı classına sahip tüm görsellerin title değerini örnekte gördüğünüz gibi göstermekte.

Nasıl Yapılır

İlk olarak HTML dosyamızın <head></head> tagları arasına aşağıdaki JS kodlarını ekliyoruz.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('img.altyazı').each(function() {var aciklama = $(this).attr('title');
$(this).wrap('<div class="cerceve"></div>')
.after('<div class="aciklama">'+aciklama+'</div>');});});
</script>

Şimdi CSS dosyamıza aşağıdaki kod satırlarını ekliyoruz.

.cerceve {
position:relative;
float:left;
}
.aciklama {
position:absolute;
bottom:0;
left:0;
text-align:center;
background:black;
color:white;
width:100%;
opacity:.75;
font: bold 0.8em/1em arial;
padding:5px 0 5px 0;
filter:alpha(opacity=85);
}
.cerceve img {display:block;}

ve son olarak HTML dosyamızda görselimizi yayınlama şeklimize altyazı classını ekliyoruz.

<img src="https://www.adobewordpress.com/wp-content/uploads/2012/11/ojeler.jpg" alt="" title="AdobeWordPress.com ~ Ojeler" />

Bu örneği aşağıdan tam anlamıyla test edebilirsiniz.

Uygulama

Umarım işinize yaramıştır.

Görüşmek üzere.