Question

...或者至少它的感觉如何：）

我之前已经问过类似的Lightbox链接问题，但我不确定它们是否完全符合我的情况。我正在尝试设置它，以便Lightbox标题/标题中的链接打开完整大小的图像。换句话说，在我的页面上，我有一个缩略图，然后如果我点击它，它会打开一个细节（在Lightbox中），然后在Lightbox弹出窗口下方是一些文本，以及一个链接来查看更大的图像（理想情况下）作为灯箱弹出窗口。）我已阅读了许多其他线程并按照说明更改了＆lt;＆gt;对html值等等，我想我差不多了，但它不太合适。链接在我的代码中正确显示，当我将鼠标悬停在链接上时，我得到一个手指指针，但由于某些原因，当我点击它时没有任何反应。我可以右键单击并在新窗口中打开链接，这是有效的，但显然有些东西（在Lightbox代码中？）阻止它在页面上工作。

我想我想知道的是：

这可能吗？
相对简单（我没有使用Javascript / Jquery的经验......）
是否可以在灯箱弹出窗口中打开另一个灯箱弹出窗口？
是否有一个除Lightbox之外的选项（Colorbox？Slimbox？）

到目前为止，这是我的代码：

<a href="<?php echo dirname($image->url()); ?>/detail/<?php echo $image->name() ?>-detail.jpg" rel="lightbox[<?php echo $page->catalogue(); ?>]" title="&lt;a href='<?php echo dirname($image->url()); ?>/max/<?php echo $image->name() ?>-max.jpg' rel='lightbox'&gt;FULL SIZE&lt;/a&gt;"><img src="<?php echo $image->url() ?>" width="<?php echo $image->width() ?>" height="<?php echo $image->height() ?>" alt="<?php echo $image->name() ?>" /></a>

以下是输出方式的示例：

<div class="item" style="width: 194px; margin: 3%;">
    <a href="http://www.chrissvensson.info/ces85/content/035-035/detail/DSC_3335-detail.jpg" rel="lightbox[035]" title="&lt;a href='http://www.chrissvensson.info/ces85/content/035-035/max/DSC_3335-max.jpg' rel='lightbox'&gt;MAXIMUM&lt;/a&gt;"><img src="http://www.chrissvensson.info/ces85/content/035-035/DSC_3335.jpg" width="194" height="300" alt="DSC_3335" /></a></div>

为了澄清，我正在使用Lightbox 2.5.1（http://lokeshdhakar.com/projects/lightbox2/）

非常感谢您提供的任何帮助。如果以前已经回答过，我再次道歉......

Answer 1

如果没有发布更多代码，很难确切地说出你到目前为止所得到的内容，但我可以尝试通过几个你需要做的基础知识。

首先，大多数灯箱风格的插件都基于jQuery，这意味着你将在客户端运行一些javascript代码。

您的PHP将生成静态内容，可以设置所有内容，然后您需要运行jQuery插件，这将完成大量的魔术并将其转换为灯箱。由于你没有提到你正在使用哪个插件，我会选择fancybox，因为我认为它有很多不错的选择：http://fancybox.net/howto。我不会详细介绍所有无聊的设置细节，因为它们已经在网站上，但这里有两个最重要的部分：

您需要设置一个图像，由链接封装，如给出的示例。你的PHP应该动态生成它，类似于你已经完成的。

<a id="image_id" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>

在任何javascript之前，它只是图像的缩略图（image_small.jpg），它链接到完整大小的（image_big.jpg）

现在要使其真正起作用，您需要将javascript插件指向您刚刚创建的链接。

我建议你阅读一些基本的jQuery文档或教程，如this one，因为你会发现这个库真的很有用，但长话短说，要在jquery中通过id选择一个元素，你会使用这个：$('#image_id')。

当你加载插件时，你需要做的就是在这个链接上运行fancybox： $('#image_id').fancybox();

放置它的最佳位置是jQuery的$(document.ready(function(){/*your code in here*/})，这是在加载页面时调用的。

使用fancybox时，要在窗口打开时添加标题/标题，只需在您创建的caption="caption here"锚点中添加<a>属性即可。

关于灯箱弹出窗口中灯箱弹出窗口的问题，完全可能，但你必须做一些额外的javascript魔法。我的建议是考虑用户体验并找到替代方案（可能只是允许用户下载海量图像，或寻找允许你放大某些内容的插件），因为打开两个模态对话对用户来说听起来很混乱！

无论如何，希望这有帮助。

99％的方式让Lightbox标题链接工作......

1 个答案: