Javascript 使用imgPreview.js编写innerHTML

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

我的插件工作得很好，但我在尝试将一些HTML写入呈现的Div时遇到了麻烦

该插件在添加到时以rel属性为目标，并呈现URL

我们使用的是一个汽车购物网站，“工具提示”将显示汽车的大图

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

HTML:

JavaScript:

#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;
}

如果我将onLoad修改为：

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});
      }
    });
});

仅加载文本，覆盖图像

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

---

如果你能试着摆脱原型/脚本化的东西，jquery无论如何会更好。@ThiefMaster是的，我同意，但我们是一个两人开发团队，我的老板/后端有点老派，拒绝放弃脚本化。总有一天。。。

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});
      }
    });
});

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