1

The CMS I use (Liferay) is dependent on jQuery to do a lot of things.

When I recently added new functionality to our site through the use of fancybox, I find that this breaks all other jQuery functionality on the page. If I take out the initial jQuery library import I use for fancybox, the other functionality works, but fancybox does not. Here is the code in question:

<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

I've tried adding jQuery.noConflict(); to various parts of the code, but to no avail. I feel like this should be the correct solution, I'm just not sure exactly where to put it. Unless someone has a different possible solution, while keeping the fancybox functionality. I've been stuck on this awhile now, I'm kind of at a loss of what to try next.

Thanks in advance, Noah

EDIT: Here is a pastebin of the page source code: http://pastebin.com/NA5WKrMW#. Line 81 is where I'm trying my jQuery import for fancybox purposes.

Noah
  • 96
  • 1
  • 1
  • 9
  • So you are using fancybox 2 and latest jQuery for that? What jQuery version is the rest of your site using? – Dirk Lachowski Oct 17 '13 at 15:00
  • 1
    Yes, adding `.noConflict()` should help if you need to use multiple versions of jQuery - see http://stackoverflow.com/questions/1566595/can-i-use-multiple-versions-of-jquery-on-the-same-page. If you are still stuck after reading the help on that question, please add an example of your code that shows the problem you have. You can edit this question if you want to add more detail to support your question. – andyb Oct 17 '13 at 15:01
  • While you can have two different versions of jQuery, avoid it when you can. Fancybox 2 (v2.1.5 as today) may **not** need a different version of jQuery **if** you are already using (at least) jQuery v1.6.1+ in your site. Just make sure that you load fancybox after jQuery and your initialization uses `jQuery` instead of the dollar sign alias `$` to avoid other possible (common in several CMSs) conflicts. – JFK Oct 17 '13 at 17:29
  • Fancybox 2, the latest version. andyb, I think that solution is correct, but I'm not sure where I need to edit the '$' function call for it to work properly. Somewhere in one of fancybox's files, but where? – Noah Oct 17 '13 at 17:31

1 Answers1

1

You have to add the noConflict right after the script tag:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
    var jQuery_latest = $.noConflict(true);
</script>

EDIT:

Make sure you're initializing fancybox using the correct jQuery:

jQuery_latest(document).ready(function() {
    jQuery_latest(your_element_here).fancybox();
});
Todd
  • 1,674
  • 13
  • 13
  • I tried this solution, but it only made fancybox not work, and the other jquery elements work. I placed it immediately after, as you said, and after all my script imports. No go. Thanks for your reply. – Noah Oct 17 '13 at 17:25
  • How are you initializing fancybox? – Todd Oct 17 '13 at 17:27
  • As fancybox tells me to in its instructions found [here](http://fancyapps.com/fancybox/#instructions). – Noah Oct 17 '13 at 17:34
  • @Noah, see my edit. Make sure you are calling fancybox from the correct version of jQuery. – Todd Oct 17 '13 at 17:37
  • This is it! Thanks a ton. I think this was made much harder because of liferay, but that's a sob story for another day. THANK YOU! – Noah Oct 17 '13 at 17:39