Magnify Js Plugin

[Mariela Laflam]

Magnifyis a simple, lightweight jQuery plugin that adds a magnifying glass style zoom functionality to images. It is a useful feature to have for product images on ecommerce websites, or if you just want people to be able to zoom into an image without spawning additional overlays or popup windows that may cover your content. Magnify is based on this tutorial.

You have complete control over the style and size of the lens by modifying magnify.css. Magnify has support for touch devices, but for a better zoom experience you can load the optional mobile plugin by uncommenting the last line above. It is recommended to load the JavaScript files at the bottom just before the closing tag if possible.

Magnifying Glass (Hover Zoom) is a lite addon that enables you to magnify a portion of a webpage with a click of a button.Please click on the toolbar button once to see the magnifying glass. Then move your mouse to see the magnified page within a circular section. If you want to hide the magnifier, simply click on the toolbar button once or click anywhere on the page. This addon has also an options page to adjust the magnifier zoom level and coverage area. Moreover, the toolbar button serves as an ONOFF switch to turn the addon ON or OFF.Note 1: when you install the addon, it is turned off. Please click on the toolbar button once to activate the addon. The toolbar icon is red when the addon is active and grey when it is inactive.Note 2: if you want to change the zoom level, please visit the addon's options page.To report bugs, please fill out the bug report form on the addon's homepage ( -glass.html).

The best image zoom for WooCommerce by far! As well as smoothly zooming your images on hover, this must-have WooCommerce plugin will also enlarge your images on click. The stunning full-screen view is a real winner with shoppers.

Magic Zoom Plus automatically generates the background images for full-screen mode, try it yourself, it's very captivating!Our image zoom WooCommerce plugin works flawlessly on all devices and browsers. We've been refining it for the last 9 years and not planning to stop anytime soon.

You're not limited to images with Magic Zoom Plus. Use videos too! It's a known fact that people who watch a product video are much more likely to make a purchase (100+% more likely in some cases), than those who didn't.

Product videos offer potential customers a clear demonstration of any product. Conveying an incredible amount of information very quickly. Videos are proven to increase likelihood to buy, spend longer on your site and spend more per order.

For retailers using the popular plugin WooCommerce Additional Variation Images, each product allows multiple images be assigned. The whole gallery (not only main image) updates when variation is changed.

Thanks for trying Magic Zoom Plus on your WooCommerce site! What did you hope Magic Zoom Plus could do? How can we improve it? Let us know, we're always improving our tools based on customer feedback.

I have what seems like a simple request: I'd like to create a gallery page where you can zoom in on the images. Some of the pictures are tall and narrow, and thus, it's important that you can zoom in and then scroll to see the entire image close up.

You can zoom into Squarespace images and enlarge them in a lightbox with Magic Zoom Plus. We've create a special Squarespace script so that its easy to install. You can download a free trial and email our support team if you need any help.

(Now sure how to tag Magic Toolbox here). Could you please clarify whether this plugin only applies to product galleries? On your site I only see product examples, and I'm not using products for this gallery.

So I found a workaround: Creating a new page for each individual photo (and adding custom CSS to reduce side padding on each individual photo page). Now the photos on the gallery page each link to the individual photo page so that when clicked you see a larger version. Not perfect, but it works!

Hi @IveGotQuestions! Magic Zoom Plus is designed to work with Squarespace product page only. The zoom effect can be applied to non-product images but requires customizing the integration on your website. Email us via our website for free support and our Technical team will complete the integration for you.

Hi @Magic Toolbox

Is the Magic Zoom or Magic Zoom Plus working with the carrousel layout of the Product Page in 7.1?

Squarespace has got a technical issue currently with this layout and can't activate the zoom option.

So your tool could be a solution in the meantime.

Thank you,

Florence

I changed width="100%" height="auto". Now when you use your phone, the image has the right size, but the magnifier glass effect doesn't work anymore. And with the Squarespace mobile preview the magnifier glass effect is offset.

There are 3 static images and I want to see if it is possible to use the magnifying glass effect when hovering over the images. They are currently set with the lightbox effect but figure it would nice to have a magnifying glass option as well (if the code requires the lightbox effect to be turned off, I'm okay with that).

Allow your users to watch even the smallest detail of your products by enabling the zoom feature on your images. You can decide whether to use an icon to highlight the zoom option or not, set the zoom position in relation to the main product image (inside, next to, above, or below), and set the size of the zoom window.

Do you want to disable the zoom option on some products or specific categories of your shop and keep it active only on selected products? The Exclusion List bundled in the plugin will grant you the highest flexibility.

Since version 2.0, you will find an option to edit the main product image whenever you hover over one of the gallery thumbnails. This solution draws inspiration from Amazon and many other big e-commerce stores for better usability and to spare your customers any extra clicks.

Since version 2.0 we have also replaced the fixed images with SVG ones. You will be able to customize their sizes and colors and make them fit your shop style. You can also set the border-radius to make the icons look as round as you wish.

Do you have any doubts about the plugin and don't know if it's a good fit for your project? You have nothing to worry about, you can always take advantage of our 100% money back guarantee and get a full refund within 30 days of purchase.

YITH WooCommerce Featured Audio and Video Content is a plugin for WooCommerce that allows you to set video and audio contents in replacement of the provided image for single products in the shop. In combination with YITH WooCommerce Product Gallery & Image Zoom the video or audio you have added in the video gallery, will replace the featured image and will not be shown in a popup.

YITH WooCommerce Quick View allows the users to get a quick view of the product for which they are interested. The product details will be shown in a popup, so they don't need to leave the current page.

YITH WooCommerce Product Gallery & Image Zoom perfectly integrates with YITH WooCommerce Quick View and this allows you to enable the zoom function even inside the product "quick view".

YITH WooCommerce Watermark lets you apply a logo or a watermark to all your product images. The YITH WooCommerce Product Gallery & Image Zoom uses a different image size, so the YITH WooCommerce Watermark plugin will add this specific image size in the available image sizes.

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

So I am developing an e-commerce site and I have a large image displaying the product with poplet images underneath with different views. When a poplet is clicked, the href value is taken and it replaces the large images html (I have a #largeimage wrapper and I am changing the img inside upon a poplet being clicked). I have that functionality down.

Now the problem lies with adding a zoom effect jQuery plugin. To use the plugin, I have to add a data-magnify-src attribute to the image I want zoomed with a src path to the larger version of the image. I have successfully found a way to use jQuery to add the data attribute on the initial large image, but when I am switching between poplet images, I lose the plugin effect. I swear, I have been taking all of these courses and I still feel like such a newb when it comes to JS/jQuery. Please excuse the really crude JS when adding the attribute. Really didn't take the time to refine and condense yet. Was prioritizing how the bloody hell to add the attribute to the next poplet item clicked.

You need to change the image - which you are doing correctly - then implement zoomEffect() on the current image inside of .productLarge. Then call magnify() again right after to instantiate the plugin on the current photo.

We are getting closer! This makes a lot more sense. When I use this though, the zoom effect isn;t called on the initial large image. And then, upon clicking the poplet, it is using the previous images src path. It's currently live with the changes.

If you want to add an attribute to an element that you will be inserting into the page then you can do that in several ways. Here are a few. If you open the HTML in a browser then you will see that it prints the value of the added attribute on the page to confirm that it was added.

3a8082e126