使用 FontAwesome 图标打开 prettyPhoto Gallery答案

【问题标题】：Open prettyPhoto Gallery with FontAwesome Icon使用 FontAwesome 图标打开 prettyPhoto Gallery
【发布时间】：2015-10-19 15:17:34
【问题描述】：

我一直在四处寻找，但找不到与我的问题相关的任何帖子，所以我决定在 Stackoverflow 上提问。我有这个简单的漂亮照片库，我需要通过灯箱中的 FontAwesome 图标打开它。有人可以帮我吗？

代码：

照片：

我在 PHP 中有一个 foreach 循环，它为各自画廊中的每个画廊呈现图像，在本例中为 pp_gal

foreach ($talent_photos as $image) {
    echo "<a href='{$image['url']}' rel='prettyPhoto[pp_gal]'><img src='{$image['url']}' width='{$image['width']}' height='{$image['height']}' alt='{$image['alt']}' /><br></a><br>";
}

图标：

这是图标的标记，通过它可以在灯箱中打开他们的画廊。

<a class="icon-btn lens-icon"><br>
    <img src="http://192.55a.myftpupload.com/wp-content/uploads/2015/10/lens.png" alt=""><br>
</a>

我希望我解释正确，如果我没有请告诉我..

谢谢..

【问题讨论】：

如果你想要一个很棒的字体图标来打开画廊，你为什么要使用 lens.png？

标签： javascript html lightbox prettyphoto

【解决方案1】：

在 prettyPhoto 插件页面上，没有插件方法的文档，因此最好的方法是在您的图库的第一个元素上触发点击事件。

所以在 fontAwesome 按钮上添加 prettyPhoto 库 id 例如：

<a class="icon-btn lens-icon" data-gallery="prettyPhotto[pp_gal]"><br>
    <img src="http://192.55a.myftpupload.com/wp-content/uploads/2015/10/lens.png" alt=""><br>
</a>

你可以从你的 JavaScript 中触发它：

$("[data-gallery]").click(function(){
    var galleryID = $(this).data("gallery");
    $("a[rel='"+galleryID+"']").eq(0).trigger("click");
});

【讨论】：