Adding flash animation on product page gallery

  • Hi everyone,
    Im using Woocommerce with the retailer theme, for the last days i was trying to add an animation flash on the gallery so it shows underneath the product main image with other thumbnails exactly like on this website https://www.edisac.com/cabas-jet-set-item-cuir-michael-kors-s5sttt3l-549/7, i figured out i have to add an image and change its link so it shows the flash animation instead of an image, but i dont know how and where, i searched everywhere but no one seems to have encountred the same problem, thanks to anyone who give me an answer or even a hint.

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hey Jones,

    I know you mentioned using flash for this, so my comment may not be helpful (but maybe it will).

    First thing, the site you mentioned isn’t using flash. It’s some javascript that’s moving through photos.

    Here’s a snippet from the inspector to show this:

    <div id="scancube_jzspin" class="4179" style="visibility: visible; display: block; margin-top: -1440px;">
<img src="https://images.edisac.com/article_360/123007/sd/4179-0000.jpg" class="MagicZoom">
<img src="https://images.edisac.com/article_360/123007/sd/4179-0001.jpg" class="MagicZoom">
<img src="https://images.edisac.com/article_360/123007/sd/4179-0002.jpg" class="MagicZoom">
<img src="https://images.edisac.com/article_360/123007/sd/4179-0003.jpg" class="MagicZoom zoomImgSel" rel="zoom-id:zoomImgSel">
<img src="https://images.edisac.com/article_360/123007/sd/4179-0004.jpg" class="MagicZoom">
<img src="https://images.edisac.com/article_360/123007/sd/4179-0005.jpg" class="MagicZoom">
<img src="https://images.edisac.com/article_360/123007/sd/4179-0006.jpg" class="MagicZoom">
<img src="https://images.edisac.com/article_360/123007/sd/4179-0007.jpg" class="MagicZoom">
<img src="https://images.edisac.com/article_360/123007/sd/4179-0008.jpg" class="MagicZoom">
<img src="https://images.edisac.com/article_360/123007/sd/4179-0009.jpg" class="MagicZoom">
<img src="https://images.edisac.com/article_360/123007/sd/4179-0010.jpg" class="MagicZoom">
<img src="https://images.edisac.com/article_360/123007/sd/4179-0011.jpg" class="MagicZoom">
<img src="https://images.edisac.com/article_360/123007/sd/4179-0012.jpg" class="MagicZoom">
<img src="https://images.edisac.com/article_360/123007/sd/4179-0013.jpg" class="MagicZoom">
<img src="https://images.edisac.com/article_360/123007/sd/4179-0014.jpg" class="MagicZoom">
<img src="https://images.edisac.com/article_360/123007/sd/4179-0015.jpg" class="MagicZoom">
<img src="https://images.edisac.com/article_360/123007/sd/4179-0016.jpg" class="MagicZoom">
<img src="https://images.edisac.com/article_360/123007/sd/4179-0017.jpg" class="MagicZoom">
<img src="https://images.edisac.com/article_360/123007/sd/4179-0018.jpg" class="MagicZoom">
<img src="https://images.edisac.com/article_360/123007/sd/4179-0019.jpg" class="MagicZoom">
<img src="https://images.edisac.com/article_360/123007/sd/4179-0020.jpg" class="MagicZoom">
<img src="https://images.edisac.com/article_360/123007/sd/4179-0021.jpg" class="MagicZoom">
<img src="https://images.edisac.com/article_360/123007/sd/4179-0022.jpg" class="MagicZoom">
<img src="https://images.edisac.com/article_360/123007/sd/4179-0023.jpg" class="MagicZoom">
</div>

    It looks like they’ve executed it pretty cleanly so I’m having difficulty narrowing down exactly what they’re using. However, it seems to be something similar to this: https://www.magictoolbox.com/magic360/

    That said, based on a little bit of googling: I’d probably recommend the officially supported WooTheme’s extention: https://www.woothemes.com/products/woocommerce-360-image/

    The officially extensions are almost always cleaner code and more reliable for updates.

    Side note: Don’t use flash for anything, anywhere. The support for it is all but dead and it can be an awful security risk to many users.

    Ref: https://thenextweb.com/apps/2015/09/01/adobe-flash-just-took-another-step-towards-death-thanks-to-google/

    Thread Starter joness

    (@joness-1)

    Thank you so much Mizner,
    i dont want to use a plugin, i need to do it by coding ( so it helps me learn more about wordpress environment since im still a beginner), and i d love to have the same result as the link i posted, i figured out that i should modify woocommerce_show_thumbnails function but i still dont know how.

    No problem joness!

    This article is a bit dated, but might get you started!

    https://www.creativebloq.com/css3/build-360-view-image-slider-javascript-3122883

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Adding flash animation on product page gallery’ is closed to new replies.

Tags