From 1ca929c93f32af7d89425174aaf986dca6371f80 Mon Sep 17 00:00:00 2001 From: Steve Sutton Date: Mon, 14 Dec 2015 13:54:25 -0500 Subject: [PATCH] Update for jquery Adding plugin for jquery to do image map resizing for when the image scales down. --- functions.php | 7 +++++++ js/app.js | 7 ++++--- js/custom/pageSetup.js | 7 ++++--- js/jquery.rwdImageMaps.min.js | 11 +++++++++++ 4 files changed, 26 insertions(+), 6 deletions(-) create mode 100644 js/jquery.rwdImageMaps.min.js diff --git a/functions.php b/functions.php index 6f876db..75a3e4d 100644 --- a/functions.php +++ b/functions.php @@ -64,6 +64,13 @@ function glm_site_scripts() ); wp_enqueue_script('jquery'); wp_enqueue_script('jquery-ui-dialog'); + wp_enqueue_script( + 'rwsImageMap', + get_template_directory_uri() . '/js/jquery.rwdImageMaps.min.js', + 'jquery', + '1.0.1', + true + ); wp_enqueue_script( 'glm_foundation', get_template_directory_uri() . '/js/app.js', diff --git a/js/app.js b/js/app.js index c6ed9d0..7ed4e40 100644 --- a/js/app.js +++ b/js/app.js @@ -28,12 +28,13 @@ $(document).ready(function () { $(this).find('li.image-placeholder').remove(); } }); + $('img[usemap]').rwdImageMaps(); }); function showDialogBox(url) { $("#dialog-confirm").dialog({ - resizable: false, - width: 600, - height: 300, + resizable: true, + width: 360, + height: 450, modal: true, buttons: { "Follow offsite link": function() { diff --git a/js/custom/pageSetup.js b/js/custom/pageSetup.js index 02cd407..4410e85 100644 --- a/js/custom/pageSetup.js +++ b/js/custom/pageSetup.js @@ -19,12 +19,13 @@ $(document).ready(function () { $(this).find('li.image-placeholder').remove(); } }); + $('img[usemap]').rwdImageMaps(); }); function showDialogBox(url) { $("#dialog-confirm").dialog({ - resizable: false, - width: 600, - height: 300, + resizable: true, + width: 360, + height: 450, modal: true, buttons: { "Follow offsite link": function() { diff --git a/js/jquery.rwdImageMaps.min.js b/js/jquery.rwdImageMaps.min.js new file mode 100644 index 0000000..c97f0da --- /dev/null +++ b/js/jquery.rwdImageMaps.min.js @@ -0,0 +1,11 @@ +/* +* rwdImageMaps jQuery plugin v1.5 +* +* Allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size on load and window.resize +* +* Copyright (c) 2013 Matt Stow +* https://github.com/stowball/jQuery-rwdImageMaps +* http://mattstow.com +* Licensed under the MIT license +*/ +;(function(a){a.fn.rwdImageMaps=function(){var c=this;var b=function(){c.each(function(){if(typeof(a(this).attr("usemap"))=="undefined"){return}var e=this,d=a(e);a("").load(function(){var g="width",m="height",n=d.attr(g),j=d.attr(m);if(!n||!j){var o=new Image();o.src=d.attr("src");if(!n){n=o.width}if(!j){j=o.height}}var f=d.width()/100,k=d.height()/100,i=d.attr("usemap").replace("#",""),l="coords";a('map[name="'+i+'"]').find("area").each(function(){var r=a(this);if(!r.data(l)){r.data(l,r.attr(l))}var q=r.data(l).split(","),p=new Array(q.length);for(var h=0;h