Kayar JS, Foto Galeri tasarımı...
Dikkat: Bu yayınlanan tasarım bana ait değildir. Yayınlama hakkı izinsiz alınamaz!Kod:
<div id="gazze" name="gazze" style="visibility:visible; position:absolute; left:0px; top:0px; z-index:2; background:#000000; width:100%; height:800%; text-align:center;">
<link rel="stylesheet" type="text/css" href="http://bilgilisite.abcz8.com/kayarsite/css/style.css" />
<div class="bg_image"><img alt="" src="http://bilgilisite.abcz8.com/kayarsite/images/bg.jpg" /></div>
<div id="loader" class="loader"> </div>
<div class="wrapper">
<h1> foto galerime hoşgeldiniz ! </h1>
<div id="ps_container" class="ps_container">
<div class="ps_image_wrapper"><!-- First initial image --> <img alt="" src="http://bilgilisite.abcz8.com/kayarsite/images/1.jpg" /></div>
<!-- Navigation items -->
<div class="ps_next"> </div>
<div class="ps_prev"> </div>
<!-- Dot list with thumbnail preview -->
<ul class="ps_nav">
<li class="selected"><a rel="http://bilgilisite.abcz8.com/kayarsite/images/thumbs/1.jpg" href="http://bilgilisite.abcz8.com/kayarsite/images/1.jpg">Image 1</a></li>
<li><a rel="http://bilgilisite.abcz8.com/kayarsite/images/thumbs/2.jpg" href="http://bilgilisite.abcz8.com/kayarsite/images/2.jpg">Image 2</a></li>
<li><a rel="http://bilgilisite.abcz8.com/kayarsite/images/thumbs/3.jpg" href="http://bilgilisite.abcz8.com/kayarsite/images/3.jpg">Image 3</a></li>
<li><a rel="http://bilgilisite.abcz8.com/kayarsite/images/thumbs/4.jpg" href="http://bilgilisite.abcz8.com/kayarsite/images/4.jpg">Image 4</a></li>
<li><a rel="http://bilgilisite.abcz8.com/kayarsite/images/thumbs/5.jpg" href="http://bilgilisite.abcz8.com/kayarsite/images/5.jpg">Image 5</a></li>
<li><a rel="http://bilgilisite.abcz8.com/kayarsite/images/thumbs/6.jpg" href="http://bilgilisite.abcz8.com/kayarsite/images/6.jpg">Image 6</a></li>
<li><a rel="http://bilgilisite.abcz8.com/kayarsite/images/thumbs/7.jpg" href="http://bilgilisite.abcz8.com/kayarsite/images/7.jpg">Image 7</a></li>
<li><a rel="http://bilgilisite.abcz8.com/kayarsite/images/thumbs/8.jpg" href="http://bilgilisite.abcz8.com/kayarsite/images/8.jpg">Image 8</a></li>
<li><a rel="http://bilgilisite.abcz8.com/kayarsite/images/thumbs/9.jpg" href="http://bilgilisite.abcz8.com/kayarsite/images/9.jpg">Image 9</a></li>
<li><a rel="http://bilgilisite.abcz8.com/kayarsite/images/thumbs/10.jpg" href="http://bilgilisite.abcz8.com/kayarsite/images/10.jpg">Image 10</a></li>
<li class="ps_preview">
<div class="ps_preview_wrapper"><!-- Thumbnail comes here --></div>
<!-- Little triangle --></li>
</ul>
</div>
</div>
<div class="footer"><a href="/">Ana Sayfaya geri don.</a> <a target="_blank" href="http://bs-aktif.tr.gg">bs-aktif 'e geri dön !</a></div>
<!-- The JavaScript --> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script> <script type="text/javascript">
/*
the images preload plugin
*/
(function($) {
$.fn.preload = function(options) {
var opts = $.extend({}, $.fn.preload.defaults, options),
o = $.meta ? $.extend({}, opts, this.data()) : opts;
return this.each(function() {
var $e = $(this),
t = $e.attr('rel'),
i = $e.attr('href'),
l = 0;
$('<img/>').load(function(i){
++l;
if(l==2) o.onComplete();
}).attr('src',i);
$('<img/>').load(function(i){
++l;
if(l==2) o.onComplete();
}).attr('src',t);
});
};
$.fn.preload.defaults = {
onComplete : function(){return false;}
};
})(jQuery);
</script> <script type="text/javascript">
$(function() {
//some elements..
var $ps_container = $('#ps_container'),
$ps_image_wrapper = $ps_container.find('.ps_image_wrapper'),
$ps_next = $ps_container.find('.ps_next'),
$ps_prev = $ps_container.find('.ps_prev'),
$ps_nav = $ps_container.find('.ps_nav'),
$tooltip = $ps_container.find('.ps_preview'),
$ps_preview_wrapper = $tooltip.find('.ps_preview_wrapper'),
$links = $ps_nav.children('li').not($tooltip),
total_images = $links.length,
currentHovered = -1,
current = 0,
$loader = $('#loader');
/*check if you are using a browser*/
var ie = false;
if ($.browser.msie) {
ie = true;//you are not!Anyway let's give it a try
}
if(!ie)
$tooltip.css({
opacity : 0
}).show();
/*first preload images (thumbs and large images)*/
var loaded = 0;
$links.each(function(i){
var $link = $(this);
$link.find('a').preload({
onComplete : function(){
++loaded;
if(loaded == total_images){
//all images preloaded,
//show ps_container and initialize events
$loader.hide();
$ps_container.show();
//when mouse enters the pages (the dots),
//show the tooltip,
//when mouse leaves hide the tooltip,
//clicking on one will display the respective image
$links.bind('mouseenter',showTooltip)
.bind('mouseleave',hideTooltip)
.bind('click',showImage);
//navigate through the images
$ps_next.bind('click',nextImage);
$ps_prev.bind('click',prevImage);
}
}
});
});
function showTooltip(){
var $link = $(this),
idx = $link.index(),
linkOuterWidth = $link.outerWidth(),
//this holds the left value for the next position
//of the tooltip
left = parseFloat(idx * linkOuterWidth) - $tooltip.width()/2 + linkOuterWidth/2,
//the thumb image source
$thumb = $link.find('a').attr('rel'),
imageLeft;
//if we are not hovering the current one
if(currentHovered != idx){
//check if we will animate left->right or right->left
if(currentHovered != -1){
if(currentHovered < idx){
imageLeft = 75;
}
else{
imageLeft = -75;
}
}
currentHovered = idx;
//the next thumb image to be shown in the tooltip
var $newImage = $('<img/>').css('left','0px')
.attr('src',$thumb);
//if theres more than 1 image
//(if we would move the mouse too fast it would probably happen)
//then remove the oldest one (:last)
if($ps_preview_wrapper.children().length > 1)
$ps_preview_wrapper.children(':last').remove();
//prepend the new image
$ps_preview_wrapper.prepend($newImage);
var $tooltip_imgs = $ps_preview_wrapper.children(),
tooltip_imgs_count = $tooltip_imgs.length;
//if theres 2 images on the tooltip
//animate the current one out, and the new one in
if(tooltip_imgs_count > 1){
$tooltip_imgs.eq(tooltip_imgs_count-1)
.stop()
.animate({
left:-imageLeft+'px'
},150,function(){
//remove the old one
$(this).remove();
});
$tooltip_imgs.eq(0)
.css('left',imageLeft + 'px')
.stop()
.animate({
left:'0px'
},150);
}
}
//if we are not using a "browser", we just show the tooltip,
//otherwise we fade it
//
if(ie)
$tooltip.css('left',left + 'px').show();
else
$tooltip.stop()
.animate({
left : left + 'px',
opacity : 1
},150);
}
function hideTooltip(){
//hide / fade out the tooltip
if(ie)
$tooltip.hide();
else
$tooltip.stop()
.animate({
opacity : 0
},150);
}
function showImage(e){
var $link = $(this),
idx = $link.index(),
$image = $link.find('a').attr('href'),
$currentImage = $ps_image_wrapper.find('img'),
currentImageWidth = $currentImage.width();
//if we click the current one return
if(current == idx) return false;
//add class selected to the current page / dot
$links.eq(current).removeClass('selected');
$link.addClass('selected');
//the new image element
var $newImage = $('<img/>').css('left',currentImageWidth + 'px')
.attr('src',$image);
//if the wrapper has more than one image, remove oldest
if($ps_image_wrapper.children().length > 1)
$ps_image_wrapper.children(':last').remove();
//prepend the new image
$ps_image_wrapper.prepend($newImage);
//the new image width.
//This will be the new width of the ps_image_wrapper
var newImageWidth = $newImage.width();
//check animation direction
if(current > idx){
$newImage.css('left',-newImageWidth + 'px');
currentImageWidth = -newImageWidth;
}
current = idx;
//animate the new width of the ps_image_wrapper
//(same like new image width)
$ps_image_wrapper.stop().animate({
width : newImageWidth + 'px'
},350);
//animate the new image in
$newImage.stop().animate({
left : '0px'
},350);
//animate the old image out
$currentImage.stop().animate({
left : -currentImageWidth + 'px'
},350);
e.preventDefault();
}
function nextImage(){
if(current < total_images){
$links.eq(current+1).trigger('click');
}
}
function prevImage(){
if(current > 0){
$links.eq(current-1).trigger('click');
}
}
});
</script></div>
<script LANGUAGE=JavaScript>
<!–
function gizle(){
document.getElementById("gazze").style.visibility="hidden";
}
window.setTimeout("gizle()",10000);
//–>
</script>Not: Alıntıdır.
Bugün: 13 | Klik: 16 | Buradasın: Kayar JS, Foto Galeri tasarımı... | İp: 3.17.77.122