How to upload content to a lightbox overlay

Question

I am creating a gallery that uploads images using php and mysql. Now I'm trying to enable a lightbox overlay, but with a specific, editable, html. So, I can add the elements that I want to show (image, title, description, extended description), which are loaded via php and mysql.

I was looking for a bunch of lightboxes, but they were not what I was looking for, and in addition to this, it must be licensed so that I can use it for commercial purposes. (Therefore, I would like to do it myself, if possible)

My current html code downloaded 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 I click "read next", but with a specific name, description, etc. of this particular image.

But the fact is, I'm not sure how to code this. Anyone have any suggestions on how to handle this?

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

I'm struggling with data transfer, not using actual HTML overlay. Hope that clears everything.

-edit 2 -
Got a colorbox jquery desktop ... http://imandragrafie.nl/demo/ontwerp_test.php But now I need the information loaded into the field :)

Without fancybox , please, I cannot use a fancy box for commercial sites.

Answer 1

You can save your data in json and display it by clicking read more , as shown below:

Below is a small sample code in which I have data in jsonObj var and store the corresponding data in the var html element of var html , and then I have console.log(html) to show this data. You can change the code with your requirement to get data from the 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 the lightbox window.

Hope this helps!

Answer 2

You can do this with pure css if you want. The following is an example.

http://codepen.io/fauverism/pen/pvvKKL

CSS

 /* Container */ body { font-family: Helvetica, Arial, sans-serif; } a { text-decoration: none; } .modal { /* Overlay page content */ position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 10000; /* Transition opacity on open */ -webkit-transition: opacity 500ms ease-in; -moz-transition: opacity 500ms ease-in; transition: opacity 500ms ease-in; /* Hide for now */ opacity: 0; pointer-events: none; } /* Show modal */ .modal:target { opacity: 1; pointer-events: auto; /* at time of writing (Feb 2012), pointer-events not supported by Opera or IE */ } /* Content */ .modal > div { width: 500px; background: #fff; position: relative; margin: 10% auto; /* Default minimise animation */ -webkit-animation: minimise 500ms linear; -moz-animation: minimise 500ms linear; animation: minimise 500ms linear; /* Prettify */ padding: 30px; border-radius: 7px; box-shadow: 0 3px 20px rgba(0,0,0,0.9); background: #fff; background: -moz-linear-gradient(#fff, #ccc); background: -webkit-linear-gradient(#fff, #ccc); background: -o-linear-gradient(#fff, #ccc); background: linear-gradient(#fff, #ccc); text-shadow: 0 1px 0 #fff; } /* Override animation on modal open */ .modal:target > div { -webkit-animation-name: bounce; -moz-animation-name: bounce; animation-name: bounce; } .modal h2 { font-size: 36px; padding: 0 0 20px; } @-webkit-keyframes bounce { 0% { -webkit-transform: scale3d(0.1,0.1,1); box-shadow: 0 3px 20px rgba(0,0,0,0.9); } 55% { -webkit-transform: scale3d(1.08,1.08,1); box-shadow: 0 10px 20px rgba(0,0,0,0); } 75% { -webkit-transform: scale3d(0.95,0.95,1); box-shadow: 0 0 20px rgba(0,0,0,0.9); } 100% { -webkit-transform: scale3d(1,1,1); box-shadow: 0 3px 20px rgba(0,0,0,0.9); } } @-webkit-keyframes minimise { 0% { -webkit-transform: scale3d(1,1,1); } 100% { -webkit-transform: scale3d(0.1,0.1,1); } } @-moz-keyframes bounce { 0% { -moz-transform: scale3d(0.1,0.1,1); box-shadow: 0 3px 20px rgba(0,0,0,0.9); } 55% { -moz-transform: scale3d(1.08,1.08,1); box-shadow: 0 10px 20px rgba(0,0,0,0); } 75% { -moz-transform: scale3d(0.95,0.95,1); box-shadow: 0 0 20px rgba(0,0,0,0.9); } 100% { -moz-transform: scale3d(1,1,1); box-shadow: 0 3px 20px rgba(0,0,0,0.9); } } @-moz-keyframes minimise { 0% { -moz-transform: scale3d(1,1,1); } 100% { -moz-transform: scale3d(0.1,0.1,1); } } @keyframes bounce { 0% { transform: scale3d(0.1,0.1,1); box-shadow: 0 3px 20px rgba(0,0,0,0.9); } 55% { transform: scale3d(1.08,1.08,1); box-shadow: 0 10px 20px rgba(0,0,0,0); } 75% { transform: scale3d(0.95,0.95,1); box-shadow: 0 0 20px rgba(0,0,0,0.9); } 100% { transform: scale3d(1,1,1); box-shadow: 0 3px 20px rgba(0,0,0,0.9); } } @keyframes minimise { 0% { transform: scale3d(1,1,1); } 100% { transform: scale3d(0.1,0.1,1); } } /* Modal close link */ .modal a[href="#close"] { position: absolute; right: 0; top: 0; color: transparent; } /* Reset native styles */ .modal a[href="#close"]:focus { outline: none; } /* Create close button */ .modal a[href="#close"]:after { content: 'X'; display: block; /* Position */ position: absolute; right: -10px; top: -10px; width: 1.5em; padding: 1px 1px 1px 2px; /* Style */ text-decoration: none; text-shadow: none; text-align: center; font-weight: bold; background: #000; color: #fff; border: 3px solid #fff; border-radius: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.5); } .modal a[href="#close"]:focus:after, .modal a[href="#close"]:hover:after { -webkit-transform: scale(1.1,1.1); -moz-transform: scale(1.1,1.1); transform: scale(1.1,1.1); } .modal a[href="#close"]:focus:after { outline: 1px solid #000; } /* Open modal */ a.openModal { margin: 1em auto; display: block; width: 200px; background: #ccc; text-align: center; padding: 10px; border-radius: 7px; background: #fff; background: -moz-linear-gradient(#fff, #ddd); background: -webkit-linear-gradient(#fff, #ddd); background: -o-linear-gradient(#fff, #ddd); background: linear-gradient(#fff, #ddd); text-shadow: 0 1px 0 #fff; border: 1px solid rgba(0,0,0,0.1); box-shadow: 0 1px 1px rgba(0,0,0,0.3); } a.openModal:hover, a.openModal:focus { background: -moz-linear-gradient(#fff, #ccc); background: -webkit-linear-gradient(#fff, #ccc); background: -o-linear-gradient(#fff, #ccc); background: linear-gradient(#fff, #ccc); } 

HTML

 <aside id="example" class="modal"> <div> <h2>Modal box</h2> <a href="#close" title="Close">Close</a> </div> </aside> <a href="#example" class="openModal">Open</a> 

Answer 3

After your editing, I think you need some kind of ajax to retrieve your data and put it in the overlay.

You can just do it with ajax in jquery. Something like this should work:

 $( "#doit" ).click(function() { $.ajax({ url: "/get/data.php", context: document.body }).done(function() { $( this ).addClass( "done" ); }); }); 

Read more about ajax in jquery here

Refresh after comments.

Your

 /get/data.php 

can either return a json object or (ready for display) html.

In the first case, you need to convert your data structure from javascript to html.

In the second case, you can do this from the side of php (server).

Answer 4

Here is my suggestion.

to summarize ... you have a gallery page with pictures on it. They are associated with an overlay with additional image information.

I used for something like this: http://fancybox.net/ Try the link to google maps on the page .. which looks like this:

 <a class="various iframe" href="http://maps.google.com/?output=embed&amp;f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=London+Eye,+County+Hall,+Westminster+Bridge+Road,+London,+United+Kingdom&amp;hl=lv&amp;ll=51.504155,-0.117749&amp;spn=0.00571,0.016512&amp;sll=56.879635,24.603189&amp;sspn=10.280244,33.815918&amp;vpsrc=6&amp;hq=London+Eye&amp;radius=15000&amp;t=h&amp;z=17">Google maps (iframe)</a> 

But your Overlay Link goes to another page that only shows picure info like this:

 <a class="various iframe" href="/mygallerie/picturedetails.php?id=124"><img ... ></a> 

So, in my solution, you have one PHP page that lists the images and links to them with an overlay with an identifier.

Then the second page of PHP is displayed in Overlay.

Answer 5

I would first upload everything you want to split into a lightbox, into different divs using php. Then I default all the html css for the lightbox part "display: none;". Then you can use jquery to make everything you hover right now (or click on ..etc) switch from "display: none" to "display: block".

So, we summarize. First I would encode all the content / html, with all possible views, using php. Then I will use jQuery to control the views, so you will only see the ones you want, depending on what you click / hover. I have used this method a lot and it is great for small projects.

Answer 6

What you can do: - Add a background (gray color of a transparent background) - Add a window in the middle of the screen - Place the image, title and description inside the box.

Here is a JSFiddle example: http://jsfiddle.net/4tu9Lotg/

 <body> <div class="backdrop"></div> <div class="box"> <center><h1>Title</h1></center> <img class="boximg" src="http://free-hq-wallpapers.com/wp-content/uploads/2009/07/New-York-Sunset-1920x1080.jpg"/> </div> </body> 

and

 .backdrop{ position: absolute; top: 0px; left: 0px; background-color: #000; opacity: .5; height: 100%; width: 100%; } .box{ position: absolute; background-color: white; top: 10%; left: 10%; width: 80%; height: 80%; border-radius: 13px; } .boximg { position: absolute; top: 16%; left: 2%; width: 96%; height: 80%; }