Enlarge an image when clicking on it, Can click next to see next images

Question

I have this code :

    <div class="images_liste_plante_solo">
        <div class="image_liste_plante">
            <img alt="Hosta - Eternal Flame" src="images/eternal_flame_miniature.jpg"/>
        </div>
        <div class="image_liste_plante">
            <img alt="Hosta - Eternal Flame" src="images/eternal_flame-2_miniature.jpg"/>
        </div>
        <div class="image_liste_plante">
            <img alt="Hosta - Eternal Flame" src="images/eternal_flame-3_miniature.jpg"/>
        </div>
    </div>

I will have a variable number of pictures like this, because the number of pictures depends of my PHP database. I can also echo out the directory of the fullscreen size picture and can choose what is the max size (if they are enough big to reach it) of all pictures.

So, I will need that when we click on the picture, that it enlarge it with a fullscreen gallery over the page that darken what is behind, a bit like when we want to enlarge pictures in facebook. It will only use the images with a class of "image_list_plante" and it will use my echoed link to the fullscreen image for each images (maybe this link could be echoed in an invisible div). Also, I will echo (in the invisible div) a boolean which decide if you can right click on the picture or not. I will even echo text that will be placed under or over the picture. The invisible div will be inside each "image_liste_plante" divs and after or before the picture. I can put classes to these invisibles divs if needed, etc...

How do I do that ? hard question. I know nothing about JavaScript and jQuery and others... The only things I know, it's HTML/CSS/PHP/PDO.

Do a plugin that I can modify and adapt is already built ? for the moment, I will only put a link to a .jpg file on the pictures.... but it can't stay like this too long.

*Will need to work in IE7 and other browsers too.

Answer 1

Finally, i used a plugin called "colorbox". It opens an iframe over the page according to it's link. The page in the iframe know which plant's images to show by using the $_GET vars from the generated link. In this iframe, i needed to code a secure database connection defined by the $_GET elements. it counts the nuber of pictures, paginate them and everything. Thanks to myself !