Question

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

我的插件工作得很好，但是当我尝试将一些HTML写入渲染的Div时，我已经碰壁了。

插件在添加到rel后会定位<img />属性并呈现网址。

我们的用途是购买汽车购物网站，其中提供了工具提示＆＃39;将展示更大的汽车图片。

我想修改实现以显示Year，Make，Model，＆amp;价格全部在＆＃39;工具提示中。大概使用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/

用imgPreview.js编写innerHTML

0 个答案: