当单击图像上的“按钮”时，Drupal 7 在颜色框中打开图像，否则转到内容

Posted 2023-02-26

【中文标题】当单击图像上的“按钮”时，Drupal 7 在颜色框中打开图像，否则转到内容

【英文标题】：Drupal 7 open image in colorbox when a "button" on the image is clicked, otherwise go to content

【发布时间】：2014-06-25 05:38:45

【问题描述】：

我正在使用 Drupal 7 和带有 Views 3 的 colorbox 模块。在我看来，我有一个图像字段。现在根据我的设置，当我单击图像时，它可以转到内容或在颜色框中打开图像本身。我想要实现的可能是在图像的右下角有一个按钮（或链接？），当单击此按钮时，图像会在颜色框中打开，如果单击图像本身，它会将您带到内容（节点页）。

我怎样才能做到这一点？

【参考方案1】：

1) 在您查看.. 从 FORMAT show 中选择：字段

2) 插入你想要的字段..在这个例子中我将添加图像、全局文本、颜色框触发器

3) 现在您将为选定的字段打开一个页面/覆盖页面

a) 在图像文件上，设置一个 将图像链接到内容，这会将您重定向到内容，如果您需要另一个页面或固定页面（不是内容）..etc，您可以更改重写结果 -> 选中将此字段输出为链接并设置链接或替换模式...

b) 在全局文本文件中刚刚设置了 Show Image，我们声明一个普通的 div 来设置自定义按钮

c) 现在颜色框触发器，您可以将触发器字段更改为全局文本或（您可以选择任何其他字段进行触发），并在 Popup 中为 [field_cms_image] 等图像设置替换模式

然后保存...

祝你好运

【讨论】：

谢谢。这真的很有帮助。但在这种情况下，按钮/链接保留在图像下方，在图像和其他字段之外的 div 中。如何将此按钮/链接移动到图像的右下角？考虑到图像的高度/宽度总是变化的事实。但是包含所有字段的 div 具有固定的高度/宽度。

不客气，我想你可以通过css来做到这一点，另一种方式是js，现在我想css，但首先你能告诉我用什么格式来打印结果吗？是一个表格、网格、列表……等等……关于我，我的大部分显示都使用了一个非常漂亮的显示 - 是一个响应式网格视图，它非常适合控制和显示数据..drupal.org/project/views_responsive_grid

我使用的是无格式列表。但我可以更改它，这并不重要，因为无论如何我每次视图都显示一个图像。

aha，如果那是真的，而且高度不同，对于每个图像..您可以使用 js，获取高度，并设置高度的边距顶部依赖性.. 问题在这里我看不到 css 快照的小提琴可以给你一个高度 *）我不能给你确切的真实方式，因为它可以通过多种方式解决..方式是：1）玩归档，隐藏和替换模式 2 ) css，使用相对于图像和绝对 3) 通过脚本对图像进行 git 高度，并更改图像对 btn 依赖的位置 .. 4) 克隆一个 btn div 并设置在同一个图像包装器中，然后删除一个原始的 ..