Lightbox break out
- Started
- Last post
- 11 Responses
- d_gitale
I know there are some really capable coders around here, unfortunately I am not one of them.
I was trying to use the lightbox script to showcase some photos...
In my mainpage I have a div into which I am loading my content (separate html pages), including the page from which I am trying to launch lightbox. On its own its working perfectly, but when loaded into the div, the lightbox is confined within the div... how can I make it break out, so that it scales to window size ?
Hope someone can direct me to a solution...
- fadein110
don't load the lightbox images into the div - load them in the page that holds the div, then call them from within the div.
- d_gitale0
exactly, but I dont know how - also, as I will have a large number of albums / images to be shown, I guess I would need some javascript function with variables (in the parent page), to identify the correct url of each image to be displayed in the lightbox
- mekk0
can you show this to us?
- d_gitale0
this is a link to activate the lightbox:
<a href="album1/image01.jpg" data-lightbox="group" data-title="caption">[01]</a>I was hoping there is a quick solution to open it outside of the div like adding target="_parent" or target="_top" but I guess I was just being naive
- add the overlay / lightbox code to the page holding the div (not within the code loaded into the div)fadein11
- fadein110
Basically - add all your lightbox scripts to the main HTML page. If there is overlay code anywhere on the page make sure it is in the main HTML page. Then just call the lightbox images as you are doing.
You must have the lightbox code inside the div not inside the page.- You must have added the lightbox scripts inside the div not the page is what I meant.fadein11
- d_gitale0
if I understand you right:
this link should be moved to the main page (the one holding the div)<a href="album1/image01.jpg" data-lightbox="group" data-
title="caption">[01]</a>but obviously not in its current form, but inside some javascript function which I then have to call with a link from the page that is loaded into the div...
And this javascript function should also receive some variables to generate the url of the image it is supposed to open in the overlay / lightbox, otherwise I would have to create a separate function for each image.the initial calling of the script also has to be in the <head> of the main page (the one holding the div):
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.min.js"></script>theoretically I think I understand... but practically I need to learn javascript first, at least the basics.
- d_gitale0
https://dl.dropboxusercontent.co…
this is my original attempt... everything 'lightbox' is inside the page that is loaded into the div.
if I just move the
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.min.js"></script>to the main page, it would not work at all anymore,
- fadein110
yep this is the problem as I said - the lightbox is being fully loaded within the div so it is behaving as expected.
Really wouldn't build it like this - just have includes (using PHP) if you want to load elements into the page.
Seems unnecessary complex for such a simple page.
Load everything into one page then it will all work fine.
- estetic0
Why are you building the page this way? What is your end goal?
Your ending up with terrible markup - multiple HTML/head/body etc... even though your using JS you might as well be building this thing with iframes.
- d_gitale0
I am not a programmer... I just dont know better lol
I had built the site with iframes before, which ended in the exact same problem... then I read in another forum that it should be build with divs instead...
If I get it done, it will be hosted on a domain which costs ~ 1$/month, but does not allow custom php scripts... so that is not an option either- does not have any PHP?
well just build it all one file - why are you loading stuff in - it serves no purpose - just use a HTML page all in onefadein11 - page all in one.fadein11
- this is just the bare scaffolding, obviously there will be more sections on the site, buttons loading different content into the content-divd_gitale
- content-divd_gitale
- to focus on the main problem (lightbox confined in the div) I removed everything else from the layout / structured_gitale
- does not have any PHP?
- d_gitale0
the files uploaded are just the bare bone structure of the site, I removed anything that is not related to the problem with lightbox and div, for example all the navigation menu and other content.
I appreciate your recommendations of doing it another way, but I still hope there is a solution based on my current set-up.