I’m a fairly new coder and I am unsure whether what I want to achieve can be done with CSS or if I will need to do this with Javascript.
I have an image gallery that has a variety of images which are different sizes. Most are square images, but a few are rectangular. The images vary from 200 x 200 pixels to 800 x 800 pixels.
In my main gallery display, I show the image in a 200 x 200 display box. When someone hovers the mouse pointer over an image, I want the image to display full size and not affect any of the surrounding elements.
The only way I have been able figure out how to “zoom” in on the image is with the transform method, however that requires a fixed scale, and that won’t work in my scenario. Other examples I have found use 2 images and swap between the two which is not what I am trying to do.
Could someone please let me know how this can be done.
Thank you for providing that code. It is not really what I need, as I am looking for something that just overlays the full-size image over top of the gallery image when the mouse cursor is hovered over it, and then goes away when the mouse cursor is removed.
I am also looking for something pretty simple for the basic coder that I am.
If I can’t find a way to make the full-size image appear, then doing it the way you have you have done it in the code would be my back-up. However, all of my galleries are created by php pulling the data in from a mysql database. I really don’t know how I could integrate php with the javascript.
The plus side of displaying the images as you have done, is that it is much more mobile friendly, rather than solely mouse pointer/pc activated.
Of course you would need to sort out smaller screen displays (and touch devices) and decide what needs to happen etc. In reality you should be showing small file size thumbnail images in the gallery and then pointing to the larger filesize image in your rollover to avoid the user loading all the large images by default.
The modal window approach as shown by Kylegilmartin5 above is generally the way that large images are handled and there are a number of plugins that serve this purpose specifically (google lightbox).
Hopefully that will point you in the right direction.
You wouldn’t need to do anything different as php is serverside and JS is client side so there are no conflicts between the two. Js just manipulates the displayed html and has nothing to do with php as such.
