Problems using LightBox and some other scripts

26 April, 2011

Using the library FullAjax can face the fact that other scripts (eg LightBox) refuse to work or its not working correctly. The reason these scripts from which refuse to work is very simple – they are not quite designed to works with AJAX.

How can fix it I try describe in a few lines below …

The main reason (but not only) in which some scripts refuse to work together with AJAX – is that they do not “see” when AJAX page loaded and ready for use. To fix this need to tell them yourself when the page is “ready”.

For this, after when the AJAX page loading finished need tell for scripts that page updated.
For this can use “load” event from FullAJAX (example for mootools fireEvent()):

FLAX.Html.onall('load', function(options){
	window.fireEvent('domready');
});

or use callback function:

function doSomethingAfterFAjxPagLoad (){
	window.fireEvent('domready');
};

To this function is triggered after when the AJAX page loading finished, in the basic configuration the FullAjax library need add option onload:doSomethingAfterFAjxPagLoad .
Example:

FLAX.Filter.add({url:'/', id:fullAjaxId,  onload:doSomethingAfterFAjxPagLoad}); 
.... 
function doSomethingAfterFAjxPagLoad (){
/* fix for mootools 'domready', uncomment if need*/
/*	window.fireEvent('domready'); */
};

When using window.fireEvent(‘domready’); you should be careful.
Firstly it helps only if the script really does not “see” when the page is “ready”.
Second, by joint use with other scripts that work with AJAX good – it can lead to additional undesirable errors such as double execution of the script. Therefore this function in the plugin by default commented out.

In some cases, you should use window.fireEvent(‘load’); – it all depends on the script that “refuses” to work.

If script (eg LightBox) need only on a certain page then the function from above to better execute on only this page, not on each page. This will prevent any additional errors.
Example for the page “Gallery” ( mysite.com/galery ):

1
2
3

if(location.toString().indexOf('/galery') != -1){
	window.fireEvent('domready'); 
}

To be continued, maybe … :)

Posted in FullAjax, How to Comments (91)
Tags: , , ,

91 Comments to “ Problems using LightBox and some other scripts ”

← Older Comments
Newer Comments →
  1. Thomas says:
    19.12.2011 at 13:29

    Hi,
    and thanks for that great plugin.

    Unfortunately i cant get it to work with Simple Image Gallery. The milkbox/Lightbox doesnt open anymore. Already tried hints from above on this page. But it wont do.

    Thanks for your help,

    Thomas

    Reply
    • Fedik says:
      19.12.2011 at 22:00

      these hints for mootools based scripts … for jQuery and others should be also something :)
      you need find how works gallery initialisation, and add the initialisation code in to a “doSomethingAfterFAjxPagLoad” function:

      function doSomethingAfterFAjxPagLoad (){
   // here is some code for gallery initialisation
};
      Reply
  2. André says:
    19.12.2011 at 22:57

    First of all thank you for this great plugin.
    My problem appears when I turn on in the joomla search engine friendly URLs.
    I get the error 303 See Other.
    How can I get a complete component, in this case JoomGallery exclude?
    I hope to find help here.

    Greetings from Germany

    Reply
  3. Thomas says:
    20.12.2011 at 13:10

    Thanks so much. I had to add
    milkbox = new Milkbox({ centered:true }); in “doSomethingAfterFAjxPagLoad”
    as well as loading milkbox.js manually (not by gallery plugin).

    It finally works. great job! Thanks Fedik!!!

    Reply
  4. André says:
    20.12.2011 at 21:16

    Hi Fedik, it is not your great plugin.
    This is a problem of the JoomGallery. Once the Joomla SEF is activated from the galley returns error 303. That seems to come from the router.php. If I do not get the point I’m going to use one other gallery. All other works fine. The only problem that remains for me, I get the slimbox not to run and have always in the URL: # ajx / How can I remove it?
    I have all tested here described, unfortunately without success.
    In any case thank you for your help and your great plugin.

    Reply
    • André says:
      20.12.2011 at 23:01

      Hier is a link to see it in action : http://wgf.stahlsite.de/
      It is only a testpage, but should go online soon on a other URL. SEF is activated for the time.
      The Joomla Version 1.5.23 an the the JoomGallery is Version 1.5.7.4

      greets André

      Reply
    • Fedik says:
      21.12.2011 at 16:53

      no, you cannot remove #ajx .. ‘#’ – need for fullajax works, but you can change text, in the plugin configuration find next

      SRAX.linkEqual['!ax!'+fullAjaxId+'!'] = ‘ajx’;

      and change ‘ajx’.

      Reply
  5. luke says:
    11.02.2012 at 12:39

    Hi Fedik! Many thanks for this awsome plugin :)

    I’ve got one problem with Simple Image Gallery plugin with FullAjax plugin enabled. If in article is gallery I can’t get into full text from blog view. Popup engine I’m using is Slimbox(mootols) also I have default Joomla simple URL’s running on my site and in plugin configuration enabled this piece of code:
    function doSomethingAfterFAjxPagLoad (){
    window.fireEvent('domready');
    };

    Please help. I’m not very familiar with ajax :(

    Reply
  6. Олег says:
    03.03.2012 at 13:48

    Пытаюсь настроить FullAjax с LightBox.
    Вписал в настройки
    FLAX.Filter.add({url:’/’, id:fullAjaxId, onload:doSomethingAfterFAjxPagLoad});
    …..
    function doSomethingAfterFAjxPagLoad () {
    window.fireEvent(‘domready’);
    };
    (Вернее оно уже было вписано, я просто раскомментировал)
    И оно никак не хочет работать. Может я что неправильно вписал. или надо в index.php шаблона что-то вписать.
    вписываю FLAX.Filter.add({url:’/folder-myimgs/’, type:’nowrap’}) картинка открывается прямо в окне без LightBox.
    Очень понравилась ваша библиотека. Хотелось бы использовать
    Помогите, пожалуйста!

    Reply
    • Fedik says:
      03.03.2012 at 21:50

      Який плагін для LightBox використовуєте?

      пс. Бібліотека насправді не моя, я лише зробив плагін ;)

      Reply
      • Олег says:
        04.03.2012 at 10:06

        JoomShopping, там стандартный LightBox, версия Joomla – 2.5
        canauto_точка_com.ua можно глянуть

      • Fedik says:
        04.03.2012 at 17:35

        для jquery.lightbox-0.5.pack можна спробувати ще так:
        додайте папку з зображеннями у фільтр :

        FLAX.Filter.add({url:['/img_products/'],  type:'nowrap'});

        а потім:

        function doSomethingAfterFAjxPagLoad () {
    jQuery("a.lightbox").lightBox({
                    imageLoading: "http://canauto.com.ua/components/com_jshopping/images/loading.gif",
                    imageBtnClose: "http://canauto.com.ua/components/com_jshopping/images/close.gif",
                    imageBtnPrev: "http://canauto.com.ua/components/com_jshopping/images/prev.gif",
                    imageBtnNext: "http://canauto.com.ua/components/com_jshopping/images/next.gif",
                    imageBlank: "http://canauto.com.ua/components/com_jshopping/images/blank.gif",
                    txtImage: "Изображение",
                    txtOf: "из"
                });
  window.fireEvent('domready');
};
      • Олег says:
        04.03.2012 at 11:36

        Попробовал установить FancyBox – то же самое.
        Зато заметил, если загрузить страницу первый раз – все хорошо работает, после навигации по страницам перестает

      • Fedik says:
        04.03.2012 at 13:56

        чесно кажучи навіть не знаю, що порадити, для FancyBox можна спробувати додати jQuery.fancybox.init();
        а initJSlightBox(); викликає лише помилку, так як функції не знайдено

      • Олег says:
        10.03.2012 at 17:09

        Поковыряв это дело, нашел решение. Оказывается Ваш плагин не подгружает javascript файлы. Подключив библиотеки jquery и fancybox в хедер шаблона (так чтобы они подгружались на всех страницах) и убрав оттуда, где им место, все начало отлично работать. Но я так понимаю, что это некорректный выход из ситуации. Можно ли будет этого избежать в следующей версии плагина?

      • Fedik says:
        10.03.2012 at 19:11

        FullAjax завантажує скрипт лише один раз та кешує його, далі використовується кеш…
        Проблема в тому, що кожне розширення галереї чи іншої подібної біди, має власну ініціалізацію – це просто не реально передбачити/відгадати/зробити універсальним.
        Єдиний шанс, це якщо в Joomla приймуть “standart for JavaScript initialisation in Joomla!”

  7. Gerix says:
    20.03.2012 at 09:53

    Hi. Great plugin. But I have some problems with vertical menu, I edit template index.php, after that it gets work. Only menu have some problems, pleease look.

    Reply
    • Fedik says:
      20.03.2012 at 11:40

      ‘Auto check’ for you menu not work because you have not default menu code, there need own script for it. If you know JavaScript try add class “active” by “click” event

      Reply
  8. Tom says:
    20.03.2012 at 12:37

    Hello

    Great extension – thank you!

    I will to use fullajax for a site. On this site i have a few modules (custom_mod) with image gallerys. i use Joomla! (2.5.3) JCE Shadowbox plugin. But it do not work. The pictures are open in a new browser window, not in a lightbox.

    i have read the instruction above, but it still do not work. I don’t understand it.

    Please help ;-)

    Tom

    Reply
    • Fedik says:
      22.03.2012 at 11:58

      you need find how init JCE Shadowbox, and put code for it in “doSomethingAfterFAjxPagLoad” function , as above ;)

      Reply
← Older Comments
Newer Comments →

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>