1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

"Facebook Photo Zoom" effect - how to do it?

Discussion in 'Web Design & Development' started by BlackFrancis, Jan 9, 2013.

Thread Status:
Not open for further replies.
Advertisement
  1. BlackFrancis

    BlackFrancis Thread Starter

    Joined:
    Oct 21, 2006
    Messages:
    223
    I know this method exists, because I have a Chrome plugin that zooms images upon hover/rollover on Facebook pages:

    [​IMG]

    I've looked into this and I'm confused whether CSS can handle this on its own, or I need javascript, or maybe say the alphabet backwards repeatedly as an incantation. I'm just not sure.

    The idea is to display the same image (which may be automatically resized or thumbnailed), in it's full size, in a nice little box over the site's content.

    Most solutions I found involve playing around with two images, which is impractical on social networking sites.

    Thank you
     
  2. colinsp

    colinsp

    Joined:
    Sep 5, 2007
    Messages:
    2,299
    First Name:
    Colin
    Google Lightbox as this is the effect that you are talking about. Usually it is done with javascript.
     
  3. BlackFrancis

    BlackFrancis Thread Starter

    Joined:
    Oct 21, 2006
    Messages:
    223
    That's what I've been doing, dude. But I need help wording SPECIFICALLY WHAT IT IS I NEED. Otherwise I'm just going to keep clicking on tutorials and forum threads that sound like they're what I need, but due to pandemic illiteracy, it's just the same old **** as any other solution.

    Could you suggest to me what it is I'm looking for?
     
  4. colinsp

    colinsp

    Joined:
    Sep 5, 2007
    Messages:
    2,299
    First Name:
    Colin
    I am not clear from your description what your requirements are. Do you want to implement this on your own website or what?

    There are some good scripts here that may give you what you want but I am just guessing at the moment.
     
  5. BlackFrancis

    BlackFrancis Thread Starter

    Joined:
    Oct 21, 2006
    Messages:
    223
    Rollover any image with an <img> tag (I'll settle for a CSS class) - regardless of the size the image is being displayed in, a rollover-lightbox appears with an unaltered version of the image being displayed.

    Thank you, I'm looking at this Dynamic Drive page after lunch.

    I honestly don't see why I need to nurse a stomach ulcer over this, but every time I find someone who says they have a solution they go on with this crap about using two image files of the same image, and that makes me want to personally pay their goddamn tuition to some kind of goddamn school. Why are web programmers so goddamn illiterate?
    Two image solution is grand if you're the one entering the images and it's an annual event. I'm trying to apply this so a social networking site.

    "Facebook Photo Zoom" extension and Firefox's Firebug does this, so why can't I!?!
     
  6. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,393
    First Name:
    Jim
    I knocked up this little demo which you may be able to utilise? It requires just one image and can be adjusted up or down to suit your needs simply by changing the width parameters in the html <img> tags. It is pure css and html with no javascript.
    the css ...
    Code:
    .p1 {display:block; width:100px; text-decoration:none; background:#fff; border:0; margin:20px 0 0 50px; float:left; position:relative; z-index:50;}
    .p1 img {display:block; border:0;}
    .p1:hover {text-decoration:none; background-color:#8c97a3; color:#000; position:relative; z-index:500;}
    .p1 b {display:block; position:absolute; left:-9999px; padding:10px; opacity:0;
    
     border-radius:3px; 
     box-shadow:0 15px 10px -15px rgba(0,0,0,0.4);
    
    -webkit-transition: opacity 0.6s ease-in-out;
    -moz-transition: opacity 0.6s ease-in-out;
    -o-transition: opacity 0.6s ease-in-out;
    -ms-transition: opacity 0.6s ease-in-out;
    transition: opacity 0.6s ease-in-out;
    }
    
    .p1:hover b {top:-120px; left:110px; padding:10px; border:1px solid #ddd; background:#fff; opacity:1.0;}
    
    
    the html...
    HTML:
    <html>
    <head>
    <link rel="stylesheet" media="all" type="text/css" href="style.css" />
    
    </head>
    <body>
    <br /><br /><br /><br /><br />
    <span class="p1" ><img src="1.jpg" width="100" alt="" /><b><img class="large" src="1.jpg" width="400" alt="" /></b></span>
    <span class="p1" ><img src="2.jpg" width="100" alt="" /><b><img class="large" src="2.jpg" width="400" alt="" /></b></span>
    <span class="p1" ><img src="3.jpg" width="100" alt="" /><b><img class="large" src="3.jpg" width="400" alt="" /></b></span>
    </body>
    </html>
    (replace 1.jpg; 2.jpg and 3.jpg with your own image names)
     
  7. BlackFrancis

    BlackFrancis Thread Starter

    Joined:
    Oct 21, 2006
    Messages:
    223
    Presentation-wise this is exactly what I've been looking for. You don't know how many tears I've cried trying to bang this together. Thank you.

    So basically all I need to do is rig up the content areas and get added photo URLs to print once in the original resized <img> tag and again in the full-size <img> tag. :D
     
  8. BlackFrancis

    BlackFrancis Thread Starter

    Joined:
    Oct 21, 2006
    Messages:
    223
    Do <div> tags conflict with this? A bit of the box is cut off here by neighbouring <div> on the page.

    [​IMG]

    I'm lost as to how to remedy this, and I'm thinking that it can't.
     
  9. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,393
    First Name:
    Jim
    Yes, if you put the zoom code in a div and set a height in it's css, equivalent to your image height, you should be able to circumvent this problem...
    However, this is not a good solution as it will create ugly whitespace:eek:
    Could you give me a link to the specific page so that I can check the source? (I think that whatever css is associated with the buttons in the next div are overriding the display: block in some way so that it truncates). It ought to display over any adjacent text and images, or at least that is my understanding...
    You could also try tinkering with the .p1:hover positioning, so that it displays further up the page??
     
  10. Sponsor

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Loading...
Similar Threads - Facebook Photo Zoom
  1. chrispyfahy
    Replies:
    7
    Views:
    530
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/1084480

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice