menu

Wednesday 15 October 2014

Zoom Effect

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Outer_Zoom</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/cloud-zoom.1.0.2.min.js"></script>
</head>

<body>
<div class="clr"></div>
<div class="left_container">
  <div class="zoom-section">
    <div class="zoom-small-image"><a href="images/bigimage00.jpg" class="cloud-zoom" id="zoom1" rel="adjustX: 10, adjustY:-4"><img src="images/smallimage.jpg" alt=""></a></div>
    <div class="zoom-desc">
      <p><a href='images/bigimage00.jpg' class='cloud-zoom-gallery' title='Red' rel="useZoom: 'zoom1', smallImage: 'images/smallimage.jpg' "><img class="zoom-tiny-image" src="images/tinyimage.jpg" alt = "Thumbnail 1"></a> <a href='images/bigimage01.jpg' class='cloud-zoom-gallery' title='Blue' rel="useZoom: 'zoom1', smallImage: ' images/smallimage-1.jpg'"><img class="zoom-tiny-image" src="images/tinyimage-1.jpg" alt = "Thumbnail 2"></a> <a href='images/bigimage02.jpg' class='cloud-zoom-gallery' title='Blue' rel="useZoom: 'zoom1', smallImage: 'images/smallimage-2.jpg' "><img class="zoom-tiny-image" src="images/tinyimage-2.jpg" alt = "Thumbnail 3"></a> <a href='images/bigimage03.jpg' class='cloud-zoom-gallery' title='Blue' rel="useZoom: 'zoom1', smallImage: 'images/smallimage-3.jpg' "><img class="zoom-tiny-image" src="images/tinyimage-3.jpg" alt = "Thumbnail 4"></a> <a href='images/bigimage04.jpg' class='cloud-zoom-gallery' title='Blue' rel="useZoom: 'zoom1', smallImage: 'images/smallimage-4.jpg' "><img class="zoom-tiny-image" src="images/tinyimage-4.jpg" alt = "Thumbnail 5"></a> </p>
    </div>
  </div>
</div>
</body>
</html>

No comments:

Post a Comment