İlk yazımda ne yazayım diye düşünürken sonunda işe yarar bir şeyler buldum. Bu yazımda size jqueryve css ile hazırlanmış hoş bir efekt uygulaması anlatacağım. Yapılış kısmına geçmeden önce uygulamanın örneğine şuradan bakabilirsiniz. Şimdi lafı kısa kesip icraata geçelim.

xhtml kısmı

Bu bölüm işin en kolay kısmı, aşağıdaki kodları resminizin görünmesini istediğimiz kısma yerleştirin. Tabi ki yerleştirmeden önce resim url lerinizi ve açıklamalarınızı eklemeyi unutmayın.

<ul>
	<li>
		<a href="#"><span><img src="resim_url.gif" alt="" /></span></a>
		<h2><a href="#">Resim açıklaması</a></h2>
	</li>
</ul>

Css Kodları

Css kodlarında düzenleme yapmanıza gerek yok fakat isterseniz açıklamakısmındaki yazı rengini vb. değişikliklerde bulunabilirsiniz. Kodları css klasörünüze yerleştirin.

ul.gallery {
	width: 708px; /*--Adjust width according to your scenario--*/
	list-style: none;
	margin: 0; padding: 0;
}
ul.gallery li {
	float: left;
	margin: 10px; padding: 0;
	text-align: center;
	border: 1px solid #ccc;
	-moz-border-radius: 3px; /*--CSS3 Rounded Corners--*/
	-khtml-border-radius: 3px; /*--CSS3 Rounded Corners--*/
	-webkit-border-radius: 3px; /*--CSS3 Rounded Corners--*/
	display: inline; /*--Gimp Fix aka IE6 Fix - Fixes double margin bug--*/
}
ul.gallery li a.thumb {
	width: 204px; /*--Width of image--*/
	height: 182px; /*--Height of image--*/
	padding: 5px;
	border-bottom: 1px solid #ccc;
	cursor: pointer;
}
ul.gallery li span { /*--Used to crop image--*/
	width: 204px;
	height: 182px;
	overflow: hidden;
	display: block;
}
ul.gallery li a.thumb:hover {
	background: #333; /*--Hover effect for browser with js turned off--*/
}
ul.gallery li h2 {
	font-size: 1em;
	font-weight: normal;
	text-transform: uppercase;
	margin: 0; padding: 10px;
	background: #f0f0f0;
	border-top: 1px solid #fff; /*--Subtle bevel effect--*/
}
ul.gallery li a {text-decoration: none; color: #777; display: block;}

Jquery Kısmı

Bu bölümde ilk olarak aşağıdaki aşağıdaki kodu head tagları arasına ekleyin.

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

Daha sonra aşağıdaki kodu yine head tagları arasına  ekleyin.

<script type="text/javascript">

$(document).ready(function() {

	$("ul.gallery li").hover(function() { //On hover...

		var thumbOver = $(this).find("img").attr("src"); //Get image url and assign it to 'thumbOver'

		//Set a background image(thumbOver) on the <a> tag - Set position to bottom
		$(this).find("a.thumb").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'});

		//Animate the image to 0 opacity (fade it out)
		$(this).find("span").stop().fadeTo('normal', 0 , function() {
			$(this).hide() //Hide the image after fade
		});
	} , function() { //on hover out...
		//Fade the image to full opacity
		$(this).find("span").stop().fadeTo('normal', 1).show();
	});

});

</script>

İşte bu kadar sizin yapacağınız tek şey html kodlarına resimlerinizi eklemek.

Bu yazı Ocak 20, 2010 tarihinde Web Tasarım kategorisi altında yayınlandı. Bu yazıya yapılacak yorumlardan haberdar olmak için Rss 2.0 beslemesini kullanabilirsiniz. Yorum yapabilirsiniz.