jquery.fancybox.js с jquery.tabSlideOut.v1.3.js

Question

ПОМОЩЬ!

Проблемы с запуском jquery.tabSlideOut.v1.3.js и fancybox. Они оба работают, но не вместе

Fancy коробка работает хорошо здесь с slideout ДИВ закомментирована http://www.3d-flightcases.co.uk/sk-test/index2.php

, но когда я добавить DIV для tabslideout в FancyBox «всплывают» не будет работать

http://www.3d-flightcases.co.uk/sk-test/index1.php

£ 50,00 любому, кто может решить эту проблему для меня :-)

Answer 1

Основная проблема заключается в том, что плагин tabSlideOut, кроме очень старых и не поддерживается дольше, не предлагает вариант обратного вызова, поэтому вы должны сами их настроить, чтобы инициализировать fancybox после инициализации tabSlideOut.

Вот некоторые инструкции для создания пользовательского обратного вызова для плагина tabSlideOut:

1). Измените js-файл tabSlideOut.

Посмотрите на эти строки в начале файла:

(function ($) { 
    $.fn.tabSlideOut = function (callerSettings) { 
     var settings = $.extend({ 
       tabHandle : '.handle', 
       ... etc. 
       onLoadSlideOut : false 
      }, callerSettings || {}); 

и добавить ваш вариант обратного вызова (fancyCallback в моем примере) после того, как последний вариант (onLoadSlideOut), как:

(function ($) { 
    $.fn.tabSlideOut = function (callerSettings) { 
     var settings = $.extend({ 
       tabHandle : '.handle', 
       ... etc. 
       onLoadSlideOut : false, //<= notice a comma here 
       fancyCallback : function() {} // new setting: custom fancybox callback by picssel.com 
     }, callerSettings || {}); 

2). Создайте функцию, которая будет возвращаемые fancyCallback вариант (. Добавленными выше)

Scroll до конца вашего JS-файл tabSlideOut и найти эти строки:

(function ($) { 
    $.fn.tabSlideOut = function (callerSettings) { 
     .... 
     .... etc. 
     if (settings.action === 'hover') { 
      hoverAction(); 
     } 
     if (settings.onLoadSlideOut) { 
      slideOutOnLoad(); 
     }; 
    }; // closes $.fn.tabSlideOut 
})(jQuery); 

и непосредственно перед фигурной скобкой, закрывающей $.fn.tabSlideOut функция, добавьте FancyBox обратного вызова, как:

(function ($) { 
    $.fn.tabSlideOut = function (callerSettings) { 
      .... 
      .... etc. 
     if (settings.action === 'hover') { 
      hoverAction(); 
     } 
     if (settings.onLoadSlideOut) { 
      slideOutOnLoad(); 
     }; 
     // fancybox callback init by picssel.com 
     // iterates through every fancybox selector to create a manual gallery 
     if (settings.fancyCallback) { 
      var fancygallery = []; 
      $(this).find(".fancybox").each(function (i) { 
       fancygallery[i] = { 
        href : this.href, 
        title : this.title 
       }; 
       $(this).click(function() { 
        $.fancybox(fancygallery, { 
         // fancybox API options here 
         index : i // this is important 
        }); 
        return false; 
       }); 
      }); 
     } /* END fancybox callback init by picssel.com */   
    }; // closes $.fn.tabSlideOut 
})(jQuery); 

3). Добавьте опцию fancyCallback к пользовательской инициализации tabSlideOut и установите его true как:

jQuery(document).ready(function ($) { 
    $('.slide-out-div').tabSlideOut({ 
     // API options 
     tabHandle : '.handle', //class of the element that will be your tab 
     ... etc. 
     onLoadSlideOut : true, //<= notice comma here 
     fancyCallback : true //<= initialize fancybox 
    }); 
}); 

См JSFIDDLE, который включает в себя функцию обратного вызова подгонянного tabSlideOut в.

ПРИМЕЧАНИЕ: Я использую fancybix v2.x в этой демонстрации, но он должен работать без проблем с v1.3.x, используя правильные опции API.