Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
  • #320180

    Love the Full Width Image with Hotspots. Any suggestions on how to add a text box that would include a legend to the Hotspots? I tried it with some css here: on out development site. The image is a sketch for a map of parks and gardens. The legend would tell you which Number goes with which park. You can see the problems we will have.
    Is there anyway to get at the code for a page? Thanks.


    Hi akamaxbuz!

    Thank you for using Enfold.

    Looks like you figured it out. Using a text block beside the image hot spot is a good idea, you can also use the Code Block element.

    Best regards,

    This reply has been marked as private.

    (the Private box was checked on my first reply. This doesn’t need to be private.)
    Thanks for the quick reply, Ismael.
    What are code blocks? I did a search and came up nada.
    Is there a way to get at the code for a page or element?
    My solution goes wack if you resize the browser. I made the Legend in a text block below the full page Image with Hotspots.


    Ismael, I found the Code Block element. Hadn’t seen that before. Can you point me to any tutorials on how to use it, short codes, etc?



    There is no documentation specifically for the code block element because it works almost like the text block’s html mode but you’ll be able to add code wrappers with attributes. Going back to your problem, why not separate the Image hotspot and legend using columns?

    Best regards,


    The reason I don’t want to use columns is because I like the full width image with Hotspots. I want to maximize the space. This map has a lot of info.
    Is there some way to see the code that a Avia page is built with? Seems when I was working with an earlier version, if I switched to Default Editor, it showed me the code. But I think I read where that was discontinued. Though I may have that all wrong but I do remember seeing the code. The short code and wrappers.



    Try enabling debug mode:

    Best regards,


    That suggestion was great. We haven’t used it yet but good to know about. That is what I was looking for.
    Here is where we are now: My developer is rerouting the Hotspot links.
    But my question now is that when I put in the Hotspots, they snap to a grid. I can’t place them with precision. Can that be turned off or is that the way it is for now?



    That’s not possible because the hotspots are set in percentage values, changing that to pixels would break its functionality.



    Hi @akamaxbuz could you share how you rerouted the Hotspot links?

    thanks :)



    We’ll keep the thread open. Please wait for @akamaxbuz’s response.

    Best regards,

    This reply has been marked as private.


    We’ll close this thread. You can email each other.



    My coder wrote me:
    This is the jQuery code I’m using. You can try running (testing) this code on the Enfold demo page if you know how to use the javascript console in Chrome or Firefox:


    $(‘.av-hotspot-fallback-tooltip-count’).on(‘click’,function(e) {
    $(‘html,body’).animate({ scrollTop: $(‘#main’).offset().top },’slow’);

    $(this).on(‘click’,function(e) {
    var hotspot_number = $(this).index() + 2;
    $(‘.av-image-hotspot .av-image-hotspot_inner’).removeClass(‘active’);
    $(‘html,body’).animate({ scrollTop: $(‘.av-hotspot-fallback-tooltip:nth-child(‘+hotspot_number+’)’).offset().top – 100 },’slow’);
    .on(‘hover’,function(){ return false; });

    $(‘.av-hotspot-fallback-tooltip-inner p:empty’).remove();


    Thank you very much! It works fine.

Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘Full Width Image with Hotspots and Legend’ is closed to new replies.