На одном из сайтов я применил удобный слайдер Smart Slider 3. Но нигде не нашел, как сделать увеличение картинок в слайдере при клике.
Перерыв весь интернет и не найдя ни одного решения такой задачи, как увеличение фото или картинки в слайдере при клике на нее, решил написать свой очень простой и минимальный код, который, я думаю, сможет добавить на свой сайт любой пользователь.
Итак, у вас есть Smart Slider 3 и уже созданные слайдеры на сайте. Но вы хотите, чтобы эти картинки увеличивались при клике. Увеличивать их красиво мы будем с помощью плагина Easy FancyBox. Установите его, если он еще у вас не установлен.
Откройте на редактирование файл, например header.php, расположенный в папке с темой вашего сайта: /wp-content/themes/название-вашей-темы/header.php и вставьте где-то после тега <body> такой код:
<script>
jQuery(function () {
jQuery('.n2-section-smartslider[data-ssid="N"]').click(function () {
slide_id = jQuery('#n2-ss-N .n2-ss-slide-active').attr("data-slide-public-id");
slide_src = jQuery('#n2-ss-N .n2-ss-slide-background[data-public-id='+slide_id+'] img').attr("src");
jQuery.fancybox({
'href' : slide_src
});
});
});
</script>
<style>
#n2-ss-N{
cursor: pointer;
}
</style>Вместо N нужно вставить номер слайдера, который вы можете видеть в админ-панели при редактировании — вверху рядом с названием слайдера написан его ID.
Всё. Для появления изменений на сайте, необходимо сделать минимальные изменения в слайдере и сохранить его — так обновится кэш и на сайте появятся изменения. Попробуйте кликать на фото, оно должно открываться в увеличенном виде. И так на каждом фото слайдера без ограничений.
Если вы хотите сделать зум для каждого слайдера — повторите код нужное кол-во раз, не забывая поменять ID для каждого слайдера. Если есть вопросы, пишите в комментариях, постараюсь ответить ).