rvdveen27 Posted May 28, 2015 Share Posted May 28, 2015 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. Link to comment https://forums.phpfreaks.com/topic/296522-picture-zoom/ 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. Link to comment https://forums.phpfreaks.com/topic/296522-picture-zoom/#findComment-1512760 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. Link to comment https://forums.phpfreaks.com/topic/296522-picture-zoom/#findComment-1512761 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. Link to comment https://forums.phpfreaks.com/topic/296522-picture-zoom/#findComment-1512762 Share on other sites More sharing options...
Barand Posted May 28, 2015 Share Posted May 28, 2015 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> Link to comment https://forums.phpfreaks.com/topic/296522-picture-zoom/#findComment-1512768 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 Link to comment https://forums.phpfreaks.com/topic/296522-picture-zoom/#findComment-1512797 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.