How do you show the alternate image on hover using official Photo module? In this article I am showing how you will show the new image on hover with zoom effect. See the video for live effect
Creating Hover Image Fields into Settings From
Creating two new photo upload fields into Photo module’s settings form. Beaver builder have a filter “fl_builder_register_settings_form”. So you can easily customize the any module’s settings form without updating the core files of Beaver Builder plugin.
Open the functions.php file of your active theme and add this PHP snippets there.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
add_filter( 'fl_builder_register_settings_form', 'probb_photo_module_hover_image', 1015, 2 ); function probb_photo_module_hover_image( $form, $slug ) { //* Checking we are editing the photo module if( $slug == 'photo' ) { //* Excluding the default Photo field $arr = array_slice( $form['general']['sections']['general']['fields'], 0, 2, true ); $form['general']['sections']['general']['fields']['photo_source'] = array( 'type' => 'select', 'label' => __( 'Photo Source', 'fl-builder' ), 'default' => 'library', 'options' => array( 'library' => __( 'Media Library', 'fl-builder' ), 'url' => __( 'URL', 'fl-builder' ), ), 'toggle' => array( 'library' => array( 'fields' => array( 'photo', 'hover_img' ), ), 'url' => array( 'fields' => array( 'photo_url', 'caption', 'hover_img_url' ), ), ) ); //* Creating hover photo field $hover_img = array( 'hover_img' => array( 'type' => 'photo', 'label' => __( 'Hover Photo', 'fl-builder' ), 'show_remove' => true, 'preview' => array( 'type' => 'none', ), 'connections' => array( 'photo' ) ) ); //* Creating hover photo url field $hover_img_url = array( 'hover_img_url' => array( 'type' => 'text', 'label' => __( 'Hover Photo URL', 'fl-builder' ), 'placeholder' => __( 'http://www.example.com/my-photo.jpg', 'fl-builder' ), ) ); //* Appending the photo fields with existing photo module's settings form $form['general']['sections']['general']['fields'] = array_merge( $arr, $hover_img, $hover_img_url, $form['general']['sections']['general']['fields'] ); } return $form; } |
Rendering the Hover Image HTML
Rendering the hover photo inside the existing Photo module’s HTML. BB have a filter fl_builder_render_module_content. You can alter the HTML markup with this filter.
Open the functions.php of your active theme and add this PHP snippets
The rest of the content is available for Pro members. Click on the PAY NOW button to enable access to this content.
$10.00Pay Now
* Payment is non-refundable.
Paid members will be able to login below to see the restricted content.
Reviews
There are no reviews yet.