How to load content into lightbox-like overlay

Question

I am making a gallery which loads in the images with php and mysql. Now I'm trying to incorporate a lightbox-like overlay, but with specific, editable, html. So, that I can add the elements which I want displayed (image, title, description, extended description) which are loaded in via php and mysql.

I've googled a bunch of lightboxes but they weren't really what I was looking for, and in addition to that it has to be licensed so that I can use it commercially. (So I'd like to do it myself, if possible)

My current html code, loaded by php and mysql:

<div class='view view-tenth'>
<img src='".$images['orig']."' alt='".$images['name']."' />
<div class='mask'>
<h2>".$images['model']."</h2>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<a href='#' class='info'>Read More</a>
</div>
</div>

Basically, I want the overlay to load when clicked on 'read more', but with the specific title, description etc of that certain image.

But the thing is, I'm not really sure how to code this. Does anyone have suggestions on how to handle this?

-edit-
So basically what I'm looking for is a way to transfer the php data which is retrieved from my database, via -for example- the HREF link, to the overlay, so that when clicked on an image, the right information (title, description etc) is displayed.

I'm struggling with transferring the data, not with making the actual HTML overlay. Hope that clears everything up.

-edit 2-
Got the colorbox jquery working... http://imandragrafie.nl/demo/ontwerp_test.php But now I need the info loaded into the box :)

No fancybox please, I can't use fancy box for commercial websites.

Answer 1

You can save your respective data in json and can show up it while clicking on read more as below:

Below is small sample code in which I have data in jsonObj var and store respective data in var html element and then I have console.log(html) to show that data. you can modify the code with your requirement to get the data from database.

HTML Code:

<div class='view view-tenth'>
    <img src='' alt='' width="25" height="25" />
    <div class='mask'>
        <h2>".$images['model']."</h2>
        <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
        <a href='#' class='info' data-value="img1">Read More</a>
    </div>
    <img src='' alt='' width="25" height="25" />
    <div class='mask'>
        <h2>".$images['model']."</h2>
        <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
        <a href='#' class='info' data-value="img2">Read More</a>
    </div>
    <img src='' alt='' width="25" height="25" />
    <div class='mask'>
        <h2>".$images['model']."</h2>
        <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
        <a href='#' class='info' data-value="img3">Read More</a>
    </div>
</div>

jQuery Code:

var jsonObj = {
    "img1":{
        "id": "img1",
        "image": "path/to/image1.jpg",
        "title": "This is title 1",
        "desc": "A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart."
    },
    "img2":{
        "id": "img2",
        "image": "path/to/image2.jpg",
        "title": "This is title 2",
        "desc": "A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart."
    },
    "img3":{
        "id": "img3",
        "image": "path/to/image3.jpg",
        "title": "This is title 3",
        "desc": "A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart."
    }
}
$(function(){
    $(".info").on("click", function(){
        var val = $(this).data("value"),
            html = "";

        for(var i in jsonObj){
            if(jsonObj[i].id == val){
                html += "jsonObj.img1.id = " + jsonObj[i].id + "\n";
                html += "jsonObj.img1.image = " + jsonObj[i].image + "\n";
                html += "jsonObj.img1.title = " + jsonObj[i].title + "\n";
                html += "jsonObj.img1.desc = " + jsonObj[i].desc + "\n";
            }
        }
        console.log(html);
    });
});

You can pass this html variable as data in lightbox window.

Hope this helps!