jQuery altYaz Eklentisi

Jquery altYaz eklentisi örnek görseli

Yeni yazdığım Resimlerin altına o resimler hakkında dipnot yazmaya yarayan altYaz ismini verdiğim jquery eklentisini size tanıtmak istiyorum.

İsminden de anlaşılabileceği üzere eklentinin yaptığı iş tam olarak görsel’in “alt” etiketindeki bilgiyi yine aynı görsel’in altına yazmak olduğunu belirteyim. Aşağıdan bi’örnek kullanımı inceleyebilirsiniz.

Örnek Uygulama | Eklenti Dosyası | Örnek Uygulamayı İndir

Kullanımı ise şöyle

Jquery ve altYaz eklenti js dosyalarını sayfaya çağırdıktan sonra

<script type="text/javascript">
$(function(){ //document ready olayı
$('img').altYaz()
})
</script>

Eklentinin ayrıca 4 farklı ayar seçeneği bulunuyor,bunlar;

sinif: Görselin altına oluşturulacak div’in class değerini ifade eder. Varsayılan değeri ‘aciklama’.

marginBottom: Metnin yazılacağı div’in resmin konumundan ne kadar aşağıda olacağını belirler. Varsayılan değeri 0. (-) değeri vererek resmin üzerine çekebilirsiniz.

marginLeft: Metnin görselin solundan sağa ne kadar kayacağını belirler. Varsayılan değer 0;

genislikOrani: Metnin yazılacağı alanın görselin boyutuna %(yüzde) cinsinden oranını belirler. Varsayılan değer 100’dür.

Bu ayarların kullanımı ise

<script type="text/javascript">
$(function(){ //document ready olayı
$('img').altYaz({
  'sinif':'alti',
  'marginBottom':5,
  'marginLeft':5,
  'genislikOrani':50});
})
<script>

Örnek Uygulama | Eklenti Dosyası | Örnek Uygulamayı İndir

Öneride bulunarak veya geliştirerek eklentiye katkıda bulunabilirsiniz.

Sağlıcakla kalın.

3 thoughts on “jQuery altYaz Eklentisi

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir