Forum Replies Created
-
AuthorPosts
-
September 6, 2016 at 11:45 am in reply to: image with hotspots, link to a javascript function #682539
Thanks Rikard. Topic closed.
September 4, 2016 at 6:02 pm in reply to: image with hotspots, link to a javascript function #681822Ok, I got it. I replaced the original “.av-class” by “.my-class”. Simple.
- This reply was modified 8 years, 2 months ago by kieslingerb.
September 3, 2016 at 9:38 pm in reply to: image with hotspots, link to a javascript function #681697Dear Ismael,
how to check for “Custom Css Class” in the plugin’s php code?
The only close thing I found (that works) is to check for the page titleif ( !is_page('Home') ) return; // Here rest of the code
that is, only if the page title is “Home” the rest of the code is executed.
How to check for the “customs css class” of the element?
Thanks,Luis
- This reply was modified 8 years, 2 months ago by kieslingerb.
Hi again, with the 2nd part (instead of starting a new post elsewhere).
I have been seriously digging in kriesi forum to solve the next one, but I have given up: web coding is a deep wide ocean, and I am just floating on the surface close to the shore.
Ok, I need to do the hotspot action BUT ONLY on a certain image with hotspots, NOT for all in the website. The same goes for an “icon” that works as a button that invokes a JS function onclick. But, how to do that individually, for a specific icon? Checking the ID, caption, etc.?!?
I really appreciate a few lines of code to keep digging in.Thanks Ismael. It works!
Dear Enfold Team,
I was checking the presence of “hotspot” in Enfold theme files and found it in image_hotspots.php, via_builder.css, shortcodes.css and avia-modal.js. It seems that such an addition will require quite quite a few changes. :(
On the other hand, given the “clickable” “button-like” nature of a hotspot, I believe that my suggestion is very reasonable (cannot be seen as “advanced”) as it would enhance the possibilities of such a beautiful WordPress theme.
Looking forward to your advice.
Best,
LuisThanks again!
It is not a problem to upload things. About the intended screenshot/mockup, it is pretty much what you find in Enfold’s “start-up” template Home page: the image of a laptop with several hotspots pointing out to different regions of the screen. The difference is the actions associated to every hotspot.
I uploaded a screenshot of what I can do now. You can see a small
Play/Pause
button on the bottom that I added with the Code Block as
<input type="button" onclick="VolumeSample.toggle();" value="Play/Pause"/>
I defined the JS functionVolumeSample.toggle
in another Code Block, which contains includes to JS files. When you press the button, a given audio is played/paused. It works. As I said, that is a simple example, but just for the sake of illustration. What is behind the JS function is related to WebAudio API, but it does not really matter much what (but in the future it is not going to be simply play an audio file).My goal would be the hotspot to do exactly what that small button does, that is, to execute said JS function when clicked upon.
- This reply was modified 8 years, 4 months ago by kieslingerb.
Thanks a lot!
At this point I am working only locally with MAMP for Mac.
I am modifying Enfold’s template for an start-up company. In the Home page there is an example of image with hotspots. As I said, I would like to make a hotspot to play a sound (later it should be fancier things related to the WebAudio API). That approach would save lots of time.
How can I go ahead? Thanks again!(A few months later) Thanks for the reply. It worked!
Thanks Basilis. My knowledge on Web programming is quite limited.
I pointed to the Web Audio examples as a good reference because I want to include some audio things. Not really important what.
As a very first step, I would like to have a button displayed like this
<input type="button" onclick="RhythmSample.play();" value="Play"/>
No problem. I embedded in the “Code block” and the button gets displayed.
However the function it calls is in an external JS file, that should be loaded as
<script src="js/rhythm-sample.js"></script>
And that’s when the problem starts because I do not how to upload external JS files in Enfold.
I decided to put the whole JS code wrapped with the <script> tag in the “Code Block” but it is not working, as pressing the button does not play music. Moreover, I would like to reuse the function somewhere else.
Please let me know if I was clear enough.
Thanks!
Luis -
AuthorPosts