Link to left of image

Cd0g112494 · 12-10-2011, 03:21 PM

I have used the cloud zoom plugin for a tiny webpage, and it works fine, but to the right of the image is small area of white space that turns to the hand, indicating it's a link, and I do not want this to happen. When you click this tiny area to the right of the photo, it leaves the page and travels directly to the photo, please help me remove this link, thanks!

Here is a link to my page:
http://p.b5z.net/i/u/10145668/h/ed105263548.html

Please, I am really stuck on this one, thanks!!

Excavator · 12-10-2011, 04:05 PM

Hello Cd0g112494,
Try giving that containing element a width. It already has either an id or a class that you can grab.

Add this bit to your CSS - #zoom1 {width: 302px;}

I think without the width is is adding that 47px from this bit -

Code:

<a id="zoom1" class="cloud-zoom" style="margin-left: 37px; position: relative; display: block;" border="none" rel="adjustX: 47, adjustY:0, softFocus: false, position: 'right'" href="http://p.b5z.net/i/u/10145668/i/i_c_zoom/814114-zo.jpg">

Kevin_M_Schafer · 12-10-2011, 06:32 PM

Hey there, Excavator.

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>

Excavator · 12-10-2011, 07:09 PM

Hello Kevin_M_Schafer

Look at this page - http://www.professorcloud.com/mainsite/cloud-zoom.htm ...check out the Integration Instructions.

Kevin_M_Schafer · 12-10-2011, 11:11 PM

Excavator,

Thanks for the tip!

Check out what I built today using Cloud Zoom.

This stuff is awesome.

http://www.theeagleextra.com/testfil...dzoomtest.html

Excavator · 12-10-2011, 11:27 PM

That's pretty cool. I'm trying to think what I can use that on... probably my wifes jewelry page.

Kevin_M_Schafer · 12-10-2011, 11:56 PM

Quote:

Originally Posted by Excavator

That's pretty cool. I'm trying to think what I can use that on... probably my wifes jewelry page.

Yeah! That would be cool. I was thinking this would be great for a movie poster site, where you sell them, I mean. It would show the edge and corner quality of the prints (thumb tack holes, wrinkles, and tears). It would probably work great for books, too, to show folks what condition the jackets/covers are in.

My uncle wrote this book in 1968 -- the year I was born. He died this past summer. He was a good guy.

I'm going to show this test page to my brother-in-law. He started a wooden toy company, and this might be a good way to show site visitors the detail of his craftsmanship -- when he gets a larger website.

I really appreciate your help on this stuff, Excavator.