autodetection vs class="fancybox"

Home Forums Easy FancyBox Pro autodetection vs class="fancybox"

Tagged: 

This topic contains 10 replies, has 2 voices, and was last updated by  Klaus Visser 9 months ago.

  • Author
    Posts
  • #6865

    Klaus Visser
    Participant

    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

  • #6866

    RavanH
    Keymaster

    Hi Klaus, welcome on these forums.

    The missing arrows can be caused by an incompatible jQuery version. Or maybe the Auto gallery function is not working properly…

    Can you send me a link so I can take a closer look tomorrow? You can post it here or use the contact form on the contact page.

  • #6873

    RavanH
    Keymaster

    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 🙂

  • #6874

    Klaus Visser
    Participant

    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

  • #6875

    RavanH
    Keymaster

    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?

  • #6876

    Klaus Visser
    Participant

    Hi RavanH,

    thank you for your fast reply.
    The map code was generated using a web editor. And yes it was pasted directly into the WP editor’s text area. No plugin, no shortcode.

    Regards,
    Klaus

  • #6877

    Klaus Visser
    Participant

    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

  • #6897

    RavanH
    Keymaster

    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…

  • #6906

    Klaus Visser
    Participant

    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

  • #6930

    RavanH
    Keymaster

    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 🙂

  • #6950

    Klaus Visser
    Participant

    Hi RavanH,

    sorry for the delay.
    Its always better to have a solution than a workaround.
    So, please go ahead. I sent the credentials via contact form.

    Regards,

    Klaus

You must be logged in to reply to this topic.