Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Sep 2011
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Link to left of image

    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!!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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">
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts
    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>
    Last edited by Kevin_M_Schafer; 12-10-2011 at 06:35 PM. Reason: typo
    My keyboard is an IBM from 1993 and I like it that way. | Who is Dan Well? Everyone always says I know Dan Well.Building a web page is like building a birdhouse. Put it up there and watch 'em come. | Maintaining the aspect ratio of an image is more important than having a cold orange pop.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Kevin_M_Schafer

    Look at this page - http://www.professorcloud.com/mainsite/cloud-zoom.htm ...check out the Integration Instructions.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Kevin_M_Schafer (12-10-2011)

  • #5
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts

    Lightbulb

    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
    Last edited by Kevin_M_Schafer; 12-11-2011 at 04:18 PM. Reason: link
    My keyboard is an IBM from 1993 and I like it that way. | Who is Dan Well? Everyone always says I know Dan Well.Building a web page is like building a birdhouse. Put it up there and watch 'em come. | Maintaining the aspect ratio of an image is more important than having a cold orange pop.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    That's pretty cool. I'm trying to think what I can use that on... probably my wifes jewelry page.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts

    Smile

    Quote Originally Posted by Excavator View Post
    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.
    My keyboard is an IBM from 1993 and I like it that way. | Who is Dan Well? Everyone always says I know Dan Well.Building a web page is like building a birdhouse. Put it up there and watch 'em come. | Maintaining the aspect ratio of an image is more important than having a cold orange pop.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •