capty

Buna benzer tasarımlar hazırlamak için bir eklentiye ne kadar ihtiyaç duyulur tartışılır gibi. Sonuçta sadece Css kullanarak bile bundan daha iyi tasarımlar yapılabilir. Yine de bazı arkadaşların işine yarayabilir düşüncesi ile paylaşmak istedim sizlerle. Birçok web sitesinde kullanan, en çok tercih edilen ve genellikle de resim galeri veya portfolyo sayfalarında kullanılan bir özelliktir. Mouse resimlerin üzerine geldiğinde resimlerin açıklamaları alt kısımdan yukarıya doğru kayar ve ziyaretçiler açıklamaları görürler. Hem sitedeki fotoğrafları daha iyi ve engel olmadan incelemek açısından da oldukça mantıklı bir yöntemdir. Washington Botelho‘nun yapmış olduğu Capty.js için eklediğim caption plugin kelimesinin anlamış başlık eklentisi demek oluyor.


Kullanım 

  • Head  etiketleri arasına eklenecek olan bölümler.

Js dosya adresleri :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.capty.min.js"></script>

Stil : 

<style type="text/css">
@CHARSET "UTF-8";

div.capty-caption {
	background-color: #000;
	color: #FFF;
	font: bold 11px verdana;
	padding-left: 10px;
	padding-top: 7px;
	text-shadow: 1px 1px 0 #222;
}

div.capty-caption a {
	color: #318DAD;
	font: bold 11px verdana;
	text-decoration: none;
	text-shadow: none;
}
</style>

JavaScript :

	<script type="text/javascript">
		$(function() {
			$('#content').capty({
				height:		70,
				opacity:	.6
			});
		});
	</script>
  • Body  etiketleri arasına eklenecek olan bölüm.

Html :

<img id="content" src="img/image.jpg" alt="" name="#content-target" width="500" height="400"/>
<div id="content-target">
<font size="4"><b><span style="color: #F00;">jQuery Plugin</span> - &#x0130;stanbul Bo&#x011F;az&#x0131; - T&uuml;rkiye<br/>						 
<a href="javascript:void(0);">http://www.mintik.com</a></b></font></div>
</div>

Bu Yazıyı Paylaş

Bir cevap yazın

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

ÜYE GİRİŞİ

Arkadaş ekleme, özel mesaj, kişisel yazı paylaşmak için siteye giriş yapın

Şifremi unuttum? Kayıt Ol!
  • Ali:

    Pardon Yuyyu olacaktı...

  • Ali:

    Tamam yuyu da olsun :)...

  • Arkadaşlık Uygulaması:

    Yuyyu Online Arkadaşlık Sitesi – Sohbet Et ve Yeni İnsanlarla Tanış Yuy...

  • Ali:

    Üşenmeden web arşivi linkini arayıp bulmuşsun teşekkürler :)...

  • ibrahim:

    türkiyeden de bırakan olmuş oyunu. dünya geneli de bırakan epey olmuş. wi...

  • Araç çubuğuna atla