-
AuthorPosts
-
January 17, 2024 at 9:46 am #1430780
Hello dear Kriesi team,
First of all, your Enfold theme is truly fantastic.
Currently, I have a minor issue. On my source page, there is an SVG vector graphic introducing the team. When a word is clicked, a small window opens (also a graphic).
I’m referring to this section: https://prnt.sc/SZi5lGli4nhvSource page: https://www.hausderwertarbeit.de/agentur
Target page: https://wp.hausderwertarbeit.de/agentur
Is it possible to achieve this with the Enfold theme in WP? Or, in other words, does anyone have an idea on how to implement this in WP?
Thank you in advance to everyone…
Warm regards,
Patrick- This topic was modified 11 months ago by patrick_gilles.
January 17, 2024 at 12:36 pm #1431274Hi Patrick,
There’s nothing like that in the theme by default unfortunately, but the closest element would likely be the Image with hotspots element, if you would like to try that out.
Best regards,
RikardJanuary 18, 2024 at 4:38 pm #1431403Hey Rikard.
Great Idea. Will give it a try.
Patrick
January 19, 2024 at 8:53 am #1431450February 12, 2024 at 5:40 pm #1434095Hey Ismael,
is it possible to change the shape of that hotspots?
From circle to a box 100px, 50px?Patrick
February 13, 2024 at 8:08 am #1434145but on your target page you did not use the svg. there is only a png.
Try to place your svg code inside a codeblock element – give the codeblock element a custom class: wordcloud.
Then try to transfer those scripts to the enfold themeFebruary 13, 2024 at 10:29 am #1434164Hey Guenni,
I could simulate the image map with the hotspots elements. I played around with it a bit yesterday and was just wondering how I could make a rectangle from the circles of the hotspots, which I could then “push” to the right place in my png.
February 13, 2024 at 11:26 am #1434165as mentioned above : codeblock with your svg code inside and custom class: wordcloud
codeblock is important – because you need that svg as inline-svg – not as img
this is the function i only transfered to child-theme functions.php:
(in my case only for that example page (page id: 44324))function wordcloud_trigger_images() { if(is_page(44324)){ ?> <script type="text/javascript"> var wordcloud = document.getElementsByClassName('wordcloud')[0]; if (wordcloud) { var triggerword = document.querySelectorAll(".wordcloud g[id^='Trigger_']"); var wordgroups = document.querySelectorAll(".wordcloud g[id^='Box_']"); Array.from(triggerword).forEach(function (t) { t.addEventListener('click', function (e) { var triggerid = this.id; var triggertargetid = triggerid.replace('Trigger', 'Box'); Array.from(wordgroups).forEach(function (w) { w.classList.remove('is-visible'); }); document.getElementById(triggertargetid).classList.add('is-visible'); }); }); } </script> <?php } } add_action('wp_footer', 'wordcloud_trigger_images');
your svg code : https://pastebin.com/Sw5Nyr3m
the quick css:
.wordcloud { margin: 2rem auto; } .wordcloud svg { width: 100%; height: auto; } .wordcloud svg g[id^=Trigger_] { cursor: pointer; display: block; } .wordcloud svg g[id^=Box_] { opacity: 0; pointer-events: none; transition: all 0.2s; } .wordcloud svg g[id^=Box_].is-visible { opacity: 1; } .wordcloud path { pointer-events: none !important; }
see: https://webers-testseite.de/wertarbeit/
PS: one little error is on your svg code on “Durchblicker” it is the only trigger without a rect inside to have a clickable area – so you had to aim exactly the “letters” if the mouse is over a space – there is no pointer. – on my svg code on pastebin i added that missing rect.
February 13, 2024 at 5:47 pm #1434193There is an error-message at pastebin:
February 13, 2024 at 6:10 pm #1434195Wow..Guenni007!
That is really great. Thank you so much for that great work. It works really fine…. And also for bug fixing…
If it’s not too complicated, could you tell me how I can close the small boxes again as soon as the user has moved his mouse away from the open box?
Best regards,
Patrick
February 13, 2024 at 6:58 pm #1434198i just transfered your original code – and there is no such option.
i will look inside script – maybe we can add an option to remove that class: is-visible on scroll or on click outside
But i guess it would be best if there is a defined scroll distance to get rid of that class.But: you must have made a mistake – because look to your page in responsive view – and to mine example page.
my svg shrinks with all its content – on your page all boxes opens at once.did you insert the css code to quick css ?
Now you can see the new code on that example page: https://webers-testseite.de/wertarbeit/
it is looking if that box is in viewport – if not the box will not be visible – ( open a box and see what happens if you scroll that box )
February 14, 2024 at 9:16 am #1434259Good Morning,
Yes, I have already seen that my version contains an error. The interactive SVG had already worked as desired, but I had wanted to change something and then suddenly all the info boxes were open. It was just too late to correct my mistake, that’s why my version still looks so “wrong”.
I’ll fix it in the course of the week.Closing boxes:
Maybe it’s enough if the mouse pointer leaves the respective retancle, which makes the box invisible again?But I don’t want to steal your time either… you have already helped me so much (and even for free), for which I am very grateful.
And in general:
The community here at Kriesi.at is really great.February 14, 2024 at 9:45 am #1434260How would it be if the info field that appears on click disappears again after a certain time?
see example page.February 14, 2024 at 12:34 pm #1434292That would be absolutely enough
February 14, 2024 at 12:51 pm #1434294the code is on that example page ( ps: on hovering the code there is a copy button on top right)
and by the way – the css is inside a media query greater than 1600px – it has to be set globaly
February 15, 2024 at 5:52 pm #1434435Hi,
Thank you Guenni007 for your generous help and your example page, very cool. patrick_gilles it sounds like Guenni007 was able to help and there has been no comments for the last three days, so I’m wondering if we shall close this thread?
Guenni007 did you have anything else to add?Best regards,
MikeFebruary 15, 2024 at 7:43 pm #1434440no – and on his target-page all works now as expeted – so i think it is solved.
February 16, 2024 at 12:49 am #1434452 -
AuthorPosts
- You must be logged in to reply to this topic.