Question

当点击缩略图时，我正在使用jquery在窗口中显示更大的图像。这方面效果很好。但是，我有一系列窗口，当我关闭一个窗口时，当我打开一个新窗口时，主图像不会加载。

我正在撰写此页面：http://ee.rouviere.com/web/portfolio

如果您点击任何一个缩略图图像，它会弹出一个窗口，您可以点击缩略图。当你关闭窗口时，jQuery清除值。但是，当您单击另一个缩略图时，主图像不会加载，直到您单击其中一个缩略图。

如何在窗口打开时加载主图像？

这是我正在使用的jQuery。我从这开始：

$("a:has(img.web-port)").click(function() {
    var largePath = $(this).attr("href");
    var caption = $(this).attr("title");
    $(".photo_large").attr({ src: largePath});
    $(".caption1").text(caption);
    return false;
});

非常适合触发更大的图像。但后来我添加了这个，因为最后一个主图像不会在我打开的下一个窗口中加载：

$("#fancybox-close").click(function(){
   $(".photo_large").attr({ src: ''});
   $(".caption1").text('');
});

我真的很感激这方面的一些帮助。经营者随时准备回应您的意见。

谢谢！

Answer 1

你的错误就是你可以选择所有元素whit class =“photo_large”的whit jQuery selector $（“。photo_large”）。所有这些都在页面中 - 甚至是隐藏的，这就是为什么当你打开打开主页面上的另一个缩略图时，你看到了旧的大像......简单。

您的解决方案也是错误的，因为当您关闭预览窗口时，您选择了所有元素$（“。photo_large”）并将其“src：”更改为零！

所以这是我的解决方案：

卸下：

$("#fancybox-close").click(function(){
   $(".photo_large").attr({ src: ''});
   $(".caption1").text('');
});

替换：

$(".photo_large").attr({ src: largePath});
$(".caption1").text(caption);

使用：

$(this).parent().parent().parent().prev().find(".photo_large").attr({ src: largePath});            
$(this).parent().parent().parent().next().find(".caption1").text(caption);

应该工作，如果我算父母的权利...... :) GBY！

Answer 2

您的问题是您使用.class选择器定位所有元素。它们应该与当前显示的.frame相对。

$("a:has(img.web-port)").click(function() {
    var largePath = $(this).attr("href");
    var caption = $(this).attr("title");
    var $frame = $(this).parents(".frame"); //get the current frame
    var $large = $frame.find(".photo_large"); //find the large photo within that frame
    $large.attr("src", largePath).show();
    $frame.find(".caption1").text(caption);
    return false;
});

$("#fancybox-close").click(function() {
    //Reset everything back to the initial state of the div.
    var $frame = $("#fancybox-content .frame");
    var $a = $frame.find(".thumb1 a").first(); //reset the frame to the first thumb a
    var $large = $frame.find(".photo_large");
    $large.attr("src", $a.attr("href"));
    $frame.find(".caption1").text($a.attr("title"));
});

处理jsfiddle。

的示例

Answer 3

如果不是清除来源，只需在关闭时隐藏图像，并在打开时再次显示该图像，该怎么办？

$("a:has(img.web-port)").click(function() {
    var largePath = $(this).attr("href");
    var caption = $(this).attr("title");
    $(".photo_large").attr({ src: largePath});
    $(".photo_large").show();  // <---------------------------LOOK HERE
    $(".caption1").text(caption);
    return false;
});

$("#fancybox-close").click(function(){
   $(".photo_large").hide();  // <---------------------------LOOK HERE
   $(".caption1").text('');
});

Answer 4

只需使用原生的fancybox方法即可。

<a id="exampleOne" title="title you want to pass" href="path to large image">
    <img alt="exampleOne" src="path to small image">
</a>

$(document).ready(function(){
   $("a#exampleOne").fancybox();
});

如何使用jQuery加载照片？

4 个答案: