0

I use this http://www.jacklmoore.com/colorbox/ colorbox. Ive uploaded the .css and jQuery .js and inserted the code with Source.

//LOAD JOOMLA SCRIPTS FIRST
<jdoc:include type="head" />

//LINK TO JS AND CSS AND JQUERY
<link rel="stylesheet" href="http://fonag.org.ec/colorbox/colorbox.css">
<script src="http://fonag.org.ec/colorbox/jquery.colorbox-min.js"></script>

This is how I try to invoce my colorbox.

//COLORBOX
jQuery(document).ready(function(){
jQuery(function(){
   jQuery("#dato_lb").colorbox({width:"100%", innerHeight:"100%", inline:true});
})(jQuery);
jQuery(function(){
   jQuery("#fuentes").colorbox({width:"50%", innerHeight:"50%", inline:true});
})(jQuery);
})(jQuery);

It works offline, on my computer, just perfect. But not in Joomla. Any ideas what I am doing wrong? Working with Joomla 2.5.19

Maccaroni
  • 19
  • 7
  • Are you sure you you've imported jQuery on your site? Are you getting any errors on your browser console? – Lodder Oct 21 '14 at 14:19
  • @Lodder I was wondering if it is a jQuery problem. Thats the link I use to import jQuery. How would I check weather it is imported or not? – Maccaroni Oct 21 '14 at 14:21
  • To import jQuery, read my [answer on another question](http://stackoverflow.com/questions/12471067/importing-jquery-into-joomla/12473933#12473933). To check if it's being imported, simply open your browser console (F12) and check inbetween the `` tags. – Lodder Oct 21 '14 at 14:24
  • @Lodder I included your `php` script in my code (at the very beginning of it, replacing your link to the template with the link to the jQuery stored from google). Pressing F12 tells me amongst other things this ``. Means, jQuery gets loaded from the template, right? – Maccaroni Oct 21 '14 at 14:40
  • That is correct, you need to remove that as it may cause conflicts when multiple versions are being imported. It's also an old version of jQuery – Lodder Oct 21 '14 at 14:43
  • @Lodder How would I remove that? If I remove that, wouldnt that mean that it will be removed for the whole website? – Maccaroni Oct 21 '14 at 14:53
  • Open the index.php file for your template, find the line of code that is importing jQuery, and replace it with my code. Please also update to Joomla 2.5.27 as you are currently 8 versions behind and since then, security issues have been fixed – Lodder Oct 21 '14 at 14:54
  • @Lodder there seems to be no jQuery loaden in the index.php of the template. I looked it through, did not find it. Tried a few searches with `jQuery` or `Google` or `.js` but thats the only think that comes up `...//www.google-analytics.com/analytics.js','ga');` – Maccaroni Oct 21 '14 at 15:07
  • Can you please provide a link to your website that has this colorbox on please? – Lodder Oct 21 '14 at 15:11
  • @Lodder sure. thanks for your help! Its here http://fonag.org.ec/inicio/material-didadico.html clicking on that lightbulp (bottom left) is supposed to open a lightbox as well as clicking on the vertical written text on the right side. – Maccaroni Oct 21 '14 at 15:16
  • Ok, you appear to have **5** versions of jQuery being imported, some of which the URL's are incorrect. My suggestion to get round this is install [jQuery Easy](http://extensions.joomla.org/extensions/core-enhancements/performance/jquery-scripts/18327). Install it, then enable it, then let me know and I will test again ;) – Lodder Oct 21 '14 at 15:29
  • @Lodder 5 Versions?! How did that happen? Qith that jQuery easy I assume I do not have to load the jQuery in my script (which I insert in the article) anymore, right? – Maccaroni Oct 21 '14 at 15:33
  • jQuery Easy will prevent all versions of jQuery being loaded and make sure only 1 is loaded. This is only for the jQuery library though, so you will still need to load the colobox.js file – Lodder Oct 21 '14 at 15:38
  • @Lodder that would have been too easy. I installed the plug in and removed the tags in my code which load the jQuery. The light still wont open... – Maccaroni Oct 21 '14 at 15:42
  • Ok, now in your colorbox script (first line), change `jQuery(document).ready(function(){` to `jQuery(document).ready(function($){` and in the jQuery Easy plugin option, make sure you have the `no conflict` option enabled – Lodder Oct 21 '14 at 15:46
  • @Lodder Sorry, but where can I enable the `noConflict mode`? Is that in the PlugIn or do I need to add a peace of code. Sorry, never worked witj `.js`, `jQuery` `Joomla` before. Got thrown into the cold water here... – Maccaroni Oct 21 '14 at 15:58
  • It's an option in the jQuery Easy settings, under the *Advanced* section – Lodder Oct 21 '14 at 15:59
  • @Lodder Alright. I saw that but was afraid to click anythgin cause it states "Expert users only" and I am definetely not one. Anyway, its set like this now http://postimg.org/image/s9hhux917/ . I added `jQuery.noConflict();` infront of my jQuery code (aswell as the `$`, as you suggested and as this site suggests http://api.jquery.com/jQuery.noConflict/). But still not working... Without that `jQuery.noConflict();` added it is not working neither. – Maccaroni Oct 21 '14 at 16:12
  • Also set **Fix Document Ready** >>> **Yes**. I looked at your HTML markup on your site and the jquery libraries are still there. Are you sure you enabled the plugin? – Lodder Oct 21 '14 at 16:22
  • @Lodder no, that did not the trick neither... – Maccaroni Oct 21 '14 at 16:27
  • Sorry for the long process. Now replace all your colorbox javascript with `jQuery(document).ready(function($){ $("#dato_lb").colorbox({width:"100%", innerHeight:"100%", inline:true}); $("#fuentes").colorbox({width:"50%", innerHeight:"50%", inline:true}); }); ` – Lodder Oct 21 '14 at 16:40
  • @Lodder No worries. I have to thank you that you stick with me here. Its not working though. I copied and pasted your code, tried it with and without the `jQuery.noConflict();` infront of it. I set the Fix Document Ready to Yes in the `Advanced Site options` (thats where the screen shot was taken). – Maccaroni Oct 21 '14 at 16:47
  • Ok, I wil look into it further when I'm back home – Lodder Oct 21 '14 at 16:54

0 Answers0