Question

我正在构建一个有两种查看图像方式的照片库，第一种是鼠标悬停，以便显示工具提示预览图像，第二种是单击以将查看器带到预览图像的新页面有关图像的更多信息，就像你在iStock上的照片一样：http://www.istockphoto.com/stock-photo-2159036-hot-air-balloons.php

您可以在此处查看我的开发页面：http://ee.rouviere.com/%5Ehtml/photography/index.html

目前我正在使用fancybox，当您单击缩略图时，它可以很好地调出预览图像。但是，我想改变它，以便在鼠标悬停在缩略图上时出现。与此页面上的内容非常相似：http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/实际上，如果单击图像时会将您带到图像详细信息页面而不是仅在新窗口中加载图像，这将是完美的。

目前fancybox jQuery代码是这样的：

<script type="text/javascript">
jQuery(document).ready(function() {
    $("a.view-preview").fancybox({
        'titleShow'     : false,
        'transitionIn'  : 'elastic',
        'transitionOut' : 'elastic'
    });
});
</script>

我很感激我能得到的任何帮助。谢谢！

Answer 1

听起来你想要的是工具提示而不是灯箱（fancybox）。尝试使用工具提示插件，例如jQueryTools Tooltip。

更新：我更新了插件代码以使用以下HTML布局。当用户点击图片时，将#标记中的<a>替换为您要转到的页面。另外，这是一个demo。

<ul>
  <li>
    <a href="#">
      <img class="preview" src="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/1s.jpg" data-fullimg="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/1.jpg" data-caption="Lake and a mountain" alt="gallery thumbnail" />
    </a>
  </li>
  <li>
    <a href="#">
      <img class="preview" src="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/2s.jpg" data-fullimg="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/2.jpg" data-caption="Fly fishing" alt="gallery thumbnail" />
    </a>
  </li>
  <li>
    <a href="#">
      <img class="preview" src="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/3s.jpg" data-fullimg="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/3.jpg" data-caption="Autumn" alt="gallery thumbnail" />
    </a>
  </li>
  <li>
    <a href="#">
      <img class="preview" src="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/4s.jpg" data-fullimg="http://www.webinventif.fr/wp-content/uploads/projets/tooltip/02/4.jpg" data-caption="Skiing on a mountain" alt="gallery thumbnail" />
    </a>
  </li>
</ul>

这是更新的脚本：

/*
 * Image preview script
 * powered by jQuery (http://www.jquery.com)
 *
 * written by Alen Grakalic (http://cssglobe.com)
 *
 * for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
 *
 */

this.imagePreview = function(){
  /* CONFIG */

    xOffset = 10;
    yOffset = 30;

    // these 2 variable determine popup's distance from the cursor
    // you might want to adjust to get the right result

  /* END CONFIG */
  $("img.preview").hover(function(e){
    var t = $(this).attr('data-caption');
    var c = (t != "") ? "<br/>" + t : "";
    $("body").append("<p id='preview'><img src='"+ $(this).attr('data-fullimg') +"' alt='Image preview' />"+ c +"</p>");
    $("#preview")
      .css("top",(e.pageY - xOffset) + "px")
      .css("left",(e.pageX + yOffset) + "px")
      .fadeIn("fast");
  }, function(){
    $("#preview").remove();
  });
  $("img.preview").mousemove(function(e){
    $("#preview")
      .css("top",(e.pageY - xOffset) + "px")
      .css("left",(e.pageX + yOffset) + "px");
  });
};

// starting the script on page load
$(document).ready(function(){
  imagePreview();
});

如何让jQuery在mouseover上做一件事，在click上做另一件事？

1 个答案: