0

I am practising building a single page site where other pages are loaded as jquery light box when a button is clicked.

However when I click the button the lightbox effect happens however it is blank. I tried loading an external site such as google.com and that is also blank. This is the code for a html page :

<li><a href="map.html" data-lightbox="We are here" data-title="We are here"><button class="button location">Location</button></a></li>

and for an external site :

<li><a href="http://www.rte.ie" data-lightbox="history" data-width="960" data-height="600"><button class="button history">History</button></a></li>

both of these return blank lightbox.

I was using the basic jQuery lightbox from here http://lokeshdhakar.com/projects/lightbox2/ which works fine for my gallery with images.

markst33
  • 139
  • 2
  • 2
  • 11
  • can you provide a code or jsfiddle of what you've done so far, so we could check what's wrong? – Allan Empalmado Jul 03 '16 at 15:00
  • you better not be getting any console errors and not telling us about it – hanshenrik Jul 03 '16 at 15:01
  • How do you mean a js fiddle ? I am new to this. Just finished a 10 week course in web design so I am practising. This code worked on a different site I did fred but that was just for images in a gallery – markst33 Jul 03 '16 at 15:07

2 Answers2

0

It doesn't look like the project even supports external/internal websites: From the github project

You might want to use something like this: http://www.jacklmoore.com/colorbox/

thebigsnax
  • 11
  • 1
  • 3
0

You will learn the most by rolling your own lightbox - look how simple it is:

/* js/jQuery */
$(document).ready(function(){
  
$('button').click(function(){
  $('#lightbox').html('This is a lightbox').fadeIn();
});

$('#lightbox').click(function(){
  $(this).fadeOut();
});
  
}); //END document.ready
/* CSS */
#myBody{padding:120px;font-size:2rem;background:palegreen;}

#lightbox{position:absolute;top:15%;left:10%;width:80%;height:60%;font-size:5rem;color:orange;text-align:center;background:black;opacity:0.8;display:none;}
<!-- HTML -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button>Display lightbox</button>

<div id="myBody">This is my normal page content</div>

<div id="lightbox"></div>

A lightbox is just a regular DIV structure that has been styled position:absolute or position:fixed to remove it from the normal HTML flow. It is then hidden, and displayed when desired upon a button click or other detectable event (mouseover, ajax.done, etc).

Since a lightbox is just a normal div, you can stick new stuff into the lightbox/div on the fly using $('#divID').html('<tag>Your HTML here</tag>') or .append() or .text() etc.

First get your project working with a "lightbox" that is not hidden, then add display:none to the CSS for the lightbox HTML's top container e.g. <div id="lightbox"> in my example code and use the .show() / .hide() etc commands to reveal the lightbox when desired.

To inject an entire website into a lightbox -- as with a div -- add the site in an <iframe>:

/* js/jQuery */
$(document).ready(function(){
  
$('button').click(function(){
  $('#lightbox').html('<iframe src="http://google.com"></iframe>').fadeIn();
});

$('#lightbox').click(function(){
  $(this).fadeOut();
});

});//END document.ready
/* CSS */
#myBody{padding:120px;font-size:2rem;background:palegreen;}

#lightbox{position:absolute;top:15%;left:10%;width:80%;height:60%;font-size:5rem;color:orange;text-align:center;background:black;opacity:0.8;display:none;}
<!-- HTML -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button>Display lightbox</button>

<div id="myBody">This is my normal page content</div>

<div id="lightbox"></div>

But get it all working visibly, first.

cssyphus
  • 37,875
  • 18
  • 96
  • 111
  • I am trying to use your code to get the lightbox running and then play around with it. So I have added your html and saved it as index, and added your css to my master.css. But what do I do with your javascript ? I added it and saved it as lightbox.js and then referenced it inside my head tag as follows : but its not working – markst33 Jul 03 '16 at 21:25
  • (1) Ensure you have included the same script tag that loads jQuery as used in the example above (doesn't have to be exact, but this one works). (2) Until you get it working, remove the js from the lightbox.js external file and include it at bottom of your HTML (immed before `

    `), wrapped in `` (3) 2nd most important note: Inside the script tags, ensure all the js/jQuery code is wrapped in a document ready fn -- I updated the answer to do that in the answer. Once all is working, move it back into lightbox.js ext file.

     – cssyphus Jul 04 '16 at 00:51