Hi guys,
Is there a way to crate this kind of galleries (for an ecommerce website) in Blocs? Also, is it also possible to implement magnification when the mouse pointer moves over the picture?
Thanks.
Just to clarify, do you mean Gallery for the product image? If you are using something like Ecwid, those features are built-in.
Also, with Blocs Class Editor, the cursor can be changed
Yeah, I mean this kind of gallery (I am not using Ecwid).
Thanks.
Just create your thumbnails and one main image with the ID: imagebox, add onmouseover as a custom attribute:
Onmouseover = "myFunction(this)"
and add a few lines of Javascript:
<script>
function myFunction(thumbnail)
{
var fullImg = document.getElementById("imagebox");
fullImg.src = thumbnail.src;
}
</script>
The result:
4 Likes
Sorry, can’t understand if this code is for magnifying on mouse over or for creating a product image gallery. 
I can’t see the picture you have attached.
Thanks for helping.
No, this is not. A solution for magnifying on hover I posted a while ago. You’ll have to search the forum for that.
It’s a smart and simple solution but only works with on click and not with a mouse on hover. Secondly, it does not offer magnifying images as requested.
Thanks but I tried and it doesn’t work. When I click on thumbnails nothing happens.
I just followed step by step and it works perfectly, but does not do magnification as @Jerry has stated, but when the image is large when selected, then it’s good enough for the user, unless you have a client who wants that.
I will be honest - if I was you and you can’t get it to work the second time around try, I would do 100% as @TMRJIJ said and try Ecwid.
Good luck !
Eldar showed - a great example, cheers. I tried in bootstrap 4, works great. Tried in bootstrap 5 and failed. In connection with this step, tell me where to find a hint to work in bootstrap 5.
After some time I found a solution.
data-bs-target
data-bs-slide-to
1 Like
Rich the Weather Guy
You mean that I have to add “-bs-”?
yes
Oh, thanks a lot!