Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • July 17, 2016 at 11:38 am #661725
    kieslingerb

    Dear Enfold Team,

    I would like to link a hotspot (in an image) to the execution of a javascript function.

    For instance the following button declared in a Code Block
    <input type="button" onclick="VolumeSample.toggle();" value="Play/Pause"/>
    executes VolumeSample.toggle(), which plays/pauses a sound.
    The function is obviously defined in a .js file, and works.

    I would like a hotspot to be able to do the same when clicking on it. Is it possible?
    Thanks in advance?
    Best,

    Luis

    • This topic was modified 8 years, 4 months ago by kieslingerb.
    July 18, 2016 at 6:35 am #661852
    Rikard

    Hi Luis,

    I’m not sure if that would be possible but send us a temporary admin login and point out the page you are trying to do this on and we’ll have a look at it.

    Regards,
    Rikard

    July 18, 2016 at 8:35 am #661889
    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!

    July 18, 2016 at 2:50 pm #662012
    Yigit

    Hi,

    Would you mind posting us a screenshot/mockup of what you would like to achieve? You can upload the screenshot to imgur.com or dropbox and share the link here :)
    Using custom JS, it should be possible but we should understand the changes you would like to make clearly first

    Best regards,
    Yigit

    July 18, 2016 at 3:29 pm #662049
    kieslingerb

    Thanks 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 function VolumeSample.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.
    July 20, 2016 at 12:08 pm #662905
    kieslingerb

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

    July 21, 2016 at 4:25 am #663173
    Ismael

    Hi,

    Instead of modifying the core files, add an inline script using WordPress hooks. Example:

    // custom script
add_action( 'wp_footer', 'ava_custom_script' );
function ava_custom_script() {
	?>
	<script type="text/javascript">
	(function($) {
		$('.av-hotspot-container-inner-wrap .av-image-hotspot:nth-child(1)').on('click', function() {
			// do something here
		});
	})(jQuery);
	</script>
	<?php
}

    Best regards,
    Ismael

    July 25, 2016 at 2:41 pm #664663
    kieslingerb

    Thanks Ismael. It works!

    July 25, 2016 at 11:19 pm #664926
    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.

    July 27, 2016 at 4:43 am #665600
    Ismael

    Hi,

    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.

    If you want to apply this modification to a specific element, turn on the custom css class field so that you can add a unique class attribute to the element. http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    Best regards,
    Ismael

    September 3, 2016 at 9:38 pm #681697
    kieslingerb

    Dear 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 title

    if ( !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.
    September 4, 2016 at 6:02 pm #681822
    kieslingerb

    Ok, 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 6, 2016 at 4:50 am #682406
    Rikard

    Hi,

    Great, glad you got it working :-)

    Please let us know if you should need any further help on the topic.

    Regards,
    Rikard

    September 6, 2016 at 11:45 am #682539
    kieslingerb

    Thanks Rikard. Topic closed.

    September 7, 2016 at 7:25 am #683016
    Rikard

    Hi,

    Great, thanks for letting us know :-)

    Best regards,
    Rikard

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘image with hotspots, link to a javascript function’ is closed to new replies.