Fancy – Basit bir zoom efekti

Resimler için kullanımı kolay ve basit hazırlanmış bir zoom örneği. Sitenizdeki resimlere uyarladığınızda mousenin üzerine geldiği resim büyüyor. Fotoğraf galerileri için kullanmaya oldukça elverişlidir. Tema satışı yapan bir sitede de buna benzer bir çalışma görmüştüm. İncelemek istediğiniz örneğin başlığının üzerine geldğinizde hemen tam boy resmi görüntüleniyordu. Alış veriş siteleri için de bu çalışmayı kullanmak işinize yarayacaktır. Zoom esnasında bekleme olmadığından ziyaretçileriniz de sıkılmayacak ve anında ürünleri inceleyebilecek.

Kullanım 

• Head etiketleri arasına eklenmesi gereken bölümler.

Js adresi : 

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

Stil : 

Örneğin daha güzel  görünmesi için büyük olan resimlere  ve   Css3 Border Radius ve Box Shadow  özelliği  ekledim. Bu  zellikleri destekleyen tarayıcılar :  Mozilla 3+, İE 9+,  Safari 3+, Opera 10.5 +, Cherome 4+, BlackBerry 6+ ve İOS 1.0+

<style type="text/css">#featured-wrap   { margin: 0 auto;
position: relative; 
width: 592px; 
height: 300px }
#featured-content  { overflow: hidden }
#featured-content a  { margin: 0 5px; 
float: left }
#featured-content a img   { padding: 3px; 
vertical-align: top; 
border: solid 1px }
#featured-preview    { display: none; 
position: absolute; 
z-index: 90; 
top: -64px; 
left: 0; 
width: auto; 
height: auto; 
overflow: hidden;
-moz-box-shadow: 49px 39px 75px #5c5c5c;
-webkit-box-shadow: 49px 39px 75px #5c5c5c;
box-shadow: 49px 39px 75px #5c5c5c;
border:inherit 5px #000000;
-moz-border-radius-topleft: 27px;
-moz-border-radius-topright:27px;
-moz-border-radius-bottomleft:26px;
-moz-border-radius-bottomright:26px;
-webkit-border-top-left-radius:27px;
-webkit-border-top-right-radius:27px;
-webkit-border-bottom-left-radius:26px;
-webkit-border-bottom-right-radius:26px;
border-top-left-radius:27px;
border-top-right-radius:27px;
border-bottom-left-radius:26px;
border-bottom-right-radius:26px;}
#featured-preview  img  { width: 500px; height: 440px;
border:inherit 5px #000000;
-moz-border-radius-topleft: 27px;
-moz-border-radius-topright:27px;
-moz-border-radius-bottomleft:26px;
-moz-border-radius-bottomright:26px;
-webkit-border-top-left-radius:27px;
-webkit-border-top-right-radius:27px;
-webkit-border-bottom-left-radius:26px;
-webkit-border-bottom-right-radius:26px;
border-top-left-radius:27px;
border-top-right-radius:27px;
border-bottom-left-radius:26px;
border-bottom-right-radius:26px; }
#featured-overlay  { position: absolute; z-index: 100; top: 0; left: 0 }
#featured-overlay div   { background: red; display: none; width: 148px; height: 96px; float: left }
</style>

 JavaScript : 

	<script type="text/javascript">

		function showPreview(event) {
			$("#featured-preview").show();
		};

		function hidePreview(event) {
			$("#featured-preview").hide();
		};

		function updatePreview(index) {
			$("#featured-preview img").hide().eq( index ).show();
		};

		function movePreview(event) {
			var content_position = $("#featured-content").offset();

			$("#featured-preview").css("left", event.pageX - content_position.left - 160);
		};

		$(document).ready(function() {
			var content_els		= $("#featured-content a");
			var overlay_wrap	= $("#featured-overlay");
			var overlay_els		= $("div", overlay_wrap)

			overlay_els
				.css('opacity', 0)
				.mousemove( movePreview )
				.mouseenter(function() {
					updatePreview( overlay_els.index( this ) );
				})
				.click(function() {
					window.location.href = content_els.eq( overlay_els.index( this ) ).attr("href");
				})
				.show();

			overlay_wrap
				.mouseenter( showPreview )
				.mouseleave( hidePreview );

		});
	</script>

•  Body  etiketleri arasına eklenmesi gereken bölüm.

Html : 

		<div id="featured-wrap">
			<div id="featured-content">
				<a href="#"><img alt="Jardines" src="2_s.jpg" /></a>
				<a href="#"><img alt="101 - Cientouno" src="1_s.jpg" /></a>
				<a href="#"><img alt="Mission Bicycle Company" src="3_s.jpg" />
				</a><a href="#"><img alt="Bet Your Followers" src="5_s.jpg" /></a>
			</div>
			<div id="featured-preview">
				<img alt="Jardines" src="2_b.jpg" />
				<img alt="101 - Cientouno" src="1_b.jpg" />
				<img alt="Mission Bicycle Company" src="3_b.jpg" />
				<img alt="Bet Your Followers" src="5_b.jpg" />
			</div>
			<div id="featured-overlay">
				<div></div><div></div><div></div><div></div>
			</div>
		</div>