resimbuyuteci-lightboxkodu

Resim büyüteci + LightBox Kodu

Sitemizde oluşan bazı hatalar nedeniyle bu kodun önizlemesi yok!

s<link rel="stylesheet" type="text/css" href="http://bilgilisite.abcz8.com/bs-aktif/kodabc12/css/style.css" /> <link rel="stylesheet" type="text/css" href="http://bilgilisite.abcz8.com/bs-aktif/kodabc12/cloud-zoom/cloud-zoom.css" /> <link rel="stylesheet" type="text/css" href="http://bilgilisite.abcz8.com/bs-aktif/kodabc12/fancybox/jquery.fancybox-1.3.4.css" />  		<script src="http://bilgilisite.abcz8.com/bs-aktif/kodabc12/js/cufon-yui.js" type="text/javascript"></script>  		<script src="http://bilgilisite.abcz8.com/bs-aktif/kodabc12/js/ChunkFive_400.font.js" type="text/javascript"></script>  		<script type="text/javascript">
 
			Cufon.replace('h1',{ textShadow: '1px 1px #D1EF95'});
 
			Cufon.replace('h2',{ textShadow: '1px 1px #D1EF95'});
 
			Cufon.replace('.footer');
 
		</script> <div class="wrapper"> <div id="content" class="content"> <div class="item"> <div class="thumb_wrapper"> <div class="thumb"> <ul>     <li><a rev="group1" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class="cloud-zoom" href="http://bilgilisite.abcz8.com/bs-aktif/kodabc12/images/formstack1.jpg" _fcksavedurl="http://bilgilisite.abcz8.com/bs-aktif/kodabc12/images/formstack1.jpg"><br />     <img alt="Formstack 1" src="http://bilgilisite.abcz8.com/bs-aktif/kodabc12/images/thumbs/formstack1.jpg" _fcksavedurl="http://bilgilisite.abcz8.com/bs-aktif/kodabc12/images/thumbs/formstack1.jpg" /></a></li>     <li><a rev="group1" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class="cloud-zoom" href="http://bilgilisite.abcz8.com/bs-aktif/kodabc12/images/formstack2.jpg" _fcksavedurl="http://bilgilisite.abcz8.com/bs-aktif/kodabc12/images/formstack2.jpg"><img alt="Formstack 2" src="http://bilgilisite.abcz8.com/bs-aktif/kodabc12/images/thumbs/formstack2.jpg" _fcksavedurl="http://bilgilisite.abcz8.com/bs-aktif/kodabc12/images/thumbs/formstack2.jpg" /></a></li>     <li><a rev="group1" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class="cloud-zoom" href="http://bilgilisite.abcz8.com/bs-aktif/kodabc12/images/formstack3.jpg" _fcksavedurl="http://bilgilisite.abcz8.com/bs-aktif/kodabc12/images/formstack3.jpg"><img alt="Formstack 3" src="http://bilgilisite.abcz8.com/bs-aktif/kodabc12/images/thumbs/formstack3.jpg" _fcksavedurl="http://bilgilisite.abcz8.com/bs-aktif/kodabc12/images/thumbs/formstack3.jpg" /></a></li> </ul> </div> <span>Üstüne tıklayarak büyütebilirsin.</span></div> <div class="description"> </div> <div class="item"> <div class="thumb_wrapper"> <div class="thumb"> <ul>     <li><a rev="group2" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class="cloud-zoom" href="http://bilgilisite.abcz8.com/bs-aktif/kodabc12/images/knowapp1.jpg" _fcksavedurl="http://bilgilisite.abcz8.com/bs-aktif/kodabc12/images/knowapp1.jpg"><img alt="Knowapp 1" src="http://bilgilisite.abcz8.com/bs-aktif/kodabc12/images/thumbs/knowapp1.jpg" _fcksavedurl="http://bilgilisite.abcz8.com/bs-aktif/kodabc12/images/thumbs/knowapp1.jpg" /></a></li>     <li><a rev="group2" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class="cloud-zoom" href="http://bilgilisite.abcz8.com/bs-aktif/kodabc12/images/knowapp2.jpg" _fcksavedurl="http://bilgilisite.abcz8.com/bs-aktif/kodabc12/images/knowapp2.jpg"><img alt="Knowapp 2" src="http://bilgilisite.abcz8.com/bs-aktif/kodabc12/images/thumbs/knowapp2.jpg" _fcksavedurl="http://bilgilisite.abcz8.com/bs-aktif/kodabc12/images/thumbs/knowapp2.jpg" /></a></li>     <li><a rev="group2" rel="zoomHeight:200, zoomWidth:400, adjustX: 10, adjustY:-4, position:'body'" class="cloud-zoom" href="http://bilgilisite.abcz8.com/bs-aktif/kodabc12/images/knowapp3.jpg" _fcksavedurl="http://bilgilisite.abcz8.com/bs-aktif/kodabc12/images/knowapp3.jpg"><img alt="Knowapp 3" src="http://bilgilisite.abcz8.com/bs-aktif/kodabc12/images/thumbs/knowapp3.jpg" _fcksavedurl="http://bilgilisite.abcz8.com/bs-aktif/kodabc12/images/thumbs/knowapp3.jpg" /></a></li> </ul> </div> <span>Üstüne tıklayarak büyütebilirsin.</span></div> </div>   		<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>  		<script type="text/javascript" src="http://bilgilisite.abcz8.com/bs-aktif/kodabc12/fancybox/jquery.easing-1.3.pack.js"></script>  		<script type="text/javascript" src="http://bilgilisite.abcz8.com/bs-aktif/kodabc12/fancybox/jquery.fancybox-1.3.4.js"></script>  		<script type="text/javascript" src="http://bilgilisite.abcz8.com/bs-aktif/kodabc12/cloud-zoom/cloud-zoom.1.0.2.js"></script>  		<script type="text/javascript">
 
			$(function() {
 
				/*
 
				fancybox init on each cloud-zoom element
 
				 */
 
				$("#content .cloud-zoom").fancybox({
 
					'transitionIn'	:	'elastic',
 
					'transitionOut'	:	'none',
 
					'speedIn'		:	600,
 
					'speedOut'		:	200,
 
					'overlayShow'	:	true,
 
					'overlayColor'	:	'#000',
 
					'cyclic'		:	true,
 
					'easingIn'		:	'easeInOutExpo'
 
				});
 
 
 
				/*
 
				because the cloud zoom plugin draws a mousetrap
 
				div on top of the image, the fancybox click needs
 
				to be changed. What we do here is to trigger the click
 
				the fancybox expects, when we click the mousetrap div.
 
				We know the mousetrap div is inserted after
 
				the <a> we want to click:
 
				 */
 
				$("#content .mousetrap").live('click',function(){
 
					$(this).prev().trigger('click');
 
				});
 
 
 
				/*
 
				the content element;
 
				each list item / group with several images
 
				 */
 
				var $content	= $('#content'),
 
				$thumb_list = $content.find('.thumb > ul');
 
				/*
 
				we need to set the width of each ul (sum of the children width);
 
				we are also defining the click events on the right and left arrows
 
				of each item.
 
				 */
 
				$thumb_list.each(function(){
 
					var $this_list	= $(this),
 
					total_w		= 0,
 
					loaded		= 0,
 
					//preload all the images first
 
					$images		= $this_list.find('img'),
 
					total_images= $images.length;
 
					$images.each(function(){
 
						var $img	= $(this);
 
						$('<img/>').load(function(){
 
							++loaded;
 
							if (loaded == total_images){
 
								$this_list.data('current',0).children().each(function(){
 
									total_w	+= $(this).width();
 
								});
 
								$this_list.css('width', total_w + 'px');
 
 
 
								//next / prev events
 
 
 
								$this_list.parent()
 
								.siblings('.next')
 
								.bind('click',function(e){
 
									var current = $this_list.data('current');
 
									if(current == $this_list.children().length -1) return false;
 
									var	next	= ++current,
 
									ml		= -next * $this_list.children(':first').width();
 
 
 
									$this_list.data('current',next)
 
									.stop()
 
									.animate({
 
										'marginLeft'	: ml + 'px'
 
									},400);
 
									e.preventDefault();
 
								})
 
								.end()
 
								.siblings('.prev')
 
								.bind('click',function(e){
 
									var current = $this_list.data('current');
 
									if(current == 0) return false;
 
									var	prev	= --current,
 
									ml		= -prev * $this_list.children(':first').width();
 
 
 
									$this_list.data('current',prev)
 
									.stop()
 
									.animate({
 
										'marginLeft'	: ml + 'px'
 
									},400);
 
									e.preventDefault();
 
								});
 
							}
 
						}).attr('src',$img.attr('src'));
 
					});
 
				});
 
			});
 
        </script></div> </div>  </div>

Bugün 10 ziyaretçi (12 klik) kişi burdaydı!

WeebLoGG

Ana Menü

Kategoriler

Sponsorlar

WeebLoGG | Farka Varın.!

resimbuyuteci-lightboxkodu

Resim büyüteci + LightBox Kodu