Jump to content

Any way to maintain image quality using hover zoom effect?

Recommended Posts

Site URL: http://www.justinryanward.com/detail-test

Hi all, 

I am pretty new to custom CSS but managed to patch together some code I found online to create basic hover zoom effect as seen on this test page.

http://www.justinryanward.com/detail-test

My issue is that I modified the code to zoom further than 1.1 (see below)

.sqs-block-image .design-layout-poster:hover img{transform:scale(1.9);transition: 2s}

When I do this, the image maintains good quality when zoomed in if I view the page on my Mac retina screen. HOWEVER if I view the page at smaller browser widths or on my lower res monitor the image looks fine before the hover zoom but gets pixelated and blurry when zoomed in. I figure this is because the site is loading the larger size image on my Retina display and a smaller res image on my other display so when I zoom in it looks blurry . (I confirmed this and on my retina it loads a 1500x1500 pixel image and on the smaller display it loads something like a 500x500 pixel image)

Is there any code or other way to force the site to load the 1500x1500 pixel image at all times? My goal is to clearly show some detail in the image and the blur defeats that purpose. 

I would even settle for code that allows me to swap images on hover to an entirely different image which I could use to similar effect by swapping in a closer crop of the piece.

I found the magic zoom plugin but I think that is a bit beyond my skill in that it looks like you have to enable developer mode and that is getting beyond my abilities or comfort.

Thanks for any input.

-Justin

Edited by JustinW
Link to comment

Hi  JustinW,

I would like to propose a solution like so:

- You should create a naming convention on your uploaded image, eg: sword_zoomable.jpg , basket_zoomable.jpg... etc

- Then use this snippet and place it at Settings->Advanced->Code Injection->Footer

(function() {
  [].forEach.call(document.querySelectorAll("img[src*='zoomable']"), function(img) {
    var src = img.src;
    img.src = img.src.replace("750w", "1500w");  
  });
})();

image.png.b4915e901c6d8d96b96ffaeb4985ae5f.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Scroll down you can see the footer textarea

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 3 weeks later...

Hi BaNgan

Thanks for this response. I'm trying to make all of the full-sized images zoomable. The Css seems pretty simple and works except that it makes the thumbnails zoom as well. Is there a way to target only the large images?

Link to comment

pls show me the large and thumbnail position

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.