将共享按钮（如“addtoany”）添加到灯箱插件中的单个图像答案

【问题标题】：adding sharing buttons (like "addtoany") to a single image in lightbox plugin将共享按钮（如“addtoany”）添加到灯箱插件中的单个图像
【发布时间】：2016-06-18 08:45:19
【问题描述】：

我使用 bootstrap 在 wordpress 中开发了自己的主题。

我正在将灯箱用于图片库，并且我都试图在弹出窗口中打开的单个图像上添加共享按钮，都试图在使用 Jquery 时进行一些练习。

灯箱中的单张图片当然没有社交网络共享按钮的选项。

包含图片的div是要考虑的元素，然后是sn-p的代码。我试图这样做......

$sharingButtons = $("</div>");
$sharingButtons.css({top: 100, left: 20, 'absolute'});

$sharingButtons.addClass("");

$sharingButtons.appendTo( '.lb-outerContainer' );

$('lb-outerContainer').append("<div class='addtoany_share_save_container addtoany_content_bottom'><div style='line-height: 32px;' class='a2a_kit a2a_kit_size_32 addtoany_list a2a_target' id=''> )etc...  (here all the snippet code of addtoany)...

</div></div>");

 $('img.lb-outerContainer').css("opacity", "0.8");

元素 $sharingbuttons 是包含 sn-p...的 div...

它不起作用。谁有更好的想法？

我使用的是最新版本的 Jquery。

谢谢保罗 p.s.我必须使用吗 “Insert After”在 lb-outer container_ 旁边添加一个 div？你可以在这里查看我的网站 http://www.paolobergomi.it/new-gallery/indoor-portraits/

如果您单击图像，我希望在右侧，垂直布局..刚刚附加到图像，出现共享按钮列表我猜 insertAfter 可能是一个选项？感谢 EO 添加：我会这样开始吗？

$("

然后在新的div中添加addtoany的sn-p代码？有小费吗？谢谢

保罗

【问题讨论】：

$("
").insertAfter(".lb-outerContainer"); });可以吗？

标签： javascript jquery html twitter-bootstrap sharing

【解决方案1】：

添加 a2a div 代码后，您需要执行 a2a.init('page') 函数，因为 addtoany 脚本需要添加新代码。首先，插入一个类 a2a_target，一个 div 的 ID 并创建一个类似上面的 javascript 代码：

$('lb-outerContainer').append("<div class='addtoany_share_save_container addtoany_content_bottom'><div style='line-height: 32px;' class='a2a_kit a2a_kit_size_32 addtoany_list a2a_target' id='myShareLinks'> )etc...  (here all the snippet code of addtoany)...

a2a_config.target = '#myShareLinks';
a2a.init('page');

注意：a2a_config 和 a2a 是 addtoany 脚本创建的全局变量。

【讨论】：