Skip to content

VanillaJS Zoom with few lines code. Pretty cool isn't it?

Notifications You must be signed in to change notification settings

LuckyGStar/Javascript-Image-Zoom

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vanilla-js-image-zoomm

Overview

Pure JavaScript code snippet for image zoom. Focused on simplicity of code for now.

Preview

Preview

Install

npx serve

Run server


   ┌───────────────────────────────────────────────────┐
   │                                                   │
   │   Serving!                                        │
   │                                                   │
   │   - Local:            http://localhost:3000       │
   │   - On Your Network:  http://192.168.1.101:3000   │
   │                                                   │
   │   Copied local address to clipboard!              │
   │                                                   │
   └───────────────────────────────────────────────────┘

Usage

Basic usage example

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <img src="https://i.ibb.co/GscR76j/jen-p-Fo-G8lotg7-AA-unsplash.jpg" alt="">
    <script type="text/javascript" src="zoom.js"></script>
  </body>
</html>

Features

  • work for image tag directly which means it can be applied to all image elements wrapped by other tags
  • auto deployment to heroku with github action

This is a quick solution and still needs to be improved for being a library.

Looking forward pull request from experienced developers!

Hope you enjoy using it!

About

VanillaJS Zoom with few lines code. Pretty cool isn't it?

Resources

Stars

Watchers

Forks

Packages

No packages published