Главная > JavaScript | Бездна > Shadowbox: Следующая картинка по клику

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

12.02.2012 4 комментария » Просмотры: 1 932
 

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

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

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

<div id="sb-body">

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

<div id="sb-body" onclick="Shadowbox.next()">

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

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

<div id="sb-body" onclick="Shadowbox.next()" style="cursor:pointer">

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

--[добавлено 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();
  }
});

 

Автор: | Теги:

Важно

У нас заработал ФОРУМ. Все вопросы, которые не касаются статьи, а так же вопросы по конкретно вашему случаю нужно задавать и обсуждать именно там, в разделе "Помощь пользователям".

4 комментария

Написать свой
  1. Вячеслав Ответить
    15.09.2013 в 6:57 дп
    Здравствуте, а как дописать иконку руки к jQuery (Я чайник)

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

    Вот сюда.
    Спасибо!
    • Vitaliy Orlov
      Vitaliy Orlov Ответить
      15.09.2013 в 8:05 дп
      Привет! Я думаю вот так:

      $("#sb-body").click(function() {
      Shadowbox.next();
      }).css('cursor', 'pointer');
  2. Eugene Ответить
    25.02.2013 в 10:34 дп
    Спасибо Вам за статью.
    А без модификации базовой библиотеки это можно как-то сделать?
    • Vitaliy Orlov
      Vitaliy Orlov Ответить
      25.02.2013 в 10:49 дп
      Можно попробовать повесить событие через свой JavaScript, например так:

      document.getElementById('sb-body').onclick = function(){ Shadowbox.next(); };
      или при помощи jQuery:


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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Разрешены HTML-теги: <a>, <code>, <i>, <em>, <strong>, <b>, <u>, <strike>