Lightwindow

[naru]

I hope this ids the right place

I cannot get the overlay to work in lightwindow. I loaded the original lightwindow folder with no changes and the window works but not the overlay

any help would be most welcome

thanks in advance

[Snookerman]

Warning: Please include a link to the DD script in question in your post. See this thread (http://www.dynamicdrive.com/forums/showthread.php?t=6) for the proper posting format when asking a question.
Please post a link to the page on your site that contains the problematic script or attach your code so we can check it out and help you.

[naru]

sorry
www.junnocobijoux.com/test/index.html

[jscheuer1]

First you need all of the files, get the archive:

http://stickmanlabs.com/lightwindow/lightwindow.zip


Setup the head of your page as shown in the demo index.html in the archive, make sure all of the resource files are in the right folders.

Edit the body of your page to include links to your lightwindow content, follow the instructions here:

http://stickmanlabs.com/lightwindow/#howtouse


or just imitate what you find in the index.html file in the archive.

[naru]

I did exactly as you mentioned. The lightwindow is the zip file, nothing altered
as the code put in as shown on the stickman page in the head and the class="lightwindow"
The code in the page shows it.

[jscheuer1]

Demo code, notice the order in which the scripts are listed:


<link rel="stylesheet" type="text/css" href="css/lightwindow.css" />

<!-- JavaScript -->
<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/effects.js"></script>
<script type="text/javascript" src="javascript/lightwindow.js"></script>

Your page:


<script type="text/javascript" src="lightwindow/javascript/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="lightwindow/javascript/prototype.js"></script>
<script type="text/javascript" src="lightwindow/javascript/lightwindow.js"></script>
<link rel="stylesheet" href="tlightwindow/css/lightwindow.css" type="text/css" media="screen" />

The prototype script must come first.

Also, in your code you have a typo in the path of the css file:


<link rel="stylesheet" href="tlightwindow/css/lightwindow.css" type="text/css" media="screen" />

it should be:


<link rel="stylesheet" href="lightwindow/css/lightwindow.css" type="text/css" media="screen" />



There could also be other problems.

[naru]

Thanks John

will try it I thought I had copied the code from tha siter correctly.

Regards
Naru

[naru]

John
so I copied and pasted your code minus the t and the window opens in the same window not as an overlay

if I copy the code from stickman and add the folder lightwindow
lightwindow

<script type="text/javascript" src="lightwindow/javascript/prototype.js"></script>
<script type="text/javascript" src="lightwindow/javascript/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="lightwindow/javascript/lightwindow.js"></script>
<link rel="stylesheet" href="lightwindow/css/lightwindow.css" type="text/css" media="screen" />

it opens in an overlay but does not solve the problem with the background overlay?

as stated I inserted the lightwindow folder as is from the site and it would appear that my link code is correct if I look at stickman's page.

any other suggestions would be most welcome

thanks

[jscheuer1]

Your demo page still has the same problems as mentioned in my previous post. The background of the overlay is likely set by a .png configured in the lightwindow.js file. If it is missing or in the wrong folder, it will not show up.

With your current demo, it is impossible to tell where the code is expecting it to be.

A quick fix would be to use style in lightwindow.css to overcome this (addition highlighted):


#lightwindow_overlay {
/* REQUIRED */
display: none;
visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100px;
z-index: 500;
background-color: #000000!important;
opacity: .70!important;
filter: alpha(opacity=70)!important;
/* REQUIRED */
}

[naru]

Thanks again John for your patience. I am pretty much a novice at this

here is what is in the js

viewportPadding : 10,
EOLASFix : 'swf,wmv,fla,flv',
overlay : {
opacity : 0.7,
image : 'images/black.png',
presetImage : 'images/black-70.png'

I am using golive and am not sure how to insert the code into the css
it gives me the option to change the bg color but no option in the drag down menu for opacity or filter.

in the css bg box I have
background
image unchanged
url blank
color #000000
horizontal blank
vertical blank
repeat unchanged
attach unchanged

my lightwindow css has
selector #lightwindow_overlay/*/Required*/
comment blank

background_color ! black
display none
height 100px
left 0
opacity !.70 this has no symbol nin fromnt of it
postion absolute
top 0
visability hidden
width 100%
z_index 500

[jscheuer1]

You can edit the css file with a text only editor like notepad. I looked at the script, even played around with it. I couldn't get it to not show the overlay, even if I made the paths to the .png files invalid - so I doubt that they really matter, but may for some browsers. The paths in the script must be relative to the page that the script is used on. The paths in the css file are relative to the css file. Absolute paths may be used in either file whenever there is any doubt about the relative path.

Fixing the css file as I've outlined is best. It requires no image or path and should work in all modern browsers.

[Rifs]

I had the same problem for FF when I changed black.png and black-70.png to different colour. I couldn't get transparent overlay of lightwindow. Fortunately I found your advice here.

Thank you very much!

Arturs



Your demo page still has the same problems as mentioned in my previous post. The background of the overlay is likely set by a .png configured in the lightwindow.js file. If it is missing or in the wrong folder, it will not show up.

With your current demo, it is impossible to tell where the code is expecting it to be.

A quick fix would be to use style in lightwindow.css to overcome this (addition highlighted):


#lightwindow_overlay {
/* REQUIRED */
display: none;
visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100px;
z-index: 500;
background-color: #000000!important;
opacity: .70!important;
filter: alpha(opacity=70)!important;
/* REQUIRED */
}