jquery 문제 - 갤러리 용 onclick

내 웹 사이트에 이미지 갤러리를 사용하려고하는데 here입니다. 이 갤러리에 하나 이상의 기능을 추가하고 싶습니다. 큰 이미지를 링크하고 코드에서 정의 된 새 탭 URL에서 열 때 클릭합니다. 나는 여기에 전체 코드를 포함했다 :jquery 문제 - 갤러리 용 onclick

<script type="text/javascript"> 
$(document).ready(function() 
{ 
/*Your ShineTime Welcome Image*/ 
var default_image = 'images/large/default.jpg'; 
var default_caption = 'Welcome to my portfolio'; 
/*Load The Default Image*/ 
loadPhoto(default_image, default_caption); 
function loadPhoto($url, $caption) 
{ 
    /*Image pre-loader*/ 
    showPreloader(); 
    var img = new Image(); 
    jQuery(img).load(function() 
    { 
     jQuery(img).hide(); 
     hidePreloader(); 
    }).attr({ "src": $url }); 
    $('#largephoto').css('background-image','url("' + $url + '")'); 
    $('#largephoto').data('caption', $caption); 
} 
/* When a thumbnail is clicked*/ 
$('.thumb_container').click(function() 
{ 
     var handler = $(this).find('.large_image'); 
     var newsrc = handler.attr('src'); 
     var newcaption = handler.attr('rel'); 
     loadPhoto(newsrc, newcaption); 
}); 
/*When the main photo is hovered over*/ 
$('#largephoto').hover(function() 
{ 
    var currentCaption = ($(this).data('caption')); 
    var largeCaption = $(this).find('#largecaption'); 
    largeCaption.stop(); 
    largeCaption.css('opacity','0.9'); 
    largeCaption.find('.captionContent').html(currentCaption); 
    largeCaption.fadeIn() 
    largeCaption.find('.captionShine').stop(); 
    largeCaption.find('.captionShine').css("background-position","-550px 0"); 
    largeCaption.find('.captionShine').animate({backgroundPosition: '550px 0'},700); 
    Cufon.replace('.captionContent'); 
}, 
function() 
{ 
    var largeCaption = $(this).find('#largecaption'); 
    largeCaption.find('.captionContent').html(''); 
    largeCaption.fadeOut(); 
}); 
/* When a thumbnail is hovered over*/ 
$('.thumb_container').hover(function() 
{ 
    $(this).find(".large_thumb").stop().animate({marginLeft:-7, marginTop:-7},200); 
    $(this).find(".large_thumb_shine").stop(); 
    $(this).find(".large_thumb_shine").css("background-position","-99px 0"); 
    $(this).find(".large_thumb_shine").animate({backgroundPosition: '99px 0'},700); 
}, function() 
{ 
    $(this).find(".large_thumb").stop().animate({marginLeft:0, marginTop:0},200); 
}); 
function showPreloader() 
{ 
    $('#loader').css('background-image','url("images/interface/loader.gif")'); 
} 
function hidePreloader() 
{ 
    $('#loader').css('background-image','url("")'); 
} 
    }); 

</script>

을 그리고이 같은 15 미리보기/사진이 있습니다

<div class="thumbnails"> 
    <br><br><br> 
    <!-- start entry--> 
    <div class="thumbnailimage"> 
     <div class="thumb_container"> 
      <div class="large_thumb"> 
       <img src="images/thumbnails/sample1.jpg" class="large_thumb_image" alt="thumb"> 
       <img alt="" src="images/large/sample1.jpg" class="large_image" rel="Image Sample"> 
       <div class="large_thumb_border"> </div> 
       <div class="large_thumb_shine"> </div> 
      </div> 
     </div> 
    </div> 
    <!-- end entry--> 
</div>

어떤 도움을? 감사.

출처

2012-09-30 Nikola Marković