Jump to content

Picture zoom


rvdveen27

Recommended Posts

Hello all,
 
I've been searching for a code that allows me to put images in the php code that can be clicked to get a zoomed-view of the picture within the same page. (image below for clarification of what I mean) 
 
qutgaMC.jpg

Now it doesn't need to be entirely the same as in the picture. As long as if the image on the page is clicked it shows a zoomed-view of the picture like that and when the picture is click again or there's a click outside of the zoomed-view, the picture should go back to normal again.


So far I haven't been able to find a code for this, I understand this might work with jquery? The only things I've managed to find on this topic is extra files which I need to download, which, I rather have raw code.

I'm hoping someone here can help me with this.

EDIT: Basically I'm requesting what this forum has too when you click the picture, which I just got reminded off. 

Edited by rvdveen27
Link to comment
Share on other sites

You need JavaScript to do this. The extra files you allude to are probably LightBox, FancyBox, or Pretty Picture plugins. You'll need to download the files, upload them to your server, include them in your HTML, and then tag the images according to the docs for plugin you choose.

Link to comment
Share on other sites

Basically the way most of them work is you output your image using html, and setting the height and width to be smaller, like a thumbnail. Then when you click the thumbnail, an image viewer pops up and shows the image at full size. Really nothing to do with PHP though.

Link to comment
Share on other sites

When you say "zoom" do you want to show part of the image enlarged or just enlarge the whole image like this

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
    var zoom = 0;
    $().ready(function() {
        $("#pic").click(function() {
            if (zoom==1) {
                $(this).attr({"width":200,"height":200});
                zoom = 0;
            }
            else {
                $(this).attr({"width":400,"height":400});
                zoom = 1;
            }
        })
        
    })
</script>
</head>
<body>

    <img id='pic' src="myimage.jpg" border="0" width="200" height="200">
</body>
</html>
Edited by Barand
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.