Как сделать zoom на картинку с плагином Smart Slider 3 в WordPress — ВотЭто

На одном из сайтов я применил удобный слайдер 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 для каждого слайдера. Если есть вопросы, пишите в комментариях, постараюсь ответить ).

Оставьте комментарий Отменить ответ