Что за скрипт такой (при наведении на картинке появляются кнопки соцсетей)?

Question

[weranda]

Приветствую.
Подскажите пожалуйста, есть ли в сети следующий скрипт? Суть скрипта: при наведении на картинке появляются кнопки социальных сетей для расшаривания материала (картинки). Скрипт, как я понял, парсит картинки в материале и добавляет им скрытые кнопки соцсетей, которые при наведении на картинку становятся видны.

Видел подобные скрипты в основном на wordpress сайтах, но так как не силен в WP и JS, не смог адаптировать их под другую CMS.

Пример на скриншоте:

Answer 1

[codingal]

А сам функционал реализуется очень просто: кнопки оборачиваются во враппер элемент, которому ставится display: none, а для картинки пишется img:hover + .social-wrapper { display: block } если кнопки идут после элемента.
Если нужно добавить кнопки к картинке, то картинке прописывается класс затем в jQuery один раз пишем див с кнопками и сохраняем в переменную socialIcons, затем
$('.image-class').parent().append(socialIcons);
Вот здесь пример реализации по вашим ссылкам www.hongkiat.com/blog/wp-content/plugins/monarch/j...

Comments

[weranda]

Дело в том, что страница наполняется контентом, к материалу добавляется, к примеру, 10 или 20 изображений и прописывать wrapper каждой картинке - не комильфо.

Примеры, где реализовано, нашел по быстрому:
www.walkswithme.net/social-share-icons-on-image-hover
https://blog.shareaholic.com/image-share-buttons/
www.hongkiat.com/blog/creating-custom-pattern-in-p...
www.socialmediaexaminer.com/shareable-images

[weranda]

Предполагаю, что картинки в статье парсятся автоматически и к ним добавляются кнопки, но как? Нашел подобные скрипты, заточенные только под WP.