Conflict JQuery script and CGGoogle2

[musicscore]

When I use CGGooglemap2 and a JQuery script on the same page, my JQuery script is not working.
Removing the CGGooglemaps2 tag and the JQuery script is working.

check at2.dev-infowebs.nl and hover over the images in News. They should zoom.

I tested with :

Internet Explorer : Not working
Google Chrome : Only working after Ctrl-F5. Not working after F5
Safari : Working

What can I do to make the JQuery script and CGGooglemap2 work in al browser correct.

Please help

[Rolf]

Just working on it at https://www.zeijen.nu/bezienswaardigheden

Code: Select all

< script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"></ script>
< script src="/lib/jquery/js/jquery-ui-1.10.4.custom.min.js" type="text/javascript"></ script>

Needs to be added in the HEAD area of the template, and not in the bottom of the template.

[musicscore]

Added your code as a replacement of the {cms_jquery} tag but without succes. The problem stays.

Looks like cggooglemaps2 adds the jquery module extra and destroying the working of the other Jquery plugin

[Rolf]

Link to the site?

[musicscore]

Is in my first post :

http://at2.dev-infowebs.nl

[musicscore]

Just discoverd.

When I add the cggooglemap2 tag before the jquery script, the script is working

Code: Select all

{CGGooglemap2}
<a class="zoomhover" href="#"><img src="uploads/images/thumbnail-1.jpg" alt="thumbnail" /></a>

When I add the cggooglemap2 after the script, the script is not working

Code: Select all

<a class="zoomhover" href="#"><img src="uploads/images/thumbnail-1.jpg" alt="thumbnail" /></a>
{CGGooglemap2}

Please help. Why is this happening ?

[velden]

Can you explain what is not working exactly?

Code: Select all

<a class="zoomhover" href="#"><img src="uploads/images/thumbnail-1.jpg" alt="thumbnail" /></a>

This is not a (jQuery) script.

[musicscore]

Velden,

Sorry, you right. My question is not complete.

I have this script in the head section of my template :

Code: Select all

<__script__ src="/scripts/hover.zoom.js"></__script>
<__script__>
    $(function() {
          $('.zoomhover').hoverZoom(); // Default
          $('#green').hoverZoom({
                overlayColor: '#90bd2e',
                zoom: 50
          });
    }); 
</__script>

In the attachment attached to my first message you find the jquery script.

If you want I can give you access to my test environment you can test en see what happens.

If you look here : http://v1122.dev-infowebs.nl you can see the script is working because I put the html code

Code: Select all

<a class="zoomhover" href="#"><img src="uploads/images/thumbnail-1.jpg" alt="thumbnail" /></a>

AFTER the cggooglemap2 module.
When I switch, so first the html code and then cggooglemap2, the jQuery script does not work anymore.

[musicscore]

I created my own JQuery script and now it's working. Looks like the problem was in the downloaded script.

Thanks for you answers and help.

[johnflan]

Just been suffering from this problem so picked up on the adding of {cms_jquery} into the head. It worked in a minimal template so guessed the .js in the footer must be interferring. Had a wodge of it so tried deleting line by line. Found that deleting <__script__ src="https://ajax.googleapis.com/ajax/libs/j ... "></__script> worked and the gallery, scroll to top, menus etc still work. Brilliant. Perhaps I should find out what the rest of the .js does!