0

我正在使用一个图像预览 jQuery 插件，恰当地命名为 imgPreview.js（由 James Padolsey 编写）。

我的插件运行良好，但是在尝试将一些 HTML 写入呈现的 Div 时遇到了困难。

该插件rel在添加到时以属性为目标<img />并呈现 URL。

我们的用途是用于汽车购物网站，其中的“工具提示”将显示汽车的更大图片。

我想修改实现以在“工具提示”中显示年份、品牌、型号和价格。大概使用jQuery.html()

HTML：

<ul>
   <li>
      <a href="#">
          <img src="http://www.web2carz.com/images/thumbs/22/80/thumb_large_70364184.jpg"
                         rel="http://www.web2carz.com/images/articles/201205/bmw_bike_seats_1335883115_600x275.jpg" />
       </a>
    </li>
</ul>

CSS：

#imgPreview {
    display:none;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    box-shadow:0px 3px 15px rgba(0, 0, 0, 1);
    padding: 15px 15px 30px;
    z-index: 5;
    border: 2px solid #D4D4D4;
    background: #1a1a1a; /* Old browsers */
    background: -moz-linear-gradient(top,  #1a1a1a 0%, #1a1a1a 24%, #5e5e5e 50%, #1a1a1a 78%, #1a1a1a 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1a1a1a), color-stop(24%,#1a1a1a), color-stop(50%,#5e5e5e), color-stop(78%,#1a1a1a), color-stop(100%,#1a1a1a)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #1a1a1a 0%,#1a1a1a 24%,#5e5e5e 50%,#1a1a1a 78%,#1a1a1a 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #1a1a1a 0%,#1a1a1a 24%,#5e5e5e 50%,#1a1a1a 78%,#1a1a1a 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #1a1a1a 0%,#1a1a1a 24%,#5e5e5e 50%,#1a1a1a 78%,#1a1a1a 100%); /* IE10+ */
    background: linear-gradient(top,  #1a1a1a 0%,#1a1a1a 24%,#5e5e5e 50%,#1a1a1a 78%,#1a1a1a 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a1a1a', endColorstr='#1a1a1a',GradientType=0 ); /* IE6-9 */
}
#imgPreview img {
    box-shadow:inset 0px 0px 10px rgba(0, 0, 0, 1);
    border:1px solid #555;
}
#imgPreview span {
    position:absolute;
    bottom:0px;
    left:0px;
    color:#fff;
}

JavaScript：

jQuery(document).ready(function() {
    // imgPreview
    jQuery('#photo_lot .leftCol .photos ul li img').imgPreview({
      srcAttr: 'rel',
      containerID: 'imgPreview',
      imgCSS: {
          // Limit preview size:
          height: 250
      },
      // When container is shown:
      onShow: function(link){
          // Animate link:
          jQuery(link).stop().animate({opacity:0.4});
          // Reset image:
          jQuery('img', this).stop().css({opacity:0});
      },
      // When image has loaded:
      onLoad: function(){
          // Animate image
          jQuery(this).animate({opacity:1}, 300);
      },
      // When container hides: 
      onHide: function(link){
          // Animate link:
          jQuery(link).stop().animate({opacity:1});
      }
    });
});

如果我将 onLoad 修改为：

// When image has loaded:
      onLoad: function(){
          // Animate image
          jQuery(this).animate({opacity:1}, 300);
          jQuery('#imgPreview').html("<span>Hello <b>World</b></span>");
      },

仅加载文本，覆盖图像。

我还设置了一个 jsfiddle，其中还添加了完整的插件代码：

http://jsfiddle.net/QjJ4G/3/

4

0 回答 0