I’ve been looking at ways to display my images in Sparkle 5. I’ve seen what the “Zoom Image in Lightbox” can do and that’s quite nice. I’m wondering if, for example, I have an image with 100 various postage stamps in it and I set the image (thumbnail?) on my page to perhaps 50 percent of the original size and mark it to do the Zoom Image when clicked. With “unlimited” set, the result is a full sized display of the original image.
That’s nice, but is there a way to have some sort of magnifying glass appear for the user to zoom in dynamically around that large image with his/her mouse at those stamps? Customers not only want to see a large view of all the stamps I’ve got for sale in that group, but there may be several that they want a closer view of.
I’m thinking @K7TXA you need to take another look at this in how you will display your stamp images as Users are wanting the fastest action to seeing what they want to see.
Sparkle doesn’t have that feature in further magnifying a LightBox image.
Maybe use the Sparkle Image Gallery with the thumbnail display activated.
The Image Gallery can slide though the stamps or Users can individually select the stamp image that takes their fancy and LightBox it.
It is alway recommended that whatever way you think you want a User to interact with your images, how will that work on mobile!..
Please understand that Sparkle is a tool for creating web pages, and it does an excellent job. What Sparkle cannot really do is foresee the huge number of effects and facilities that can only be achieved using coding techniques. This is where you will have to get under the hood somewhat. Fortunately, Sparkle does have you covered by incorporating an ‘embed’ object that allows you to add code to your page very easily. By way of example, THIS PAGE demonstrates the effect I think you are talking about, and explains how to add such an effect to a Sparkle Page. There is also a link in the page that will show you the code or allow you to download the code as a plain text file (right-click the link and choose the save option). All you then have to do is make a couple of simple edits to the text file, and paste the final code into an embed object on your page.
I think we would have to take a leaf out of the Amazon book. Because mobiles don’t have a hover function to make magnifiers a viable option, you would have to have a different system for mobile layouts. Typically, this would usually involve putting an image slider on the mobile layout that can showcase different angles of the product being displayed, or a series of images that display enlarged portions of the same image. That’s one of the problems with implementing these types of solutions - you’re normally faced with having a completely different solution for touch-screen devices.
That said, the solution will display just fine on a mobile, and the page elements can be resized as normal to better suit the mobile format - even the embed box. Tapping the image will also show the magnifier with a portion of the image getting enlarged in the magnifier. However, you won’t be able to move the magnifier over the image - all you will be able to do is tap on another portion of the image to reveal another enlarged portion. It’s not an ideal situation, but nothing will break on the mobile version if this solution is implemented across all devices - it just won’t be as convenient to use.
Try it if you want to. I think you will find its much the same solution I’ve already proposed - it’s just been broken down into its component parts on the site you’ve referenced. This isn’t really the place to teach the intricacies of html, css and javascript. If its lessons you want, then w3schools is the site for you. If you just want a solution to a specific issue, then I’m more than happy to help with a specific solution that you can readily integrate into your Sparkle project.
Folks - thanks for those suggestions and comments! I’ll do a bit of studying and see about getting it incorporated into my page(s). I’ve done some HTML stuff, XOJO, and Python - Java doesn’t seem a whole lot different and as a retired software coder (started back in 1966) I shouldn’t have that much difficulty in picking it up.
Right now my main concern / problem is dealing with the e-commerce part of my web site, per another thread I’ve got going.
That’s the beauty for Sparkle how we have total control over the mobile device.
For me I would think of the User first before implementing the “fancy” and seeing if it works across all the devices so to reduce my workload per device and reduce the possibility of increased errors.
The magic of code!
I tried it on mobile and it worked as it did on desktop so that’s good.
But for me the big drawback (and one that can be very frustrating for the User) is that your finger mostly covers the magnifying glass effect to get it to work. Fancy but for me totally impractical and I would say a total frustration for a User.
Precisely the reason why mobiles should have an alternative option for any feature that only works ‘on-hover’ on a desktop/laptop device. This is what Amazon do on their shopping site - desktops and laptops screens present an image magnifier, whilst touch screens offer an image slider.
