i am trying to add lightbox widget to my site but its not working NEED HELP

Report · Nov 13, 2012

i can create the light box widget as a new page but when i paste the codes into the actual site it will not work and the images will not enlarge

what or where did i go wrong. This is all the codes for the site including the lightbox widget. i can use all the help i can get even if some one or anyone

can show me the corrections i need to fix that would be great i am using dreamweaver cs6 incase you need to know...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>MachoMan Madness</title>

</map>

<!--

.index{

margin:0px;

padding:0px;

border:0px;

background-image:url(back.jpg);

background-repeat:repeat-x;

background-color: #f5f5f5;

}

h1{

margin:0px;

padding:15px;

background-color:#222;

font-family: Verdana, Geneva, sans-serif;

font-size: 20px;

line-height: 25px;

color: #c8c8c8;

letter-spacing:-1px;

}

h2{

margin:0px;

padding:10px;

background-color:#333;

font-family: Verdana, Geneva, sans-serif;

font-size: 14px;

line-height: 15px;

color: #c8c8c8;

letter-spacing:-1px;

}

p {

padding:3px;

padding-top:0px;

font-family: Verdana, Geneva, sans-serif;

font-size: 13px;

line-height: 20px;

color: #777;

text-align:justify;

}

b, strong {color: #7fa0af;}

em {color: #555;}

u {color: #555;}

a:link, a:visited, a:active {text-decoration:none;color: #ada295;}

a:hover {text-decoration:none;color:#c8c8c8;}

-->

</style>

<title>Lightbox Gallery : grey</title>

.lbGallery {

/*gallery container settings*/

background-color: #666666;

padding-left: 20px;

padding-top: 20px;

padding-right: 20px;

padding-bottom: 20px;

width: 540px;

height: auto;

text-align:left;

box-shadow: 10px 10px 10px black;

border-radius: 20px;

margin-left:auto;

margin-right:auto;

}

.lbGallery ul { list-style: none; margin:0;padding:0; }

.lbGallery ul li { display: inline;margin:0;padding:0; }

.lbGallery ul li a{text-decoration:none;}

.lbGallery ul li a img {

/*border color, width and margin for the images*/

border-color: #ffffff;

border-left-width: 10px;

border-top-width: 10px;

border-right-width: 10px;

border-bottom-width: 20px;

margin-left:5px;

margin-right:5px;

margin-top:5px;

margin-bottom:5px:

}

.lbGallery ul li a:hover img {

/*background color on hover*/

border-color: #cccccc;

border-left-width: 10px;

border-top-width: 10px;

border-right-width: 10px;

border-bottom-width: 20px;

}

#lightbox-container-image-box {

border-top: 2px solid #ffffff;

border-right: 2px solid #ffffff;

border-bottom: 2px solid #ffffff;

border-left: 2px solid #ffffff;

}

#lightbox-container-image-data-box {

border-top: 0px;

border-right: 2px solid #ffffff;

border-bottom: 2px solid #ffffff;

border-left: 2px solid #ffffff;

}

</style>

</head>

<tr>

</tr>

<tr>

</div>

</div></div></div></div>

</tr>

<tr>

</tr>

</table>

<tr>

<ul>

<li><a target=main href="#" rel="ddsubmenu2">Biography</a></li>

<li><a target=main href="#" rel="ddsubmenu4">Gallery</a></li>

<li><a target=main href="#">Videos</a></li>

<li><a target=main href="#">Memorial Page</a></li>

<li><a target=main href="#">Wallpaper</a></li>

<li><a target=main href="#">Contact</a></li>

</ul>

</div>

ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")

</script>

<li><a target=main href="randy savage bio.html">Randy Savage Bio</a></li>

<li><a target=main href="Randy facts 101.html">Randy's Facts 101</a></li>

<li><a target=main href="his early career.html">His Early Career</a></li>

<li><a target=main href="Randys career in wwf.html">Randy's Career in the WWF</a></li>

<li><a target=main href="randys career wcw.html">Randy's Career in WCW</a></li>

<li><a target=main href="#">The Mega Powers </a>

<ul>

<li><a target=main href="mega powers bio.html">Mega powers Bio</a></li>

<li><a target=main href="mega powers facts 101.html">Mega Powers Facts 101</a></li>

</ul>

</li>

<li><a target=main href="pm from randy.html">PM to fans & Elizabeth</a></li>

<li><a target=main href="#">Randy's Radio interview</a></li>

<li><a target=main href="#">His Death</a></li>

</ul>

<li><a target=main href="#">Elizabeth Hulette</a>

<ul>

<li><a target=main href="#">Elizabeth Bio</a></li>

<li><a target=main href="#">Elizabeth Facts 101</a></li>

<li><a target=main href="#">Her Career in the WWF</a></li>

<li><a target=main href="#">Her Career in WCW</a></li>

<li><a target=main href="#">Later Life</a></li>

<li><a target=main href="#">Farewell to a Princess</a></li>

<li><a target=main href="#">Elizabeth's Radio Interview</a></li>

<li><a target=main href="#">Elizabeth Death</a></li>

</ul>

</li>

<li><a target=main href="#">Sherri Martel</a></li>

<li><a target=main href="#">Gorgeous George</a></li>

<li><a target=main href="#">Team Madness</a></li>

</ul>

<li><a target=main href="#">Early Years</a></li>

<li><a target=main href="#">ICW Gallery</a></li>

<li><a target=main href="#">WWF Gallery</a></li>

<li><a target=main href="#">WCW Gallery</a></li>

<li><a target=main href="#">NWO Gallery</a></li>

</ul>

</center>

</td>

</tr>

</table>

<tr>

<td>

<h1>Early Years Gallery</h1>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</ul>

</div>

$(function(){

$('#gallery a').lightBox({

imageLoading: 'images/lightbox/lightbox-ico-loading.gif', // (string) Path and the name of the loading icon

imageBtnPrev: 'images/lightbox/lightbox-btn-prev.gif', // (string) Path and the name of the prev button image

imageBtnNext: 'images/lightbox/lightbox-btn-next.gif', // (string) Path and the name of the next button image

imageBtnClose: 'images/lightbox/lightbox-btn-close.gif', // (string) Path and the name of the close btn

imageBlank: 'images/lightbox/lightbox-blank.gif', // (string) Path and the name of a blank image (one pixel)

fixedNavigation: true, // (boolean) Boolean that informs if the navigation (next and prev button) will be fixed or not in the interface.

containerResizeSpeed: 400, // Specify the resize duration of container image. These number are miliseconds. 400 is default.

overlayBgColor: "#cccccc", // (string) Background color to overlay; inform a hexadecimal value like: #RRGGBB. Where RR, GG, and BB are the hexadecimal values for the red, green, and blue values of the color.

overlayOpacity: .6, // (integer) Opacity value to overlay; inform: 0.X. Where X are number from 0 to 9

txtImage: 'Image', //Default text of image

txtOf: 'of'

});

</script>

</p>

</td>

</tr>

</table>

<tr>

<h2>Site Disclaimer</h2>

<p><strong>Macho-madness</strong> is in no way in contact with World Wrestling Entertainment. All photos are copyright to World Wrestling Entertainment or their respective owners and is being used under the fair copyright of Law 107.</p>

</div></td>

<h2>Offical Links</h2>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

</div></td><td width="29%" valign="top">

<h2>About Us</h2>

<p>Macho-madness.net is the place for all things Randy Savage and is dedicated to the "Memories of Randy Savage." We hope you'll take some time to look around and relive some classic moment's from Randy's long time career, and Enjoy!</p>

</td></tr></table></div>

</body>

</html>

Report · Nov 14, 2012

i just uploaded give it 5 mins

Report · Nov 14, 2012

Nope, still see the same broken css in lines 14-16.

Are you sure you uploaded to the right location?

Report · Nov 14, 2012

i just realized my mistake the right one should be up now

Report · Nov 14, 2012

I'm sorry, that is not correct.

It looks like you also deleted the opening style tag to place it there.

Change...

#table_background { background-image:url(machoslider/machoslider/11_2x2.jpg);
}
<!--

.index{

to

<style>
<!--

#table_background {

background-image:url(machoslider/machoslider/11_2x2.jpg);

}

.index{

Then also be sure to look into all of the broken links in your .css and script <head> links that I posted above.

Report · Nov 14, 2012

is it best to just upload all the files for maybe a better result

Report · Nov 14, 2012

Yep, those external files need to be uploaded or the page will never look the way it is supposed to. The .css files especially need to be uploaded or your unordered list menu will always be bullet points, css is what controls the look of that menu.

Report · Nov 14, 2012

ill do it now

Report · Nov 14, 2012

do these need to be in the style tags

Report · Nov 14, 2012

The external css and javascript files?

No, absolutely not. The style tags you are using are for embedded css, there shouldn't be anything other than css between them.

You already have all of the links in your head section (post #22 above). The physical files those links go to just need to be uploaded to their given locations on the server.

You will have three folders named: css, ddlevelfiles and scripts. Inside those folders are all the css and javascript files being called by your external stylesheet and javascript links. If you upload the folders, all of the files within them will be uploaded and the links in your page "should" start using them correctly.

Report · Nov 14, 2012

Don't forget to complete the change from post #28 above. I'm still seeing the broken css and missing <style> tag.

Report · Nov 14, 2012

oh i see ok there uploading now they might take a bit

Adobe Community

i am trying to add lightbox widget to my site but its not working NEED HELP

1 Correct answer