Question

基本上我有一个稍微非标准的FancyBox实现。默认情况下，您必须包含指向图像大版本的链接，以便Lightbox可以显示它。但是，在我的实现中，图像链接URL指向脚本而不是直接指向图像文件。例如，而不是：

<a href="mysite/images/myimage.jpg" rel="gallery">

我有：

<a href="mysite/photos/view/abc123" rel="gallery">

以上网址指向一个功能：

public function actionPhotos($view)
{
    $photo=Photo::model()->find('name=:name', array(':name'=>$view));

    if(!empty($photo))
    {           
        $this->renderPartial('_photo', array('photo'=>$photo, true));
    }
}

“$ this-＆gt; renderPartial（）”位只是调用一个布局文件，其中包含要输出的标准HTML标记。

现在，当用户点击缩略图时，将调用上述功能，并在灯箱中显示大图像。

现在，如果用户右键单击缩略图并选择“在新标签/窗口中打开”，则图像将按照正常情况在浏览器中显示，即仅显示图像。我想更改它，以便在布局中显示图像。

在上面的代码中，我可以包含以下内容并将其放在IF语句中：

$this->render('photos', array('photo'=>$photo));

这将调用布局文件“photos”，其中包含用于显示图像的布局。

我对此有一个特定的限制 - 图片网址必须保持不变，即网址中没有其他GET变量。但是，如果我们可以在后台传入一个GET变量，那就没问题。

我很可能需要更改上面的函数，以便为此功能调用另一个文件。

编辑：要准确证明我要做的事情，请查看以下内容：

http://www.starnow.co.uk/KimberleyMarren

转到照片标签并将鼠标悬停在缩略图上 - 记下网址。单击缩略图，它将在灯箱中打开。接下来右键单击相同的缩略图，然后选择“在新选项卡/新窗口中打开”。您会注意到图像现在以布局显示。因此，相同的URL用于在灯箱和自己的页面上显示图像。

StarNow做到这一点的方式是使用一些疯狂的长JavaScript功能，我不太热衷于复制。

Answer 1

html链接应指向默认情况下在新页面上显示图像的布局，例如：

<a href="mysite/images/show/123" rel="gallery">

在灯箱打开之前，将查询字符串附加到网址，以便将其与普通链接区分开来并加载灯箱的布局。只要图像加载到灯箱中，请将链接更改回其原始状态。

$("a[rel=gallery]").fancybox({
'onStart': function (selectedArray, selectedIndex, selectedOpts) {
    var el = $(selectedArray[selectedIndex]);
    el.attr('href', el.attr('href') + '?mode=lightbox');
},
'onComplete': function (currentArray, currentIndex, currentOpts) {
    var el = $(currentArray[currentIndex]);
    el.attr('href', el.attr('href').split("?")[0]);
}
});

然后，您必须处理以下链接才能返回灯箱布局：

<a href="mysite/images/show/123?mode=lightbox" rel="gallery">

Answer 2

您应该能够修改生成带有<img />标记的HTML的JavaScript函数，以将图像链接到此类页面。虽然，如果你试图让它选择“在新标签中打开图像”打开这样的页面，那么这可能是不可能的（除非有某种疯狂的cookie /会话实现在图像脚本之间交替传递一个图像并生成一个页面，我认为这是可能的）。只需修改JavaScript函数，就可以在单击“在新标签页中打开链接”时为链接指定新的href。

你能澄清一下你究竟想做什么吗？在新标签页中打开链接或在新标签页中打开图片？

修改：FancyBox脚本似乎正在更改链接的href以直接指向图片。您需要在脚本中找到使用rel="gallery"选择每个链接标记并将href替换为指向图像的位置;例如，如果你想让它保留为“mysite / photos / view / abc123”，你会希望它不会改变href。

Answer 3

如果您需要使用与您发布的演示网站相同的功能，那么这很容易实现，但请记住，该网站不会为弹出窗口和独立图像页面使用相同的URL。

点击Firebug控制台处于打开状态的任何缩略图，您会发现它正在发出Ajax请求以从不同的 URL获取图像！这是一个明显的行为。

http://www.starnow.co.uk/profile/PhotosTrackView.aspx?photo_id=2129864

链接指向：

http://www.starnow.co.uk/KimberleyMarren/photos/2129864/

如果JS禁用浏览或右键单击（如您所述）并使用JS覆盖链接默认行为（重定向到您），您会看到链接应指向正确的图像页面到图像页面）。

例如，您可以使用一种方法生成图像布局/页面，这应该用作href;并覆盖链接的click事件以调用类似的方法（使用ajax），但这次它将检索图像本身以在灯箱中使用它。

灯箱图片/链接网址

3 个答案: