- LightBox

LightBox

Lightbox kodu
Tasarım altına yapıştırın
Bu kodu Tasarımın altına mutlaka Ekleyin

Ekledikten sonra alttaki kodlardan herhangi birini sitenizde yeni bir sayfa açın ve içerisine koyun ve bitti...!

Önizlemeler

Ön izlemesi için tıklayın!

Kendinize bir fotograf galarisi oluşturmak için
yeni bir sayfa açın ve içerisine alttaki kodu ekleyin sayfada başka resim veya öge bulunmasın yoksa resimleriniz gözükmez.

<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" _fcksavedurl="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">   <img alt="" src="http://bilgilisite.abcz8.com/kayarsite/images/1.jpg" _fcksavedurl="http://bilgilisite.abcz8.com/kayarsite/images/1.jpg" /></div>  <div class="ps_next"> </div> <div class="ps_prev"> </div>  <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" _fcksavedurl="http://bilgilisite.abcz8.com/kayarsite/images/1.jpg">Image 1</a></li>     <li><a rel="http://bilgilisite.abcz8.com/kayarsite/images/thumbs/8.jpg" href="http://bilgilisite.abcz8.com/kayarsite/images/8.jpg" _fcksavedurl="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" _fcksavedurl="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" _fcksavedurl="http://bilgilisite.abcz8.com/kayarsite/images/10.jpg">Image 10</a></li>     <li class="ps_preview">     <div class="ps_preview_wrapper"></div>     </li> </ul> </div> </div> <div class="footer"><a href="/" _fcksavedurl="/">Ana Sayfaya geri don.</a> <a target="_blank" href="http://bs-aktif.tr.gg" _fcksavedurl="http://bs-aktif.tr.gg">bs-aktif 'e geri dön !</a></div>    <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>

Üzerine gelince Resim büyüsün

Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.

LightBox