Main > Abyss | JavaScript > Shadowbox: Следующая картинка по клику

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

12.02.2012 4 comments » Views: 2,686

shadowboxjs

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

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

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

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();
  }
});

$(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();

}

});

Author: Vitaly Orlov | Rating: 4/5 | Tags: ShadowBox

4 comments.

Write a comment

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

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

Вот сюда.
Спасибо!
- Vitaliy Orlov Reply
  15.09.2013 в 8:05 am
  Привет! Я думаю вот так:
  $("#sb-body").click(function() { Shadowbox.next(); }).css('cursor', 'pointer');
Eugene Reply
25.02.2013 в 10:34 am
Спасибо Вам за статью.
А без модификации базовой библиотеки это можно как-то сделать?
- Vitaliy Orlov Reply
  25.02.2013 в 10:49 am
  Можно попробовать повесить событие через свой JavaScript, например так:
  document.getElementById('sb-body').onclick = function(){ Shadowbox.next(); }; или при помощи jQuery:
  
  $("#sb-body").click(function() { Shadowbox.next(); });

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

4 comments.

Leave a Reply Cancel reply