Finally I found a WordPress plugin that works nicely alongside Awesome Flickr Gallery to add a “pretty zoom” to images posted as thumbnails that are not in slideshows on Flickr (which Awesome Flickr Gallery does an awesome job at). This new plugin I found is “Magic Zoom Plus” by MagicToolbox.com – love it!
UPDATE 7/2/2012 – it is now working – see below.
But, I am wrestling with something in trying to customize how it works for me. See, in order to apply the zoom effect from Magic Zoom Plus to the image, a class must be assigned to the image’s anchor. I have many old posts that I don’t want to revisit to add this class, so instead modified the header.php file to apply this class to the anchor, if it passes some tests.
I can successfully apply the class but unfortunately it is also carrying with it a display: inline-block, which removes the float property of the image. If the image is to float to the right in the text of the post (i.e. http://richiemadden.com/2012/06/grinding-coras-dinners/) this plug-in kills that float and it sits inline-block above the paragraph. Ugly.
I have now been able to fix that, forcing an inline display. However, now I have a different problem: two elements of the zoom box window (I don’t understand yet the verbiage of what this window really is called) are floating around at the original image location after this plugin moved it.
There is a hint and a zoom-area box that move around with the mouse to show the area that is being zoomed in the zoom-box window. I have tried to move them with the image but they do not. There must be something in the encrypted functions of the plugin code that is rewriting the location these should show at.
So, without modifying the code of the plugin, I am looking for a way to permanently hide these two elements (div’s): MagicZoomPup & MagicZoomPlusHint and I have asked the developers of the plugin if there is a way to turn this off. Hope it is an easy fix.
//Code to add MagicZoomPlus class to anchors with images in .entry-content div
$(document).ready(function(){
var anchors = document.getElementsByClassName("entry-content")[0].getElementsByTagName("a");
for(var i=0; i<anchors.length; i++){
if(!$(anchors[i]).hasClass('highslide')){
if($(anchors[i]).find('img').length>0){
if($(anchors[i]).children('img').hasClass('alignright')){
//has to be applied here, does not work in window.load()
$(anchors[i]).addClass('MagicZoomPlus');
}
}
}
}
});
$(window).load(function(){
var offset;
var imgLeft;
var $thisAnchor;
var anchors = document.getElementsByClassName("entry-content")[0].getElementsByTagName("a");
for(var i=0; i<anchors.length; i++){
if(!$(anchors[i]).hasClass('highslide')){
if($(anchors[i]).find('img').length>0){
if($(anchors[i]).children('img').hasClass('alignright')){
// has to be applied here, doesn't work in document.ready()
// applying 'inline' to overwrite the 'inline-block' so that it behaves and float to the right
$(anchors[i]).css("display","inline");
// now, in this anchor, set the position of the 2nd/3rd children to that of the image
// I don't know why the below four lines are not working for me.
$thisAnchor = $(anchors[i]);
offset = $thisAnchor.offset();
$thisAnchor.find(':nth-child(2)').offset({left: offset.left,top: offset.top});
$thisAnchor.find(':nth-child(3)').offset({left: offset.left,top: offset.top});
// so I hid them instead, but apparently they are set visible in the code of the plugin with a mouseover.
$("div.MagicZoomPup").hide();
$("div.MagicZoomPlusHint").hide();
// if I/we are unable to move the zoom pup and zoom plus hint to be with the image, is there a way to hide them permanently?
}
}
}
}
});
MagicZoomPlus.options = {
'zoom-width' : 400,
'zoom-height' : 400,
'zoom-position' : '#zoomwindow'
}
I have it working now. I had missed a setting in the plugin which support pointed out to me. There is a setting in the Miscellaneous section of settings “Class Name” with a default setting of “MagicZoomPlus” that can be changed to “All”. This will apply the MagicZoomPlus to every image in a post. This is good to fix the right-align problem I was originally having, but then breaks Awesome Flickr Gallery by applying the MagicZoomPlus class to the Awesome Flickr Gallery photos.
I updated the above code to remove the MagicZoomPlus class if it is found to have a child image with a class of “afg-img”. When it finds an anchor that meets this criteria, it also removes the class “MagicToolboxContainer” from the anchor’s parent element, the <div>, and then removes a child <span> which was creating a duplicate caption for the photos. Both of these awesome plug-ins are now playing nice with each other. Hope someone else finds this fix useful.
//Code to remove MagicZoomPlus from anchors with images of an AwesomeFlickrGallery
$(document).ready(function(){
var anchors = document.getElementsByClassName("entry-content")[0].getElementsByTagName("a");
for(var i=0; i<anchors.length; i++){
if(!$(anchors[i]).hasClass('highslide')){
if($(anchors[i]).find('img').length>0){
if($(anchors[i]).find('img').hasClass('afg-img')){
//has to be applied here, does not work in window.load()
$(anchors[i]).removeClass('MagicZoomPlus');
$(anchors[i]).parent().removeClass('MagicToolboxContainer');
$(anchors[i]).find('span').remove();
}
}
}
}
});
