This cloud zoom feature is really awesome. Since I first read this thread this morning I've been playing around with it. I finally have it reduced down to just the zoom feature and I finally have a question about it.
Below is the code I'm playing around with. I have my CSS element "a img" sizing the original image, as well as saying where it goes on the page. I have also created a CSS element that places the zoom window in any certain place.
What if I wanted to have another image on the same page? I've been trying to break the "a img" element apart, meaning, I've been trying to initiate a new "div id" such as ".image1" and assign this to the "<a href" code, but it won't work.
In short, if I want to have more than one image, what type of divs do I need to create to use on each of the images? I hope you can understand what I mean.
- Code:
-
<style type="text/css">
a img
{
border:1px solid #000000;
position:absolute;
margin-left:0px;
margin-top:0px;
width:400px;
height:534px;
}
.cloud-zoom-lens
{
border:0px solid #000000;
background-color:#ffffff;
}
.cloud-zoom-big
{
position:absolute;
margin-left:20px;
margin-top:0px;
border:0px solid #cccccc;
overflow:hidden;
width:40%;
height:40%;
}
#zoom1
{
width:100px;
}
</style>
</head>
<body>
<a href="http://www.theeagleextra.com/zoomtest/hypno-fiction.jpg" class='cloud-zoom' id='zoom1'>
<img src="http://www.theeagleextra.com/zoomtest/hypno-fiction.jpg" alt='Book Cover' /></a></div>
<script src="http://www.theeagleextra.com/java/1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/JavaScript" src="http://www.theeagleextra.com/java/2.js"></script>
</body>
</html>