Jump to content
Sign in to follow this  
bartonlewis

Javascript hack for making magnifier.js responsive to browser re-sizing?

Recommended Posts

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>

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...