rvdveen27 Posted May 28, 2015 Share Posted May 28, 2015 (edited) 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) 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 May 28, 2015 by rvdveen27 Quote Link to comment Share on other sites More sharing options...
CroNiX Posted May 28, 2015 Share Posted May 28, 2015 That's all done with javascript. There are a ton of plugins that do that sort of thing, including jQuery. Try googling "jquery photo viewer" or something similar. Quote Link to comment Share on other sites More sharing options...
maxxd Posted May 28, 2015 Share Posted May 28, 2015 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. Quote Link to comment Share on other sites More sharing options...
CroNiX Posted May 28, 2015 Share Posted May 28, 2015 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. Quote Link to comment Share on other sites More sharing options...
Barand Posted May 28, 2015 Share Posted May 28, 2015 (edited) 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 May 28, 2015 by Barand Quote Link to comment Share on other sites More sharing options...
Barand Posted May 29, 2015 Share Posted May 29, 2015 Or you can use PHP gd library to zoom images. This will give a x2 zoom to the area clicked in the image imagezoom.html imagezoom.php Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.