-
Posts
-
Hello
I have a page using tabs at the top to have the option to view 6 levels of floor plates, ie, 01, 02, 03, etc.
Using level 01 as my working example, the client wants one image with hotspots, eg, 1 BEDROOM image with hotspots that shows initially.
The client also wants to have the option to click on a text link, eg, 2 BEDROOMS, at which point the image with hotspots that shows the 2 BEDROOM units would show and the 1 BEDROOM image would be hidden. On some levels there will be up to 5 types of units (3 bds ,etc), so a simple on/off hidden /showing toggle wouldn’t work – only one image with hotspots would show. I gave each test image with hotspots here a class –
01-1bedroom
01-2bedroomsSo, I’d like 01-1bedroom to be visible, then hidden when the user clicks on the other links. Here’s an image of the idea.
http://dev.8888osler.com/images/comments.jpg
As you see I’ve put an accordion into the level 01 tab but I don’t know if it’s even possible to add in the image with hotspots there, but I think that the client will want it to look like the example as in the comments jpeg. Hope that is clear? :) thank you.
Hey webWahine,
Thank you for uisng Enfold.
Have you tried the tabs element? Put a tab element inside a tab section and then place different image with hotspot elements inside the tabs. Add a few css modifications to modify the style of the tabs element.
Best regards,
IsmaelHi Ismael
I did try to do that, ie, add a tab section, then a tab element inside but I can’t add an image with hotspots inside a tab – just a plain image. Is there some trickery to be able to get an image with hotspots in a tab? Thanks again.Hi,
Ah yes. My bad. I forgot about that. You can’t directly add the image hotspot shortcode inside the tabs so you have to generate them on a separate page and then extract the actual hmtl. Example.
<div class="av-hotspot-image-container avia_animate_when_almost_visible av-hotspot-numbered av-mobile-fallback-active avia-builder-el-2 avia-builder-el-no-sibling avia_start_animation avia_start_delayed_animation" itemprop="image" itemscope="itemscope" itemtype="https://schema.org/ImageObject"> <div class="av-hotspot-container"> <div class="av-hotspot-container-inner-cell"> <div class="av-hotspot-container-inner-wrap"> <div class="av-image-hotspot av-display-hotspot" data-avia-tooltip-position="top" data-avia-tooltip-alignment="left" data-avia-tooltip-class="av-tt-default-width av-tt-pos-above av-tt-align-left av-mobile-fallback-active main_color av-tt-hotspot" data-avia-tooltip="This is a tooltip." style="top: 52.3%; left: 29.6%; "> <div class="av-image-hotspot_inner" style=" ">1</div> <div class="av-image-hotspot-pulse"></div> </div> <img class="avia_image " src="HOTSPOT IMAGE URL HERE" alt="Test 3" title="b323e250748487.58da487d9a5e6" itemprop="thumbnailUrl"></div> </div> </div> <div class="av-hotspot-fallback-tooltip"> <div class="av-hotspot-fallback-tooltip-count">1 <div class="avia-arrow"></div> </div> <div class="av-hotspot-fallback-tooltip-inner clearfix"> This is a tooltip. </div> </div> </div>Best regards,
IsmaelOh, that seems too troublesome to be efficient, especially since there will be quite a few hotspots on several images. Perhaps you could make a note on the request area to be able to add images with hotspots into tabs? Thanks for your help. I’m going to try and come up with another option. What might work is using a fullwidth sub menu to replace the tab section, and then use a tabbed section which allows the use of images with hotspots.
on the moment there will be no other possibility to get this easy.
tab / tab / image with hotspot with shortcode nesting will not work
but
tab-section / tab / image with hotspot willsee here ( the only thing i made is via css the tab-titles on top not full width)
https://webers-testseite.de/nested-tabs/Ok, I see that you got it to works but did you do what Ismael said needs to happen to make it work? Inside tab there is no option to add an image with hotspots. thank you, again!
if you activate the debug mode you can see the enfold shortcodes generated down the layout window.
If you only pull one image with hotspots in it – configure everything you like – you can see the shortcode like this :[av_image_hotspot src='https://webers-testseite.de/wp-content/uploads/DSC5417-1030x616.jpg' attachment='30814' attachment_size='large' animation='no-animation' hotspot_layout='numbered' hotspot_tooltip_display='' hotspot_mobile='aviaTBhotspot_mobile' custom_class=''] [av_image_spot tooltip_pos='av-tt-pos-above av-tt-align-left' tooltip_width='av-tt-default-width' tooltip_style='main_color' link='' link_target='' hotspot_color='' custom_bg='' custom_font='' custom_pulse='' hotspot_pos='11,51.5'] Kirschblüte in Bonn - Friedrichstraße [/av_image_spot] [av_image_spot tooltip_pos='av-tt-pos-above av-tt-align-left' tooltip_width='av-tt-default-width' tooltip_style='main_color' link='' link_target='' hotspot_color='' custom_bg='' custom_font='' custom_pulse='' hotspot_pos='50,29.6'] Kirschblüte in Bonn - Friedrichstraße [/av_image_spot] [/av_image_hotspot]you can enter this in a tab text field (best on text editor not visual one) – these tabs you can pull in a tab of a tab-section
this is a diligence task – but it is possible !
( PS i tried to do it tab in a tab – but this messes up )Ok, so yes, just as Ismael said. I have lots of hotspots on several images so this isn’t a practical option, but thank you.
To clarify, to activate debug mode I need to add this in my functions.php?//set builder mode to debug
add_action(‘avia_builder_mode’, “builder_set_debug”);
function builder_set_debug()
{
return “debug”;
}Hi,
Yes, here are the full instructions: http://kriesi.at/documentation/enfold/enable-advanced-layout-builder-debug/
Best regards,
Rikard
- You must be logged in to reply to this topic.