- This topic has 10 replies, 2 voices, and was last updated 6 years, 9 months ago by
.
-
Posts
-
-
Howdy,
I use Easy Fancybox Pro with image maps.
When .jpg is set to autodetection, the image map links work perfectly. The image pops up showing the gallery navigation arrows.
Unfortunately the autodetection feature interferes with another lightbox plugin that I use. So I turned off autodetection and use class=”fancybox” in my image map links instead. The images pop up on clicking a hotspot, but the navigation arrows are missing now. It seems, as if .jpg autodetection and class=”fancybox” are not equivalent. Is there a way to get the navigation arrows back?Thanks in advance,
Klaus Visser
-
-
OK, I got the info by mail, thanks.
Disabling Auto-detect (by clearing the field) also disables the Autogallery function as these two are closely related. But you can force the gallery behavior by changing the current attribute “data-rel=” in each AREA tag to “rel=”…
You might need to remove each forward slash that now seems to follow each class=”fancybox” to make it valid.
As an example, the first tag would then look like:
<area coords="329, 52, 22" shape="circle" href="..." class="fancybox" rel="lightbox-gallery-uucG" title="">Hope that helps 🙂
-
Hi RavanH,
thanks for your suggestion.
I followed it, but unfortunately this makes no difference. To my (limited) knowledge, rel attributes within area tags are bound to a certain set of values ( http://www.w3schools.com/tags/att_area_rel.asp ), other values are ignored.
So, there doesn’t seem to be a simple solution. I think I will stick to single overlay pictures then.Regards,
Klaus
-
You are right about the limited set of allowed rel attributes, and also about the fact that other values are ignored. But that is about search engines and browsers. The FancyBox script can work with any rel value.
But maybe the problem is that in this case it concerns AREA tags instead of the usual A tags…
How did you generate the image map code? And did you paste the code directly in the page Text tab or are you using a plugin or shortcode?
-
-
RavanH,
I should give you some more information of what I did after I received your advice.
As I wrote the other day, I use another lightbox plugin (dFactory’s Responsive Lightbox) along with Easy Fancybox. This plugin adds automatically the data-rel attribute you saw in the page source to the area tags of the image map, irrespective of its settings. This might look ugly, but during page rendering these attributes are completely ignored.
I tested the following scenarios after I deleted the trailing slashes and keeping class=”fancybox”.
1. dFactory’s Responsive Lightbox activated, .jpg autodetection and All in one Gallery turned on in Easy Fancybox:
data-rel attributes added automatically, image map works perfectly (with gallery navigation arrows)
2. dFactory’s Responsive Lightbox actvated, .jpg autodetection turned on and All in one Gallery disabled in Easy Fancybox:
data-rel attributes added automatically, image map works with single images, no gallery navigation arrows
3. dFactory’s Responsive Lightbox actvated, .jpg autodetection disabled and All in one Gallery enabled in Easy Fancybox:
data-rel attributes added automatically, image map works with single images, no gallery navigation arrows
The same settings tested with rel=”lightbox-gallery” added to the area tags gave the same results.
4. dFactory’s Responsive Lightbox deactivated, .jpg autodetection enabled and All in one Gallery enabled in Easy Fancybox:
data-rel attributes not added, image map works perfectly (with gallery navigation arrows)
5. dFactory’s Responsive Lightbox deactivated, .jpg autodetection turned on and All in one Gallery disabled in Easy Fancybox:
data-rel attributes not added, image map works with single images, no gallery navigation arrows
6. dFactory’s Responsive Lightbox deactvated, .jpg autodetection disabled and All in one Gallery enabled in Easy Fancybox:
data-rel attributes not added, image map works with single images, no gallery navigation arrows
The same settings tested with rel=”lightbox-gallery” added to the area tags gave the same results.To make a long story short: images of image maps in an overlay are only shown with gallery navigation arrows when Autodetection is enabled as well as Autogallery. All rel attributes are ignored during page rendering.
So I finally found a workaround, not a solution however.
I converted the images to .jpeg, turned on Autodetection with .jpeg and Autogallery and, alas, it worked without conflicting with Responsive Lightbox, as all other images on my site are .jpg files.
But, of course, a clean solution would be much better.Regards,
Klaus -
All rel attributes are ignored during page rendering.
This surprises me. Normally, tt should not ignore rel attributes. Maybe this is a conflict between the two light box plugins…
I usually advise against using multiple light bow scripts at the same time. Is there a particular reason why you need both?
In any case, your JPEG work-around is a very inventive one! Another approach could have been to set the “Auto gallery” option to “Media links in Section(s) only” and then define “map” in the Section(s) field…
-
RavanH,
“This surprises me. Normally, tt should not ignore rel attributes. Maybe this is a conflict between the two light box plugins…”
But this is what I found after intensive testing. I don’t believe this is due to a conflict between the two lightbox scripts. As you can see from my last post, this also happens if one the lightbox plugins is deactivated. Scripts of deactivated plugins are not loaded, or am I wrong?
This does not mean however that there could not be a conflict with some other plugin, as I use quite a few on my site. One is Responsive Image Maps which makes image maps mobile ready. I deactivated it, but no difference. I am not going to dive further into plugin conflict searching, because I have an easy to use workaround now for my problem.“I usually advise against using multiple light bow scripts at the same time. Is there a particular reason why you need both?”
I agree. But in this special case using only Easy Fancybox and deactivating or deleting dFactory’s Responsive Lightbox is not an option, as the latter is optimized for mobile devices. I use it together with its add-on PhotoSwipe (nomen est omen). And deleting Easy Fancybox is not an option either. Its the only lightbox plugin I found that can handle image maps and pdf files in an overlay out of the box.“Another approach could have been to set the “Auto gallery” option to “Media links in Section(s) only” and then define “map” in the Section(s) field… ”
I tried this, but without success. I couldn’t define ‘map’ as a section. I tried to use all the settings you mentioned on the settings page of Easy Fancybox. As the image map is wrapped by a div class “content-entry”, I tried to make this a section. Again, no success. This could of course be due to my limited skills. Maybe you could give me some more specific information or hints?
But you can also close this thread. I have a working ‘solution’.
Thank you for the time you spent, I appreciate it.Klaus
-
I tried this, but without success. I couldn’t define ‘map’ as a section. I tried to use all the settings you mentioned on the settings page of Easy Fancybox. As the image map is wrapped by a div class “content-entry”, I tried to make this a section. Again, no success.
There seems to be something strange going on still. Or at least, I cannot explain it without testing. I can take a closer look but I’d need admin acces too to try out different settings and compare results. So if you like me to do that, please send me login info again (the old info is no longer valid, it seems) but if it works OK for you like it is now, we can leave it as it is, of course 🙂
-
-
- You must be logged in to reply to this topic.