WEB DİZAYN
Slider Galeri
Bizzat katalog internet sitesi yapan bir çok kişinin en zorlandığı olayların başında nasıl bir efekt vermesi gerektiğidir. Çünkü hem performansı hemde yapılan action'ın tatminkar olması gerekir. Daha önceden de belirttiğim gibi jQuery performans konusunda inanılmaz olduğu için istediğimizi gibi action'lar yapmamıza engel olmuyor.Slider Gallery bunlardan bir tanesidir. Kodları çok uzun olduğu için hepsini burada yazmayacağım fakat gerekli olanları belirteceğim.
HEAD kısmına eklenecek kodlar aşağıdaki gibidir;
< script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
< script src="js/cufon-yui.js" type="text/javascript">
< script src="js/GreyscaleBasic.font.js" type="text/javascript">
< script type="text/javascript">
Cufon.replace('h1,h2,.fp_close,.reference');
< link type="text/css" href="css/jquery.ui.theme.css" rel="stylesheet" />
< link type="text/css" href="css/jquery.ui.core.css" rel="stylesheet" />
< link type="text/css" href="css/jquery.ui.slider.css" rel="stylesheet" />
< link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
< style type="text/css">
span.reference{
font-family:Arial;
position:fixed;
left:10px;
bottom:10px;
font-size:13px;
}
span.reference a{
color:#fff;
margin-right:20px;
text-transform:uppercase;
}
span.reference a:hover{
border-bottom:1px solid #ddd;
}
< /style>
BODY kısmındaki kod çok uzun bir kod olacağından ben önemli yerleri sizlere göstereceğim örnekten indirip sadece resimlerin linkleri değiştirmeniz veya HEAD kısmındaki css leri değiştirmeniz yeteli olacaktır.
< div id="fp_thumbContainer">
< div id="fp_thumbScroller">
< div class="container">
< div class="content">
< div>< a href="#">< img src="images/album1/thumbs/1.jpg" alt="images/album1/1.jpg" class="thumb" />< /a>< /div>
< /div>
Yukarıda resimlerin nasıl ve hangi şekilde geleceği div'lerle belirtilmiş oradan çekilerek kullanmaktayız...
< div id="fp_scrollWrapper" class="fp_scrollWrapper">
< span id="fp_prev_thumb" class="fp_prev_thumb">< / span>
< div id="slider" class="slider">< / div>
< span id="fp_next_thumb" class="fp_next_thumb">< / span>
< /div>
< div id="fp_overlay" class="fp_overlay">< /div>
< div id="fp_loading" class="fp_loading">< /div>
< div id="fp_next" class="fp_next">< /div>
< div id="fp_prev" class="fp_prev">< /div>
< div id="fp_close" class="fp_close">Kapat< /div>
