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

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.

ADVERTISEMENT
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

Hello world!

March 26, 2022

How music shapes the way we play video games

February 26, 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

Hello world!

by admin
March 26, 2022
0

Welcome to WordPress. This is your first post. Edit or delete it, then start writing!

How music shapes the way we play video games

by admin
February 26, 2022
0

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated...

Building a Southwest Pacific regional organization

by admin
February 25, 2022
0

Life is about not knowing, having to change, taking the moment and making the best of it, without knowing what's...

The time to unlock Industry 4.0 growth is now

by admin
February 24, 2022
0

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated...

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

Smartphone addiction among the young is undeniably real

February 11, 2022

How to support someone with depression virtually

February 19, 2022

Popular Story

  • clean up metadata for unexist images

    WordPress Database Optimize: Clean up metadata for unexist images

    597 shares
    Share 239 Tweet 149
  • On hover woocommerce product thumbnail change flickity gallery flatsome theme

    596 shares
    Share 238 Tweet 149
  • Can’t Create New Facebook Account: Guide To Solve Some Common Issues

    593 shares
    Share 237 Tweet 148
  • 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.