Home » Php » php – How to load content into lightbox-like overlay

php – How to load content into lightbox-like overlay

Posted by: admin July 12, 2020 Leave a comment

Questions:

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.

How to&Answers:

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!

Answer:

You can do this with pure css, if you like. Below is a sample.

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:

Here is my suggestion.

to summarize … you have a gallery page with pictures on it. They are linked to an overlay with more information on the pictures.

I used for something similar: http://fancybox.net/
Try the google maps link 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 which only Shows the Information for the picure like this:

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

So in my solution you have one PHP Page which list the pictures and Links them to the overlay with an id.

The second PHP Page is then shown in the Overlay.

Answer:

After your edit I think you need some kind of ajax to fetch your data and put it into the overlay.

You can simply do that 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

Update after comments.

Your

/get/data.php 

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

In the first case you have to convert your data structure with javascript into html.

In the second case you can do that on the php (server) side.

Answer:

I would first load everything that you want separated in the lightbox into different divs using php. I would then default all the html css for the lightbox part to “display: none;”. Then you can use jquery to make it so whatever you currently hover over (or click on ..etc) is switched from “display:none” to “display: block”.

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

Answer:

What you could do is:
– Add a backdrop (A greyish transparent background)
– Add a box in the middle of the screen
– Place an image, a title and a description inside the box

Here is an example on JSFiddle: 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%;
   }