0

我正在尝试为我在此处找到的网站使用图片库。我想向这个图库添加一个更多功能。我希望链接一个大图像，并在单击它时在代码中定义的新标签 URL 中打开。我在这里包含了完整的代码：

<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>

有什么帮助吗？谢谢。

4

1 回答 1

0

这应该可行，您所要做的就是为每个图像添加数据大属性，并在悬停时显示一个工具提示，其中包含大图像。

http://jsfiddle.net/DSjLk/

于 2012-09-30T22:57:25.380 回答