Carousel Banner Conflict

On most pages the carousel banner displays fine.

sdar.com/index.php/about/organization

However on certain pages I load a javascript that allows image maps to adjust to the responsive image sizes as the pages are resized for smaller screens and mobile devices. On these pages there is a conflict with Carousel banner and it fails to display on these pages in particular.

sdar.com/index.php/about/government-affairs

I tried loading the js inline, and also as a module. I also tried loading the module last, but no matter how I load it, It still doesn't seem to load. Can anyone help? Any suggestions are greatly appreciated.
9 years 6 months ago #1 by Net Admin
The topic has been marked as resolved.
  • Posted by TemplatePlazza (5310) Offline
Hi, There is more than one jquery is loaded on this page sdar.com/index.php/about/government-affairs . And the other one is loaded at the body, so it will cause conflict with other jquery plugins those are loaded in the section just like carousel banner.
My suggestion is to remove this jquery call by the rwdImageMaps plugin
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
or you can use jqueryeasy plugin to fix it without touching the code.
9 years 6 months ago #2 by TemplatePlazza
The topic has been marked as resolved.
Hi,
Removing the code you suggested, does allow carousel banner to load however, the script that resizes the image maps also stops working.

I have installed jquery-easy as you have suggested, however I am not really familiar with jquery or how to resolve conflicts. I found this script online to resolve my responsive image map issue. Can you please take a look (with the credentials I provided earlier)? Any help is greatly appreciated.
9 years 6 months ago #3 by Net Admin
The topic has been marked as resolved.
  • Posted by TemplatePlazza (5310) Offline
I found this script near the rwdImagemapplugin,
<script>
$(document).ready(function(e) {
	$('img[usemap]').rwdImageMaps();
 
	$('area').on('click', function() {
		alert($(this).attr('alt') + ' clicked');
	});
});
</script>

can you try to change it to :
<script>
jQuery(document).ready(function(e) {
	jQuery('img[usemap]').rwdImageMaps();
 
	jQuery('area').on('click', function() {
		alert(jQuery(this).attr('alt') + ' clicked');
	});
});
</script>
9 years 6 months ago #4 by TemplatePlazza
The topic has been marked as resolved.
Thank you very much. This worked perfectly!
9 years 6 months ago #5 by Net Admin
The topic has been marked as resolved.
Powered by Kunena Forum