Hitet logo
  • Home
  • WordPress
    • WordPress Plugins
    • WordPress Themes
  • SEO
  • VPS
  • Hosting
  • Mac OS
  • Windows
  • IOS / iPhone
No Result
View All Result
Get Started
Hitet logo
  • Home
  • WordPress
    • WordPress Plugins
    • WordPress Themes
  • SEO
  • VPS
  • Hosting
  • Mac OS
  • Windows
  • IOS / iPhone
No Result
View All Result
hitet logo
No Result
View All Result
Home Wordpress

On hover woocommerce product thumbnail change flickity gallery flatsome theme

admin by admin
March 28, 2022
in Wordpress, Code Snippets
0
Share on FacebookShare on Twitter
ADVERTISEMENT

If you feel clicking to product thumbnail is not really interested, you may need this jquery code snipet to change flatsome flickity gallery on hover product thumbnail of woocommerce single product page.

On Hover change flickity gallery flatsome theme
Something looks like this

The flatsome theme is using Flickity for it’s sliders. So i looked around Flickity guides to write this snippet. You needn’t to click, just hover product thumbnail, the gallery will change automatically. And here is my code:

You might also like

Top 19 cloud web hosting uy tín nhất 2022

Top 19 cloud web hosting uy tín nhất 2022

August 5, 2022
Top 13 web hosting google uy tín nhất 2022

Top 13 web hosting google uy tín nhất 2022

August 5, 2022
function hitet_flatsome_hover_thumb_change_gallery(){;?>
 <script>
jQuery(document).ready(function($) {
  var slidermain = $('.woocommerce-product-gallery__wrapper').flickity({"cellAlign": "center","wrapAround": true,"autoPlay": false,"prevNextButtons":true,"adaptiveHeight": true,"imagesLoaded": true,"lazyLoad": 1, "dragThreshold" : 15,"pageDots": false,"rightToLeft": false 
  });
  var slidernav = $('.product-thumbnails').flickity({
    asNavFor: '.product-gallery-slider',contain: true,pageDots: false,
  });
  slidernav.on( 'mouseover', '.col', function( event ) {
    var index = $( event.currentTarget ).index();
    slidermain.flickity( 'select', index );
  });
  });
</script>
<?php }
add_action('wp_footer','hitet_flatsome_hover_thumb_change_gallery',0);

How to use:

Paste the code to current theme functions.php then enjoy the show!

Tags: FlatsomeFlickity
admin

admin

Related Stories

Top 19 cloud web hosting uy tín nhất 2022

Top 19 cloud web hosting uy tín nhất 2022

by admin
August 5, 2022
0

Tổng hợp và liệt ra những cloud web hosting dưới đây hi vọng sẽ giúp các bạn có thêm những...

Top 13 web hosting google uy tín nhất 2022

Top 13 web hosting google uy tín nhất 2022

by admin
August 5, 2022
0

Tổng hợp và liệt ra những web hosting google dưới đây hi vọng sẽ giúp các bạn có thêm những...

Top 19 cheapest web hosting uy tín nhất 2022

Top 19 cheapest web hosting uy tín nhất 2022

by admin
August 5, 2022
0

Tổng hợp và liệt ra những cheapest web hosting dưới đây hi vọng sẽ giúp các bạn có thêm những...

Top 20 web hosting cheap uy tín nhất 2022

by admin
August 5, 2022
0

Tổng hợp và liệt ra những web hosting cheap dưới đây hi vọng sẽ giúp các bạn có thêm những...

Next Post
Can’t Create New Facebook Account - Guide to solve

Can't Create New Facebook Account: Guide To Solve Some Common Issues

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recommended

Building a Southwest Pacific regional organization

February 25, 2022

Asean Aims for 23 Pct Renewables in Energy Mix by 2025

February 3, 2022

Popular Story

  • clean up metadata for unexist images

    WordPress Database Optimize: Clean up metadata for unexist images

    598 shares
    Share 239 Tweet 150
  • On hover woocommerce product thumbnail change flickity gallery flatsome theme

    598 shares
    Share 239 Tweet 150
  • Can’t Create New Facebook Account: Guide To Solve Some Common Issues

    597 shares
    Share 239 Tweet 149
  • How to permanently delete attachments (photos and files) when delete a wordpress post

    591 shares
    Share 236 Tweet 148
  • Govt distributes free medicines to support self-isolating patients

    586 shares
    Share 234 Tweet 147
Hitet Blog

Hitet Blog is a place to share every thing online free.

  • Buy JNews
  • Support Forum
  • Pre-sale Question
  • Contact Us

© 2022 Hitet.net - Hitet Blog.

No Result
View All Result
  • Home
  • WordPress
    • WordPress Plugins
    • WordPress Themes
  • SEO
  • VPS
  • Hosting
  • Mac OS
  • Windows
  • IOS / iPhone

© 2022 Hitet.net - Hitet Blog.

This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.