SahraForumDizini

Genel Forum Sitesi
 
AnasayfaAnasayfa  SSSSSS  AramaArama  Kayıt OlKayıt Ol  Giriş yap  
Sayfayı FaceBook'ta Paylaş

Paylaş | 
 

 Slide Show

Aşağa gitmek 
YazarMesaj
Sahra
ForumSahraSiteSahibi
ForumSahraSiteSahibi
avatar

<b>Mesaj Sayısı</b> Mesaj Sayısı : 428
<b>Tecrübe</b> Tecrübe : 1091
<b>Rep Puanı</b> Rep Puanı : 29
<b>Kayıt Tarihi</b> Kayıt Tarihi : 07/07/11
<b>Yaş</b> Yaş : 26
<b>Nerden</b> Nerden : Bilmem
<b>Lakap</b> Lakap : gececi

MesajKonu: Slide Show   Çarş. 27 Tem. - 18:52:44

canlı onizleme icın : csdesk.com a girip kodunuzu yapıstırın


Kod:
 <link rel="stylesheet" href="http://www.cssaddons.com/uploads/goruntulenme/jQueryCoverFlip/css/jquery-ui-1.7.2.custom.css" type="text/css" media="all" /> <style type="text/css"> .ui-jcoverflip { position: relative; } .ui-jcoverflip--item { position: absolute; display: block; } /* Basic sample CSS */ #flip { height: 200px; width: 630px; margin-bottom: 50px; } #flip .ui-jcoverflip--title { position: absolute; bottom: -30px; width: 100%; text-align: center; color: #555; } #flip img { display: block; border: 0; outline: none; } #flip a { outline: none; } #wrapper { height: 300px; width: 630px; overflow: hidden; position: relative; } .ui-jcoverflip--item { cursor: pointer; } body { font-family: Arial, sans-serif; width: 630px; padding: 0; margin: 0; } ul, ul li { margin: 0; padding: 0; display: block; list-style-type: none; } #scrollbar { position: absolute; left: 20px; right: 20px; } </style> <script type="text/javascript" src="http://www.cssaddons.com/uploads/goruntulenme/jQueryCoverFlip/js/jquery-1.3.2.js"></script> <script type="text/javascript" src="http://www.cssaddons.com/uploads/goruntulenme/jQueryCoverFlip/js/jquery-ui-1.7.2.custom.js"></script> <script type="text/javascript" src="http://www.cssaddons.com/uploads/goruntulenme/jQueryCoverFlip/js/jquery.jcoverflip.js"></script> <script type="text/javascript"> jQuery( document ).ready( function(){ jQuery( '#flip' ).jcoverflip({ current: 2, beforeCss: function( el, container, offset ){ return [ $.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 210 - 110*offset + 20*offset )+'px', bottom: '20px' }, { } ), $.jcoverflip.animationElement( el.find( 'img' ), { width: Math.max(10,100-20*offset*offset) + 'px' }, {} ) ]; }, afterCss: function( el, container, offset ){ return [ $.jcoverflip.animationElement( el, { left: ( container.width( )/2 + 110 + 110*offset )+'px', bottom: '20px' }, { } ), $.jcoverflip.animationElement( el.find( 'img' ), { width: Math.max(10,100-20*offset*offset) + 'px' }, {} ) ]; }, currentCss: function( el, container ){ return [ $.jcoverflip.animationElement( el, { left: ( container.width( )/2 - 100 )+'px', bottom: 0 }, { } ), $.jcoverflip.animationElement( el.find( 'img' ), { width: '200px' }, { } ) ]; }, change: function(event, ui){ jQuery('#scrollbar').slider('value', ui.to*25); } }); jQuery('#scrollbar').slider({ value: 50, stop: function(event, ui) { if(event.originalEvent) { var newVal = Math.round(ui.value/25); jQuery( '#flip' ).jcoverflip( 'current', newVal ); jQuery('#scrollbar').slider('value', newVal*25); } } }); }); </script> </head> <body> <div id="wrapper"> <ul id="flip"> <li title="Resim 1" ><img src="http://www.cssaddons.com/uploads/goruntulenme/jQueryCoverFlip/images/1.png" _fcksavedurl="http://www.cssaddons.com/uploads/goruntulenme/jQueryCoverFlip/images/1.png" alt="" /></li> <li title="Resim 2" ><img src="http://www.cssaddons.com/uploads/goruntulenme/jQueryCoverFlip/images/2.png" _fcksavedurl="http://www.cssaddons.com/uploads/goruntulenme/jQueryCoverFlip/images/2.png" alt="" /></li> <li title="Resim 4" ><img src="http://www.cssaddons.com/uploads/goruntulenme/jQueryCoverFlip/images/5.png" _fcksavedurl="http://www.cssaddons.com/uploads/goruntulenme/jQueryCoverFlip/images/5.png" alt="" /></li> <li title="Resim 5" ><img src="http://www.cssaddons.com/uploads/goruntulenme/jQueryCoverFlip/images/4.png" _fcksavedurl="http://www.cssaddons.com/uploads/goruntulenme/jQueryCoverFlip/images/4.png" alt="" /></li> <li title="Resim 6" ><img src="http://www.cssaddons.com/uploads/goruntulenme/jQueryCoverFlip/images/3.png" _fcksavedurl="http://www.cssaddons.com/uploads/goruntulenme/jQueryCoverFlip/images/3.png" alt="" /></li> </ul> <div id="scrollbar"></div> </div>


[Linkleri görebilmek için üye olun veya giriş yapın.]
Sayfa başına dön Aşağa gitmek
http://sahra.forumdizini.com
 
Slide Show
Sayfa başına dön 
1 sayfadaki 1 sayfası

Bu forumun müsaadesi var:Bu forumdaki mesajlara cevap veremezsiniz
SahraForumDizini :: Webmaster :: Javascript - jQuery - Ajax-
Buraya geçin: