0

...或者至少是这样的感觉:)

我知道以前有人问过类似的灯箱链接问题，但我不确定它们是否完全适用于我的情况。我正在尝试对其进行设置，以便灯箱标题/标题中的链接打开完整尺寸的图像。换句话说，在我的页面上，我有一个缩略图，然后如果我点击它，它会打开一个详细信息（在灯箱中），然后在灯箱弹出窗口下方会是一些文本，以及一个查看更大图像的链接（理想情况下）作为一个灯箱弹出窗口。）我已经阅读了一堆其他线程并按照说明将 <> 更改为 html 值等，我想我快到了，但它不是很有效。该链接在我的代码中正确显示，当我将鼠标悬停在链接上时，我得到一个手指指针，但由于某种原因，当我单击它时没有任何反应。我可以右键单击并在新窗口中打开链接，这有效，

我想我想知道的是：

  1. 这可能吗？
  2. 是不是比较简单（我没有 Javascript/Jquery 的经验……）
  3. 是否可以在灯箱弹出窗口中打开另一个灯箱弹出窗口中的链接？
  4. 除了 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/ )

非常感谢您提供的任何帮助。再次，如果之前已经回答过这个问题，我深表歉意……</p>

4

1 回答 1

0

如果不发布更多代码，很难准确地说出到目前为止你已经完成了什么，但我可以尝试了解你需要做的一些非常基础的事情。

首先，大多数灯箱样式插件都是基于 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>

image_small.jpg在任何 javascript 之前，它只是链接到全尺寸的图像 ( ) 的缩略图( image_big.jpg)

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

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

然后，您需要做的就是在插件加载时在此链接上运行 fancybox： $('#image_id').fancybox();

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

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

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

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

于 2013-04-08T18:38:47.560 回答