Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #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: http://69.195.124.250/~wpbforg/what-we-do/wpbf-gardens/ 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.

    #320340

    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,
    Ismael

    #320559
    This reply has been marked as private.
    #320560

    (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.

    #320564

    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?

    #320865

    Hey!

    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,
    Ismael

    #322195

    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.

    #322199

    Hey!

    Try enabling debug mode:
    http://kriesi.at/documentation/enfold/enable-advanced-layout-builder-debug/

    Best regards,
    Josue

    #325280

    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: http://69.195.124.250/~wpbforg/what-we-do/gardens/ 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?

    #325306

    Hi!

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

    Regards,
    Josue

    #335474

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

    thanks :)

    #335880

    Hey!

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

    Best regards,
    Ismael

    #336957
    This reply has been marked as private.
    #337180

    Hi!

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

    Cheers!
    Ismael

    #337328

    My coder @vileworks.com 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: http://kriesi.at/themes/enfold/shortcodes/images-with-hotspots/

    $=jQuery;
    $(‘.av-hotspot-fallback-tooltip’).hide();

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

    $(‘.av-image-hotspot’)
    .each(function(){
    $(this).on(‘click’,function(e) {
    var hotspot_number = $(this).index() + 2;
    $(‘.av-image-hotspot .av-image-hotspot_inner’).removeClass(‘active’);
    $(this).find(‘.av-image-hotspot_inner’).addClass(‘active’);
    $(‘.av-hotspot-fallback-tooltip’).hide();
    $(‘.av-hotspot-fallback-tooltip:nth-child(‘+hotspot_number+’)’)
    .slideDown(500);;
    $(‘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();

    #337910

    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.