Product gallery Vmod , with finger sliding, zoom etc

Im after a developer who can create a vmod for the product images as i dont like the current product gallery.

I want the product gallery to work the same way like the facebook marketplace gallery.
To be able to slide the images, next, previous with the finger, zoom with 2 fingers etc.

Hello.
I can code you a required vMod.

Hi

thanks for offering

What I am looking for:

• a VMOD
• that replaces the default product gallery on the product page
• responsive
• compatible with LC 2.6.1
• external files to be placed in the /ext folder in Litecart
• html5
• valid W3C html and css https://validator.w3.org/

Main features in Desktop

• if there are more than one photo under a product than the left and right arrows to appear when mouseover
• the small images / thumbnails to appear on the left hand side of the main image which is scrollable with the mouse when mouseover and when clicked the large photo appears near, in the container
• when large image is on the main container, the thumbnail on the left hand side to shown as selected e.g. 1px solid black border
• when main image clicked enlarges full screen and still dragable from left to right and right to left with the mouse, to show the next or previous image, a white X on the right corner that closes the enlarged image and if clicked near the enlarged image, the enlarged image window to close
• when the image is enlarged full screen, the background behind to be black transparent
• (optional)the thumbnails to appear under the main image when full screen, like on Facebook Messenger gallery
• pressing the next arrow and previous arrows on the keyboard also to work so shows next and previous product photo
• pressing the ESC button on the keyboard should close the enlarged photo

Main features in mobile:

• same as on facebook messenger,
• be able to slide with finger from right to left and left to right to see the next and previous image
• with double tap to enlarge
• with pinch to zoom in and out
• with a white X closing button in the top right corner

Any better idea welcome.

Example product galleries:

https://preview.codecanyon.net/item/woocommerce-product-gallery-slider/full_screen_preview/22689595?_ga=2.103001987.2045901081.1737306694-1743665060.1704137337

https://preview.codecanyon.net/item/responsive-product-gallery/full_screen_preview/18746421?_ga=2.144961207.2045901081.1737306694-1743665060.1704137337

https://preview.codecanyon.net/item/foxy-woocommerce-product-image-gallery-slider-carousel/full_screen_preview/21554031?_ga=2.107759233.2045901081.1737306694-1743665060.1704137337

The enlarged desktop effect from here:
https://www.castlecodeweb.com/autophotoalbums/example/overlay_effects.html#(grid|album)=/B_Reveal%20Effects;

https://cloudinary.com/documentation/product_gallery

Please take a look at this addon: https://www.litecart.net/en/addons/728/photo-viewer
I've added a mobile support for it.
You can view it in action here: https://welder.ba/jasic-aparati-za-zavarivanje-c-975/evolve-c-1122/jasic-evolve-mig-200p-p-50117

I just bought this today and now Ive upgraded to your 2.6.1.
There are some issues though:

1 - In Desktop and in Mobile - When an image is enlarged, you can still click images in the background and they will enlarge in the same time, also the one which is enlarged you can click in the background as many times you want it still enlarges again and again.
Also in mobile if a second image is enlaged, the swipe function doesnt work anyomre.
2 - In mobile if I click on the main image, enlarges and swipes ok, however after I close it and open the same image again swipe doesnt work
3 - in mobile if you expand the photo for full screen, there is no X button to close you need to use the mobile device's back button, which is not user friendly, also in Desktop you need to press ESC... am X close button should appear, and the backround should be fully black, should be transparent black
3 - remove the Maximise icon from the footer bar as it doesnt work

Suggested edits:
1 - when an image is enlarged to have a transparent black background, and if the background tapped or clicked closes the enlarged photo - like in the original script
2 - have a left and right arrow on the main image when onmouseover and if you click it to move to the next image without enlarging the photo, if you click in the middle then to enlarge

your script is nearly good but the above needs rectifying if possible please

Thank you for hints.
I'll do my best to rectify these issues.

I've refined the script, please check it out: https://welder.ba/jasic-aparati-za-zavarivanje-c-975/evolve-c-1122/jasic-evolve-mig-200p-p-50117

Looks much better.
Thanks for taking the time improving it.

See attached screen recording.

1 - In mobile if I want to zoom with my 2 fingers it zooms inside that box. It should zoom inside full screen
2 - to be honest I would totally eliminate the Windows frame box design all around, I would just leave the picture ans buttons below and a white X button at the top corner of the image for closing the enlarged image.
It would look modern, simple bur functional.
Since the frame is fixed doent behave like a Microsoft Windows window, so no point having that extra design.

Hi #orefat will you make the above changes please?

Hi.
Yes, I'll implement those changes, I'll reply here when I finish.
Although more precise explanation for the first change is needed.

Hi

take a look at the attached video.
When I zoom with 2 fingers it zooms inside that popup window. It should zoom in the entire phone screen.

look at this product

when photo is enlarged, you can zoom in in mobile with 2 fingers and the photo zooms by occuping the whole phone's screen

link
https://www.amazon.com/LIMYEE-Display-Gigabit-RTL8111H-Computer/dp/B0DP2NZHMT/ref=mp_s_a_1_1_sspa?_encoding=UTF8&content-id=amzn1.sym.2ed5cb2d-6276-4908-8487-054be25673ca&dib=eyJ2IjoiMSJ9.kD2voKnE76tI96xaqHtGt6GdAbX9CyXkGbIaQxcCzSk1Ta8qLDUebueR0RvtlHrhWxHEgmzamcpZroSqA1_1VNWdkDct8vIixx-ceFQWoXKkxYYflAKHsC8oVhHkrN9lgxl1MnEAVlMFYHbPv8whBsd-TxCsReiRzmyWxnk2io4hwpTRIba0mFNpil-qaLWSRZVzC69UTJoieyHobZ1j4Q.Acdy9D1SDnKpwKTG52cQlNCPPfXPPXz4Z_ZdVM8OzHI&dib_tag=se&keywords=desktop+computers&pd_rd_r=a81b3c45-18ad-4e15-9a82-2149c342f214&pd_rd_w=YoeZm&pd_rd_wg=xWDF9&pf_rd_p=2ed5cb2d-6276-4908-8487-054be25673ca&pf_rd_r=SX1GAM54EK308TCYVEG3&qid=1737494877&sr=8-1-spons&sp_csd=d2lkZ2V0TmFtZT1zcF9waG9uZV9zZWFyY2hfYXRm&psc=1

Check it out now.

I am doing it now. Thank you

Hi Orefat

Much much better what you did - after testing it and taking into account usability, ergonomics, gave it to my mother in law who is 63 my daughter whi is 12 my wive who is in her thirthees I identified some changes that I suggest to you if you'd like to do it

See attached PDF file suggestions for a perfect gallery.

Please check the final 1.4 version.

Hi Orefat

Thank you. I can see most of the suggestions are implemented. Thank you again.
I will customise the rest myself.

Hi Orefat,

I dont want to mess up your code... would you be able to do the rest of the modifications as per the attached PDF?
If you would do it as a custom work, what would be the price?
Pls message me directly
Thank you

Hi Cyber83.
I've implemented most of the modifications from that pdf file (arrows on hover, zoom icon when pointer is inside of the div, dimmed background when modal is shown, close on background click...).
Some of the modifications are easy to implement, like: removal of the 1px solid border, different colors of header and toolbar footer.
Other modifications could be applied and implementing them would require going back 4-5 steps in both js and css which will make this, already, complex plugin more complicated and tricky to maintain for newer versions of LTC.
I could offer you a custom, modified version of this plugin, but I can't promise that it will be done in timely manner.

You can delete your email address now.
Will contact you.

Thank you

I attached the updated PDF file that remains chainging - and removed the edits you already done
see attached