X

Shadowbox: Следующая картинка по клику

По-умолчанию shadowbox, при клике на картинку, ничего не делает. Для того чтобы перейти к следующей картинки из группы, нужно нажать маленькую стрелочку внизу, но это же неудобно..

Shadowbox - всплывающий просмоторщик картинок и видео, его оф. сайт тут: http://www.shadowbox-js.com

Предлагаю восстановить справедливость и сделать по-нормальному:

1. Открываем shadowbox.js в редакторе
2. Находим там:

<div id="sb-body">

3. Заменяем на

<div id="sb-body" >

Вот и все, теперь осталось перезагрузить страницу и попробовать в действии.

P.s. Если хотите чтобы при наведении мышки на картинку был не обычный указатель, а рука (как при наведении на ссылку), тогда добавляем в пункте 3 еще стили, получается:

<div id="sb-body" >

И не забывайте делать бэкапы!!! 🙂

--[добавлено 11.02.2016]--

Готовый код для тех кто использует Shadowbox JS плагин в WordPress:

$(function(){
  if ($("a[rel^='shadowbox']").length) {
    function runShadowBoxCatcher(){
        if (!$("#sb-body").length) {
            setTimeout(runShadowBoxCatcher, 1000);
        } else {
            $("#sb-body").click(function() {
                Shadowbox.next();
            }).css('cursor', 'pointer');
        }
    }
    runShadowBoxCatcher();
  }
});

Категории: JavaScript Бездна
Тэги: ShadowBox

Комментарии (4)

  • Здравствуте, а как дописать иконку руки к jQuery (Я чайник)

    $("#sb-body").click(function() {
    Shadowbox.next();
    });

    Вот сюда.
    Спасибо!

    • Привет! Я думаю вот так:

      $("#sb-body").click(function() {
      Shadowbox.next();
      }).css('cursor', 'pointer');

  • Спасибо Вам за статью.
    А без модификации базовой библиотеки это можно как-то сделать?

    • Можно попробовать повесить событие через свой JavaScript, например так:

      document.getElementById('sb-body').onclick = function(){ Shadowbox.next(); };

      или при помощи jQuery:


      $("#sb-body").click(function() {
      Shadowbox.next();
      });