Scroll the mouse wheel over the image to zoom-in/zoom-out at the desired point. After zooming you can drag the image to see hidden parts.
Scroll the mouse wheel over the image to zoom-in/zoom-out at the desired point. After zooming you can drag the image to see hidden parts.
MooZoom is an easy to implement script utilizing the Mootools JavaScript library. A visit to the MooZoom blog will provide you with all the files you will need to use this script.
<div class="zoombox">
<img class="moozoom" src="images/cape-point.jpg" width="600" height="400" alt="Cape Point - South Africa" />
<cite>Scroll the mouse wheel over the image to zoom-in/zoom-out at the desired point. After zooming you can drag the image to see hidden parts.</cite>
</div>.zoombox{
width:600px;
margin:0 auto;
position: relative;
display: block;
height:400px;
border: 1px solid #c0c0c0;
background-color: #ccc;
padding: 5px 3px 3px 5px;
}
.zoombox cite {
background: #111;
-moz-opacity:.55;
filter:alpha(opacity=55);
opacity:.55;
color: #fff;
font-size: .9em;
text-align: left;
position: absolute;
bottom: 4px;
left: 4px;
width: 590px;
padding: 5px;
border-top: 1px solid #999;
z-index: 1;
}
.moozoom{cursor:move}Attach the two MooTools scripts and the MooZoom script.
<script src="scripts/moozoom/mootools-124-core.js" type="text/javascript"></script>
<script language="JavaScript" src="scripts/moozoom/mootools-124-more.js" type="text/javascript"></script>
<script src="scripts/moozoom/moozoom.js" type="text/javascript"></script>If you have encountered a problem with this demonstration, or would like an amendment made to the referencing and attributions of the scripts and code used on this page, please send the CHouseLive team an email: cara_remove_@chouselive_remove_.org