Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 13
  1. #1
    Junior Member Enforcefx's Avatar
    Join Date
    Sep 2011
    Location
    Sydney
    Posts
    21
    Member #
    29167
    Check out this link http://www.surf-dude.nl/images/wallp...ump%201024.jpg

    Notice how "on mouse over" the cursor changes to a Magnify glass, then on click it changes the scale of the images? Then you click the images again to rescales it back again!

    How can you do this?


    I posted this in the javascript forum as i would only guess its java script.

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    It's a browser function, and it depends on the window size of your browser. In my case (1920 x 1080), I don't see the magnifying glass at all.

    If the width or height of your browser's window is less than the width or height of the image, that's when you see the magnifying glass.

    It wasn't a bad thought that it was Javascript...it just isn't.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    I think what he means is that he wants to be able to do that on a webpage.

    There isn't widespread support for it yet, but you can set the cursor to zoom via CSS.
    The rest can be done with JS. I would use jQuery, personally, because functions like this are a snap. Start here, and see if you can get it. If not, I'll write a script this afternoon.

    EDIT: You'll also need this if you want it to zoom back out on subsequent clicks.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  5. #4
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    Ahhhh okay. I just thought he was asking how it was done.

    Another option would be jqZoom Evolution. It's a jQuery plugin that...well, zooms. A whole bunch of different ways, actually. You can even have a zoom inside of the picture. Works pretty well too, when it's implemented correctly. It's a bit finicky, though, so implement it a piece at a time.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  6. #5
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Here's a JSFiddle where I wrote out a script.
    It doesn't change the cursor, but it takes care of the zoom.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  7. #6
    Member
    Join Date
    Nov 2011
    Posts
    50
    Member #
    30017
    Liked
    9 times
    Do you mean like this, or like in a a website? Not sure exactly what you're asking.

    I'm using the image you had posted before, im not sure if this is what you're looking for.

    Code:
    <!doctype html>
    <html>
    <head>
    <title>Image cursor</title>
    <style>
    #durp {
     width: 100px;
     height: 100px;
    }
    </style>
    </head>
    <body>
    <div id="durpie">
    <img src="http://hdbackground.com/wp-content/uploads/images-6.jpg" alt="image" id="durp" />
    </div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
    <script>
    $('#durp').live('click',function(){
     $('#durp').css('width', '1000px');
    $('#durp').css('height', '800px');
    $('#durp').addClass('dontshrinkmebro');
    });
    $('.dontshrinkmebro').live('click',function(){
     $('.dontshrinkmebro').css('width', '100px');
     $('.dontshrinkmebro').css('height', '100px');
     $('.dontshrinkmebro').removeClass('dontshrinkmebro');
    });
    </script>
    </body>
    </html>

  8. #7
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Updated the JSFiddle to make it work a little better
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  9. #8
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Guess the OP bounced?
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  10. #9
    Member
    Join Date
    Nov 2011
    Posts
    50
    Member #
    30017
    Liked
    9 times
    Yea it seems like he did :/ I worked for a good 20min on that code :C

  11. #10
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    Could still be useful to someone else in a similar position. Look at it that way.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:16 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com