Jump to content

Search the Community

Showing results for tags 'magnifier'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH


  • Community Calendar

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Found 2 results

  1. I found cool code for a magnifying lens on multiple images; but I want to make the images resize on different browser sizes. Since the code relies on defining the size of the image within the image tag, I am not sure how to do this. On the previous version of my page, where I did not use the magnifying lens, I created a class for the image which gave it a width: X% which enabled it be responsive. But that won't work here. Does anybody know of a solution? I am not js-experienced so I would need the code written for me, instead of being told what to do. Sorry, and thanks if anyone can help. <!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script type="text/javascript" src="magnifier.js"></script> <script src="https://use.typekit.net/qkv6kzb.js"></script> <script>try{Typekit.load({ async: true });}catch(e){}</script> <script src="https://use.typekit.net/qkv6kzb.js"></script> <script>try{Typekit.load({ async: true });}catch(e){}</script> <meta charset="UTF-8"> <title>Barton Lewis - photography - wall cuts</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <style> img { width: 100%; height: auto; } /* styles for magnifier image pairs */ .container { display: flex; justify-content: space-around; margin: 2% 0; } .caption { font-family: "europa",sans-serif; text-align: center; font-size: 1.5em; margin: 4% auto 5%; } /* style for the DIV that holds the image pair */ .magnifier { overflow: hidden; position: relative; display: flex; justify-content: space-between; } /* style for the DIV that is the magnifier lens */ .maglens { position: absolute; overflow: hidden; width: 200px; height: 200px; display: flex; justify-content: space-around; } /* style for the small IMG that appears on the page */ .magsmall { position: absolute; border-style: none } /* style for the magnified image, using a clip rectangle */ .maglarge { position: absolute; border-style: none; } /*---------------MEDIA!!!------------*/ @media screen and (max-width: 1366px) { .caption { font-family: "europa",sans-serif; font-size: 1.2em; } } @media screen and (max-width: 768px) { .caption { font-family: "europa",sans-serif; font-size: 1em; } } </style> </head> <body> <div class="container"> <div class="magnifier" style="width: 825px; height: 635px;"> <div class="maglens"> <img src="http://bartonlewisfilm.com/img_157-229_1500.jpg" class="maglarge" style="width: 1500px; height: 1155px;" /> </div> </div> </div> <p class="caption">287-135, Flushing Ave., IND Crosstown Line</p> <div class="container"> <div class="magnifier" style="width: 825px; height: 628px;"> <div class="maglens"> <img src="http://bartonlewisfilm.com/img_157-245_1500.jpg" class="maglarge" style="width: 1500px; height: 1142px;" /> </div> </div> </div> <p class="caption">157-245, 96th St., IND Eighth Ave. Line</p> <div class="container"> <div class="magnifier" style="width: 825px; height: 653px;"> <div class="maglens"> <img src="http://bartonlewisfilm.com/img_162-365_1500.jpg" class="maglarge" style="width: 1500px; height: 1187px;" /> </div> </div> </div> <p class="caption">162-365, 50th St., IND Eighth Ave. Line</p> <script> </script> </body> </html>
  2. I found w3schools' tutorial for "Image Magnifier Glass" and want to use it on my website for multiple images. But I can only get it to work for one, presumably because it uses document.getElementById(imgID) in the js; I tried changing this to document.getElementsByClassName(names) but that didn't work. I'm not an experienced javascript user so don't know how to resolve, but assume something different needs to go where (names) is at the least. Can anyone help? The only thing I changed in the code is to add a little padding to the img-magnifier-container class. Thank you. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * {box-sizing: border-box;} .img-magnifier-container { position:relative; padding: 20px; } .img-magnifier-glass { position: absolute; border: 3px solid #000; border-radius: 50%; cursor: none; /*Set the size of the magnifier glass:*/ width: 100px; height: 100px; } </style> <script> function magnify(imgID, zoom) { var img, glass, w, h, bw; img = document.getElementById(imgID); /*create magnifier glass:*/ glass = document.createElement("DIV"); glass.setAttribute("class", "img-magnifier-glass"); /*insert magnifier glass:*/ img.parentElement.insertBefore(glass, img); /*set background properties for the magnifier glass:*/ glass.style.backgroundImage = "url('" + img.src + "')"; glass.style.backgroundRepeat = "no-repeat"; glass.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px"; bw = 3; w = glass.offsetWidth / 2; h = glass.offsetHeight / 2; /*execute a function when someone moves the magnifier glass over the image:*/ glass.addEventListener("mousemove", moveMagnifier); img.addEventListener("mousemove", moveMagnifier); /*and also for touch screens:*/ glass.addEventListener("touchmove", moveMagnifier); img.addEventListener("touchmove", moveMagnifier); function moveMagnifier(e) { var pos, x, y; /*prevent any other actions that may occur when moving over the image*/ e.preventDefault(); /*get the cursor's x and y positions:*/ pos = getCursorPos(e); x = pos.x; y = pos.y; /*prevent the magnifier glass from being positioned outside the image:*/ if (x > img.width - (w / zoom)) {x = img.width - (w / zoom);} if (x < w / zoom) {x = w / zoom;} if (y > img.height - (h / zoom)) {y = img.height - (h / zoom);} if (y < h / zoom) {y = h / zoom;} /*set the position of the magnifier glass:*/ glass.style.left = (x - w) + "px"; glass.style.top = (y - h) + "px"; /*display what the magnifier glass "sees":*/ glass.style.backgroundPosition = "-" + ((x * zoom) - w + bw) + "px -" + ((y * zoom) - h + bw) + "px"; } function getCursorPos(e) { var a, x = 0, y = 0; e = e || window.event; /*get the x and y positions of the image:*/ a = img.getBoundingClientRect(); /*calculate the cursor's x and y coordinates, relative to the image:*/ x = e.pageX - a.left; y = e.pageY - a.top; /*consider any page scrolling:*/ x = x - window.pageXOffset; y = y - window.pageYOffset; return {x : x, y : y}; } } </script> </head> <body> <h1>Image Magnifier Glass</h1> <p>Mouse over the image:</p> <div class="img-magnifier-container"> <img id="myimage" src="http://bartonlewisfilm.com/img_157-229.jpg" width="33%" height="33%"> </div> <div class="img-magnifier-container"> <img id="myimage" src="http://bartonlewisfilm.com/img_287-145.jpg" width="33%" height="33%"> </div> <p>Feel free to change the strength of the magnifier glass when initiating the magnify function.</p> <script> /* Initiate Magnify Function with the id of the image, and the strength of the magnifier glass:*/ magnify("myimage", 3); </script> </body> </html>
  • Create New...