We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 36933
    • 35 Posts
    I have been trying work out why Lightbox 2 (LB) would not work on my site and through a process of elimination it appears to be a conflict with something in the AjaxSearch (AS) snippet.

    When I remove AS then LB works fine, but with AS active the new image just loads in a normal browser window instead of the LB overlay.

    Has anyone had this problem and worked it out???

    I am not skilled on JS at all so I don’t know what is going on, but my hunch is that there is something in the mootools.js file which is loaded with the AS snippet that is causing an issue.

    I have read about another option to lightbox called slimbox which uses the mootools library, maybe this is the best solution .. but I am not sure if that will work either.

    can someone please shed some light on this for me.

    thanks
    Brad
      • 7231
      • 4,205 Posts
      Sounds like a JS conflict. I think that LightBox is Scriptaculous (?). Don’t know how to fix this, wait a bit, someone else may know the solution. I like to use jQuery based plugins since it has a handy noConflict mode.

      BTW - Are you testing while logged into the manager? Try it while logged out since QuickEdit adds another layer of JS libraries when it is active.
        [font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

        Something is happening here, but you don't know what it is.
        Do you, Mr. Jones? - [bob dylan]
        • 36933
        • 35 Posts
        Yes I am logged into Manager, but I never run quick edit anyway. As soon as I remove the AS snippet from the page LB works fine.

        LB does use the Scriptaculous library, which is what made me think it was a conflict with mootools. There is a lot of guess work in that conclusion though, as I know minimal about JS.

        Hopefully someone can help me out.
          • 5811
          • 1,717 Posts
          You are right the js conflict comes between the interaction between scriptaculous.js and mootools.js.
          Probably you already know that : Element.setWidth is not a function - lightbox.js (ligne 253)

          As setWidth is not a variable or function declared in AjaxSearch.js, this means that the conflict comes with mootools sad

          Upgrade your AjaxSearch version from 1.6 to version 1.8.1 . But I am pretty sure that the conflict remains. Take care between 1.6 and 1.8.1 AS folder has been renamed ajaxSearch instead of AjaxSearch.

          Otherwise 2 possible solutions :

          1/with AjaxSearch 1.6, If you use mootools only for AS, it could be interesting to set up a specific mootools package with the mootools functions required by AS.
          To understand the content of this package look at : http://icebeat.bitacoras.com/mootools/packito/. Use your-domain/assets/snippets/AjaxSearch/AjaxSearch.js as js file.
          Find hereafter this package for AjaxSearch with mootools1.11. Download this package, rename the txt extension by js extension and drop this file inside the AjaxSearch/js folder.
          Under the modx manager, replace the line 238 of the AS snippet template
           $jsMooTools = 'manager/media/script/mootools/mootools.js';
          by
          $jsMooTools = 'asssets/snippets/AjaxSearch/js/mootools1.11forAS.js';
          and try it. I am not sure that this solve your issue.

          2/ as suggested by dev_cw, the better way is probably to use the Jquery js library with the plugin lightbox

          http://www.balupton.com/sandbox/jquery_lightbox/
          http://leandrovieira.com/projects/jquery/lightbox/

          The version 1.8.1 of AS could run with Jquery. See : http://modxcms.com/forums/index.php/topic,32217.msg195788.html#msg195788

          In any case i strongly recommend you to upgrade from AS 1.6 to 1.8.1 AS 1.6 is a bit old release now wink
            • 36933
            • 35 Posts
            Coroico, thank you so much or your help.

            I used your modified js file with version 1.6 and it worked a treat, but then I was thinking about how you mentioned v 1.8 of AS was a recommended upgrade, so I upgraded, and went for the Jquery version of lightbox and it works fine.

            once again thanks for your time.

            Brad
              • 20014
              • 200 Posts
              sorry for bringing a dead thread back to life, but after an extensive search this is all I could come up with even before posting there was a message as follows:

              Warning: this topic has not been posted in for at least 45 days.
              Unless you’re sure you want to reply, please consider starting a new topic.

              but I am going to risk it:

              has anyone come up with a solution for this, because since I have only ever used the jquery version, I can’t get it took work without a serious conflict with ajax search where essentially ajax functionality is dropped on effected pages.

              I am on the latest version of evo with the latest version of ajaxsearch for evolution.

              the information from the dev may be a bit outdated for my situation and I am worried about inserting code for a version newer to the one he refers to.

              I have tried several solutions even using a no conflict call within the javasript, but since I am at lost with javascript, I can’t effectively apply it.

              on ie6 the lighbox script actually causes the ajax output window to appear (only a few pixels) blurring out (due to opacity settings) links which appear beneath the searchbox itself. on all other browsers, it simply doesn’t open the output window at all and redirects to the search landing page.

              the version of lightbox I am using, (the best in my opinion I and I have used the top three.) is 0.5 from Vieira Pinho at leandrovieira.com is there something I could add to the call which could help? I have also tried to use multiBox since it also uses mootools, but can’t get it going, even though I’ve used it a bit in static sites, that is something else entirely and has me scratching my head as well.
              <script type="text/javascript">
              $(function() {
              	$('a[@rel*=lightbox]').lightBox(); 
              });
              </script>