-
Posts
-
Hi,
I have a little new project, live preview:
http://susanvinczeller.com/
Its not Enfold, but I would like to rebuild this site with Enfold! :)The only one function what I can not rebuild the jQuery Directional Hover effect on images. I found jquery but how can I use this script with Enfold ALB simple image element?
Demo
http://www.jqueryscript.net/demo/Mouse-Direction-aware-jQuery-Hover-Effect-Plugin-Directional-Hover/Best regards
PeterHey Peter,
Very interesting project.
First you need to enqueue the 3rd party js and css files using functions.
example functions
Then check the script documentation if it need to be initiated and then match the class names to the enfold gallery.
or
You can use a plugin like
https://wordpress.org/plugins/portfolio-gallery-master/
https://wordpress.org/plugins/hover-board-direction-aware-hover-effect/more plugins here > https://wordpress.org/plugins/search.php?q=directional+hover
Best regards,
VinayHi,
So…
1. Copy the jquery files to /enfold-child/directional-hover/…
2. Put this code to my enfold child function phpfunction directional_hover_scripts() { wp_enqueue_style( 'jquery.directional-hover', get_stylesheet_directory_uri() . '/directional-hover/src/jquery.directional-hover.css, array(), false, true ); wp_enqueue_script( 'jquery.directional-hover.min', get_stylesheet_directory_uri() . '/directional-hover/src/jquery.directional-hover.min.js', array(), false, true ); } add_action( 'wp_enqueue_scripts', 'directional_hover_scripts' );Is it good?
3. The script site just say this: Load the jQuery directional hover plugin after jQuery library. So I need the 2nd step, or enogh put this two line to header php?
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <script src="jquery.directional-hover.min.js"></script>4. After the load I should put this classes to ALB simple image element overlay effect…
<div class="dh-container"> <div class="dh-overlay"></div> </div>Best regards
PeterHi,
I will have to personally install this and check the code on my installation to see if this works or not and that would take some time.
I will keep you posted in the meantime if you figure this one out let us know.
Best regards,
VinayHi Vinay,
This is the Enfold version live demo
What do you think will the directional hover work?http://susanvinczeller.corewebstudio.net/
Best regards
PeterHi,
Sorry for the delay, The live version looks great. I have been a little tied up with helping others. I’ll let you know real soon about the script.
Best regards,
VinayHi,
Add the script files inside the main theme ‘enfold/css’ and ‘enfold/js’ folder.
To enqueue the 3rd party script files in wordpress please use the below code in child theme functions.php/* CSS files */ function dhover_styles() { wp_register_style( 'directional_hover', get_template_directory_uri() . '/css/jquery.directional-hover.css' ); wp_enqueue_style( 'directional_hover'); } add_action( 'wp_enqueue_scripts', 'dhover_styles'); /* JS files */ function dhover_js() { wp_register_script('directional_hover', get_template_directory_uri() . '/js/jquery.directional-hover.js', array('jquery'), true ); wp_enqueue_script('directional_hover'); } add_action('wp_enqueue_scripts', 'dhover_js'); // function to add dhover classes function dhover_func(){ ?> <script> jQuery(window).load(function(){ var imgContainer = jQuery('.avia-image-container'); imgContainer.find('.image-overlay').addClass('dh-container'); imgContainer.find('.image-overlay-inside').addClass('dh-overlay'); }); </script> <?php } add_action('wp_head', 'dhover_func');I have verified the above code in my installation and it loads the css and js script correctly and add’s the required class names to the themes default image overlay class. However the script don’t seem to work yet may be you need to go through the script documentation and check again where to include the css class names. It will take us more time to study the script documentation and integrate a 3rd party script to the theme and i’m sorry to say this is how far we can help you with integrating of a 3rd party script.
Thank you for your understanding, let us know if you have any questions.
Best regards,
VinayHi
Sorry for the delay… it’s work! :) Thank you!
Just this line missed: jQuery(‘.dh-container’).directionalHover();
And I changed the dh classes’ place./* CSS files */ function dhover_styles() { wp_register_style( 'directional_hover', get_template_directory_uri() . '/css/jquery.directional-hover.css' ); wp_enqueue_style( 'directional_hover'); } add_action( 'wp_enqueue_scripts', 'dhover_styles'); /* JS files */ function dhover_js() { wp_register_script('directional_hover', get_template_directory_uri() . '/js/jquery.directional-hover.js', array('jquery'), true ); wp_enqueue_script('directional_hover'); } add_action('wp_enqueue_scripts', 'dhover_js'); // function to add dhover classes function dhover_func(){ ?> <script> jQuery( document ).ready(function() { var imgContainer = jQuery('.avia-image-container'); imgContainer.find('.avia-image-container-inner').addClass('dh-container'); imgContainer.find('.av-image-caption-overlay-center').addClass('dh-overlay'); jQuery('.dh-container').directionalHover(); }); </script> <?php } add_action('wp_head', 'dhover_func');.dh-overlay { background: rgba(20,20,20,.4); width: 100%; height: 100%; text-align: center; line-height: 400px; }Best regards,
Peter
- The topic ‘jQuery Directional Hover on ALB's simple image element’ is closed to new replies.