Description
Hello everyone! In this video, you are going to learn how to Magnify Images using Magnify JS plugin with CSS, HTML, and JQuery. It is a glass lens style magnifier. When the cursor is on the image the magnifier will be visible and it will zoom the image So you can get a closer look at the image. This is a useful feature to zoom into product images on an e-commerce website or zoom into images on webpages.
First, create the index.html file and the style.css file. After you created these two files, link the style.css file in between <head></head> tags to the index.html file. Then you need to download the jQuery Magnify plugin as you can see in the video. Then extact the downloaded zip file and do the steps on that jQuery Magnify plugin page. One step is link the jquery libraries to the index.html file. So link jquery libraries in between
tags. Then go to the the extracted jQuery Magnify plugin file and copy the magnify.css and jquery.magnify.js files to the tutorial main folder. And link them to the index.html file as you can see in the video. Then step two specify the magnifying image. When the HTML part is complete go to style.css file and complete the styling part. Then step three call the .magnify() function. copy the jquery code in the website to the index.html file. So that's all, Hope this tutorial will be helpful when you developing an e-commerce website.You Might Also Like
- Sidebar Menu | With Sub-Menus
- Responsive Image Slider | With Manual Button & Auto-play Navigation Visibility
- Responsive Product Cards | With Quick Popup View
- Cursor Animation | On Mousemove, Mouseout, Mouse Stopped
- Reveal Website Elements On Scroll | On Page Scroll Down
All the source codes and source files and available to download from here. Use the download button or copy and paste the code from the text editors. My opinion is first try to do it by following the video line by line. It will help you to understand all of it. After that, if your code is wrong or not working use the given source codes to compare with your code. It will help you to understand all of your mistakes.
thank you very match sir for this
ReplyDeleteYou're most welcome!
DeleteNice job, i like it.
ReplyDeleteThank you! Glad you liked it!
Delete