打开带有FontAwesome图标的pretypto画廊

Open prettyPhoto Gallery with FontAwesome Icon

本文关键字：pretypto 画廊 图标 FontAwesome      更新时间：2023-09-26

我一直在搜索周围，我找不到任何与我的问题相关的帖子，所以我决定在Stackoverflow上询问。我有这个简单的pre台风画廊，我需要通过一个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>
我希望我解释对了，如果没有，请让我知道。

谢谢. .

在pretypto插件页面上，没有关于插件方法的文档，所以最好的方法是在图库的第一个元素上触发单击事件。

那么在fontAwesome按钮上添加pretyphoto图库id eg:

<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");
});
相关文章：