4

    Az önce öyle bir kod buldum ki; Dedim hemen paylaşayım. Bunu gösterdiğim 3-4 kişi cok beğendi, Sevdi. Sizinle paylaşıyorum ki seveceğinizden eminim. Resimleri üstüne geldiğinizde büyüyen yaptım. Ayrıca tıkladıgınızda da js lightbox acılıyor. Cok güzel bir paylaşım oldu ki buna eminim ... Kodları tek kod olarak yayınladım. Güle güle kullanın.
    Ön izlemesi;



  • Formstack 1
     
  • Formstack 2
     
  • Formstack 3
     
Üstüne tıklayarak büyütebilirsin.

  • Knowapp 1
     
  • Knowapp 2
     
  • Knowapp 3
     
Üstüne tıklayarak büyütebilirsin

Bu kod bana ait değildir. Bi kod paylaşım sitesinde paylaşılmıştır. Yayınlama hakkı bana aittir, yayınlanması yasaktır. Kullanabilirsiniz.
Kodu:
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"><br />
    <img alt="Formstack 1" src="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"><img alt="Formstack 2" src="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"><img alt="Formstack 3" src="http://bilgilisite.abcz8.com/bs-aktif/kodabc12/images/thumbs/formstack3.jpg" /></a></li>
</ul>
</div>
<span>&Uuml;st&uuml;ne tıklayarak b&uuml;y&uuml;tebilirsin.</span></div>
<div class="description">&nbsp;</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"><img alt="Knowapp 1" src="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"><img alt="Knowapp 2" src="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"><img alt="Knowapp 3" src="http://bilgilisite.abcz8.com/bs-aktif/kodabc12/images/thumbs/knowapp3.jpg" /></a></li>
</ul>
</div>
<span>&Uuml;st&uuml;ne tıklayarak b&uuml;y&uuml;tebilirsin.</span></div>
</div>
<!-- The JavaScript -->   <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>

Bu yazı Tarık tarafından yazılmıştır.
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol