Jump to content

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


bartonlewis

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>

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...