Tagged: code blocks, hotspots
-
AuthorPosts
-
September 16, 2014 at 11:56 pm #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.September 17, 2014 at 7:15 am #320340Hi 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,
IsmaelSeptember 17, 2014 at 3:53 pm #320559This reply has been marked as private.September 17, 2014 at 3:55 pm #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.September 17, 2014 at 4:07 pm #320564Ismael, 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?
September 18, 2014 at 5:10 am #320865Hey!
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,
IsmaelSeptember 20, 2014 at 5:51 am #322195The 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.September 20, 2014 at 6:40 am #322199Hey!
Try enabling debug mode:
http://kriesi.at/documentation/enfold/enable-advanced-layout-builder-debug/Best regards,
JosueSeptember 25, 2014 at 9:37 pm #325280That 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?September 25, 2014 at 10:40 pm #325306Hi!
That’s not possible because the hotspots are set in percentage values, changing that to pixels would break its functionality.
Regards,
JosueOctober 14, 2014 at 9:35 am #335474Hi @akamaxbuz could you share how you rerouted the Hotspot links?
thanks :)
October 15, 2014 at 3:28 am #335880October 16, 2014 at 6:01 pm #336957This reply has been marked as private.October 17, 2014 at 6:50 am #337180October 17, 2014 at 2:16 pm #337328My 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();
October 19, 2014 at 9:07 am #337910Thank you very much! It works fine.
-
AuthorPosts
- The topic ‘Full Width Image with Hotspots and Legend’ is closed to new replies.