Lightbox.JS
Hi ya
Can anyone help me with lightbox. i have downlaoded all the
files for v2 but am not sure where to put the code. I have tried
following the guide but it aint working.
Can anyone do some more step by step instructions on exactly
what to do and change,
Thanks
matt
Try Fancybox instead.
http://fancybox.net/
See Primer for using jQuery Plugins
http://alt-web.blogspot.com/2012/11/primer-for-using-jquery-plug-ins.html
Nancy O.
Similar Messages
-
Lightbox and datepicker don't work togethor
Hi, I have,or had, datepicker working on my website. Once I added lightbox2 to my site my datepicker stopped working. If I comment out the links to lightbox2 then my date picker workes. Thanks in advance for any help.
Here is some code.
=======================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- TemplateInfo codeOutsideHTMLIsLocked="true" -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<!--set variable and echo value in the title tags-->
<title class= "header2">Keynote Speakers, Sports Celebrities and Emcee's | EMJ Marketing <?php $title="The Right Keynote Speakers, Emcee's and Sports Celebrities for your event" ?> </title>
<!--<title class="header2">"Welcome"</title>-->
<!-- TemplateEndEditable -->
<link href="../NewEMJ.css" rel="stylesheet" type="text/css" /><!--[if lte IE 7]>
<style>
.content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */
ul.nav a { zoom: 1; } /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */
</style>
<![endif]-->
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryValidationSelect.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<script src="../jquery-ui-1.7.2/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="../jquery-ui-1.7.2/js/jquery-ui-1.7.2.min.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="../SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<link href="../SpryAssets/SpryValidationSelect.css" rel="stylesheet" type="text/css" />
<link href="../SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
<!-- DatePicker -->
<link href="../jquery-ui-1.7.2/css/base/ui.core.css" rel="stylesheet" type="text/css" />
<link href="../jquery-ui-1.7.2/css/base/ui.datepicker.css" rel="stylesheet" type="text/css" />
<link href="../jquery-ui-1.7.2/css/base/ui.theme.css" rel="stylesheet" type="text/css" />
<link href="../jquery-ui-1.7.2/css/base/ui.datepicker.images.css" rel="stylesheet" type="text/css" />
<!--lightbox2 -->
<script type="text/javascript" src="../lightbox2/prototype.js"></script>
<script type="text/javascript" src="../lightbox2/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="../lightbox2/lightbox.js"></script>
<link rel="stylesheet" href="../lightbox2/lightbox.css" type="text/css" media="screen" />
<style type="text/css">
table {
width: 896px;
color: #D6BD38;
background-repeat: no-repeat;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
body {
background-color: #000;
a:visited {
color: #D6BD38;
a:link {
color: #D6BD38;
</style>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-24112472-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
</script>
<style type="text/css">
/* BeginOAWidget_Instance_2137022: #datepicker */
#datepicker .ui-widget {
font-family: inherit;
#datepicker .ui-datepicker {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
#datepicker .ui-datepicker-title {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: .8em;
color: #000000;
font-weight: normal;
line-height: 1.8em;
#datepicker .ui-state-default, .ui-widget-content .ui-state-default {
border-color: #d6bd38;
background-color: #d6bd38;
color: #F7DA3D;
#datepicker .ui-state-default, .ui-state-default a {
color: #F7DA3D;
#datepicker .ui-state-highlight, .ui-widget-content .ui-state-highlight {
border-color:transparent;
background-color:transparent;
color:#F7DA3D;
#datepicker .ui-state-active, .ui-widget-content .ui-state-active {
border-color: #cccccc;
background-color: #cccccc;
color: #F7DA3D;
#datepicker .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus
border-color: #666666;
background-color: #666666;
color: #000;
#datepicker .ui-widget-header
border-color: #d6bd38;
background-color: #000000;
border-width: 1px;
/* Text attributes for the Days of Week Text */
#datepicker .ui-datepicker table th
font-size: .8em;
color: #d6bd38;
font-weight: bold;
/* EndOAWidget_Instance_2137022 */
</style>
<script type="text/xml">
<!--
<oa:widgets>
<oa:widget wid="2137022" binding="#datepicker" />
</oa:widgets>
-->
</script>
</head>
=================================
Thanks winrolCheck this link should work for you
http://api.jquery.com/jQuery.noConflict/ -
Lightbox (jQuery Lightbox Evolution) made in Adobe Edge, doesn´t work in Adobe Muse (oam file)
Hi!, I got a problem that I can´t fix it, or I don´t know how to do it in Adobe Muse.
First I have the Jquery Lightbox Evolution ready to do it in Adobe Edge.
I could work the lightbox in Edge perfectly doing this:
1. I added the JS files of the Jquery Lightbox Evolution into EDGE :
2. I wrote this code in STAGE - COMPOSITIONREADY:
yepnope({load: "js/lightbox/themes/classic/jquery.lightbox.css",complete: function() {}});
3. I wrote this CLICK code into the blue box animation;
{$.lightbox("images/4.jpg");return false;};
4. Now, if I do a Preview, and if I click into the blue box animation, appears the Jquery Lightbox Evolution, like I want:
5. Perfect, I publish the project like an Animate Deployment Package (.oam) to import this into Muse.
6. Now the problems begins, I import the Edge animation into my Muse project, but when I see the preview of my page, the lightbox doesn´t work, Muse don´t recognize the lightbox CSS file because I see something like that:
The blue box animation work perfectly into Muse!, but when I click on it and when it should appear the Jquery Lightbox, happens that problem, Muse don´t recognize the CSS file and the "lightbox" appears INTO the box animation, like if I put a "_self" code.
Really I don´t know how to fix that, should import the CSS file into Muse? should write a code into Page Properties- Metadata?, write a code inserting a HTML?, change some code in Adobe Edge?
Thanks!!!!I´m sorry, but any ideas how to fix that?
-
I am trying to add a button inside Lightbox to link to a PDF i created and the link name would have [PDF Version] so when the button is clciked it would open a new window that would have the PDF in it.
What i am trying to do as an overall objective is to create a lighbox style menu for the Website i am creating so when the Breakfast link is clicked on it opens a Lightbox group of images. Now i have already gotten Lightbox up i just need to put a link or new button linking to a PDF of the same page but something people can download i would prefer to have a Icon style custome button in the lower center of the lightbox kind of like this
http://i1114.photobucket.com/albums/k528/jeepsguy/WildBoar_Sample.jpg
The website i am working on is
http://creationsmh.com/
that is an old version of it, but when u hover over the menu button u see breakfast lunch and drink links when each is clicked on right now they open up a Lightbox gallery with the abover format.
Please help?Hello Kevin
Two ideas come into my mind:
(1) You have not selected any node in your ALV tree yet the toolbar function expects at least (exactly?) one node to be selected (NOTE: You may have selected an ITEM but not the node)
(2) Perhaps you have used NODE_SELECTION_MODE = ..._MULTIPLE in the CONSTRUCTOR method and the control expects NODE_SEL_MODE_SINGLE
Regards
Uwe -
I am trying to add lightbox widget to my site but its not working NEED HELP
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 name="11_1x1">
<area shape="rect" coords="474,138,578,150" href="http://macho-madness.net" alt="">
<area shape="rect" coords="606,136,712,150" href="mailto:[email protected]" alt="">
<area shape="rect" coords="737,136,835,152" href="http://daxstudios.net" alt="">
</map>
<style type="text/css">
<!--
.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Lightbox Gallery : grey</title>
<script type='text/javascript' src='scripts/jquery.js'></script>
<script type='text/javascript' src='scripts/lightbox.js'></script>
<link type='text/css' href='css/lightbox.css' rel='stylesheet'/>
<link type='text/css' href='css/sample_lightbox_layout.css' rel='stylesheet'/>
<style type="text/css">
.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>
<body class="index">
<!-- Begin Table -->
<table border="0" cellpadding="0" cellspacing="0" width="909" align="center">
<tr>
<td rowspan="1" colspan="3" width="909" height="166">
<img name="a10" src="11_1x1.jpg" usemap="#11_1x1" width="909" height="166" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="1" colspan="1" width="54" height="320">
<img name="a11" src="11_2x1.jpg" width="54" height="320" border="0" alt="" /></td>
<td rowspan="1" colspan="1" width="796" height="320" background="11_2x2.jpg">
<link rel="stylesheet" type="text/css" href="slides/style.css" />
<style type="text/css">a#vlb{display:none}</style>
<script type="text/javascript" src="slides/jquery.js"></script>
<script type="text/javascript" src="slides/slider.js"></script>
<div id="wowslider-container1">
<div class="ws_images">
<span><img src="slides/9.jpg" alt="" title="" id="wows0"/></span>
<span><img src="slides/2.jpg" alt="" title="" id="wows1"/></span>
<span><img src="slides/3.jpg" alt="" title="" id="wows2"/></span>
<span><img src="slides/4.jpg" alt="" title="" id="wows3"/></span>
<span><img src="slides/5.jpg" alt="" title="" id="wows4"/></span>
<span><img src="slides/6.jpg" alt="" title="" id="wows5"/></span>
<span><img src="slides/7.jpg" alt="" title="" id="wows6"/></span>
<span><img src="slides/8.jpg" alt="" title="" id="wows7"/></span>
<span><img src="slides/1.jpg" alt="" title="" id="wows8"/></span>
</div>
<div class="ws_bullets"><div>
<a href="#wows0" title="">1</a>
<a href="#wows1" title="">2</a>
<a href="#wows2" title="">3</a>
<a href="#wows3" title="">4</a>
<a href="#wows4" title="">5</a>
<a href="#wows5" title="">6</a>
<a href="#wows6" title="">7</a>
<a href="#wows7" title="">8</a>
<a href="#wows8" title="">9</a>
</div></div></div></div>
<script type="text/javascript" src="slides/script.js"></script></td>
<td rowspan="1" colspan="1" width="59" height="320">
<img name="a13" src="11_2x3.jpg" width="59" height="320" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="1" colspan="3" width="909" height="63">
<img name="a14" src="11_3x1.jpg" width="909" height="63" border="0" alt="" /></td>
</tr>
</table>
<!-- End Table -->
<table width="840" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="mainlink">
<center>
<!--drop down menu start HTML-->
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-base.css" />
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-topbar.css" />
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-sidebar.css" />
<script type="text/javascript" src="ddlevelsfiles/ddlevelsmenu.js"></script>
<div id="ddtopmenubar" class="mattblackmenu">
<ul>
<li><a target=main href="index.html">Home</a></li>
<li><a target=main href="#" rel="ddsubmenu2">Biography</a></li>
<li><a target=main href="#" rel="ddsubmenu3">To Be Lead</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="#">Shop</a></li>
<li><a target=main href="#">Blog</a></li>
<li><a target=main href="#">Join Us</a></li>
<li><a target=main href="#">Contact</a></li>
</ul>
</div>
<script type="text/javascript">
ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")
</script>
<!--Biography HTML-->
<ul id="ddsubmenu2" class="ddsubmenustyle">
<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>
<!--To be Lead HTML-->
<ul id="ddsubmenu3" class="ddsubmenustyle">
<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>
<!--Photo Gallery HTML-->
<ul id="ddsubmenu4" class="ddsubmenustyle">
<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>
<!--drop down menu end HTML-->
</center>
</td>
</tr>
</table>
<br><Br>
<table width="840" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>
<!-- Start Page Content-->
<h1>Early Years Gallery</h1>
<div id="gallery" class="lbGallery">
<ul>
<li>
<a href="images/images (11).jpg" title=""><img src="images/images (11)_thumb.jpg" width="72" height="72" alt="Flower" /></a>
</li>
<li>
<a href="images/images (16).jpg" title=""><img src="images/images (16)_thumb.jpg" width="72" height="72" alt="Tree" /></a>
</li>
<li>
<a href="images/images (17).jpg" title=""><img src="images/images (17)_thumb.jpg" width="72" height="72" alt="" /></a>
</li>
<li>
<a href="images/images (18).jpg" title=""><img src="images/images (18)_thumb.jpg" width="72" height="72" alt="" /></a>
</li>
<li>
<a href="images/images (19).jpg" title=""><img src="images/images (19)_thumb.jpg" width="72" height="72" alt="" /></a>
</li>
<li>
<a href="images/images (20).jpg" title=""><img src="images/images (20)_thumb.jpg" width="72" height="72" alt="Flower" /></a>
</li>
<li>
<a href="images/images (22).jpg" title=""><img src="images/images (22)_thumb.jpg" width="72" height="72" alt="Tree" /></a>
</li>
<li>
<a href="images/images (23).jpg" title=""><img src="images/images (23)_thumb.jpg" width="72" height="72" alt="" /></a>
</li>
<li>
<a href="images/images (25).jpg" title=""><img src="images/images (25)_thumb.jpg" width="72" height="72" alt="" /></a>
</li>
<li>
<a href="images/images (27).jpg" title=""><img src="images/images (27)_thumb.jpg" width="72" height="72" alt="" /></a>
</li>
<li>
<a href="images/images (29).jpg" title=""><img src="images/images (29)_thumb.jpg" width="72" height="72" alt="Flower" /></a>
</li>
<li>
<a href="images/images (30).jpg" title=""><img src="images/images (30)_thumb.jpg" width="72" height="72" alt="Tree" /></a>
</li>
<li>
<a href="images/images (31).jpg" title=""><img src="images/images (31)_thumb.jpg" width="72" height="72" alt="" /></a>
</li>
<li>
<a href="images/images (32).jpg" title=""><img src="images/images (32)_thumb.jpg" width="72" height="72" alt="" /></a>
</li>
<li>
<a href="images/images.jpg" title=""><img src="images/images_thumb.jpg" width="72" height="72" alt="" /></a>
</li>
<li>
</ul>
</div>
<script type="text/javascript">
$(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>
<div align="left"></div>
</p>
<!-- End Page Content-->
</td>
</tr>
</table>
<br><br><bR>
<div style="background-color:#222;width:100%;"><bR>
<table width="870" border="0" cellspacing="10" cellpadding="0" align="center">
<tr>
<td width="35%" valign="top">
<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>
<p><font color="#000000">©macho-madness.net All right's Reserved.</font> </p>
</div></td>
<td width="35%" valign="top">
<h2>Offical Links</h2>
<div align="center">
<table width="269" border="0">
<tr>
<td width="94"><div align="center"><a href="https://www.facebook.com/TheMadnessWillNeverBeForgotten"><img src="fb logo.jpg" width="94" height="87" alt="fb logo" longdesc="http://www.macho-madness.net" /></a></div></td>
<td width="76"><div align="center"><a href="https://twitter.com/machomadnessnet"><img src="twitter logo.jpg" width="76" height="91" alt="twitter logo" longdesc="http://www.macho-madness.net" /></a></div></td>
<td width="85"><div align="center"><a href="http://pinterest.com/machomadness/"><img src="pinterest logo.jpg" width="79" height="87" alt="pin logo" longdesc="http://www.macho-madness.net" /></a></div></td>
</tr>
<tr>
<td><div align="center"><a href="https://vimeo.com/user13202435"><img src="vimeo.jpg" width="98" height="90" alt="vimeo" longdesc="http://www.macho-madness.net" /></a></div></td>
<td><div align="center"><a href="http://www.youtube.com/user/mich0679"><img src="youtube logo.jpg" width="83" height="95" alt="youtube logo" longdesc="http://www.macho-madness.net" /></a></div></td>
<td><div align="center"></div></td>
</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>i have done all repairs you have adviced but there are still 32 errors and 3 warnings.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MachoMan Madness</title>
</head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type='text/javascript' src='scripts/jquery.js'></script>
<script type='text/javascript' src='scripts/lightbox.js'></script>
<link type='text/css' href='css/lightbox.css' rel='stylesheet'/>
<link type='text/css' href='css/sample_lightbox_layout.css' rel='stylesheet'/>
<style type="text/css">
.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>
<style type="text/css">
<!--
.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></head>
<body class="index">
<!-- Begin Table -->
<table border="0" cellpadding="0" cellspacing="0" width="909" align="center">
<tr>
<td rowspan="1" colspan="3" width="909" height="166">
<img name="a10" src="11_1x1.jpg" usemap="#11_1x1" width="909" height="166" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="1" colspan="1" width="54" height="320">
<img name="a11" src="11_2x1.jpg" width="54" height="320" border="0" alt="" /></td>
<td rowspan="1" colspan="1" width="796" height="320" background="11_2x2.jpg">
<link rel="stylesheet" type="text/css" href="slides/style.css" />
<style type="text/css">a#vlb{display:none}</style>
<script type="text/javascript" src="slides/jquery.js"></script>
<script type="text/javascript" src="slides/slider.js"></script>
<div id="wowslider-container1">
<div class="ws_images">
<span><img src="slides/9.jpg" alt="" title="" id="wows0"/></span>
<span><img src="slides/2.jpg" alt="" title="" id="wows1"/></span>
<span><img src="slides/3.jpg" alt="" title="" id="wows2"/></span>
<span><img src="slides/4.jpg" alt="" title="" id="wows3"/></span>
<span><img src="slides/5.jpg" alt="" title="" id="wows4"/></span>
<span><img src="slides/6.jpg" alt="" title="" id="wows5"/></span>
<span><img src="slides/7.jpg" alt="" title="" id="wows6"/></span>
<span><img src="slides/8.jpg" alt="" title="" id="wows7"/></span>
<span><img src="slides/1.jpg" alt="" title="" id="wows8"/></span>
</div>
<div class="ws_bullets"><div>
<a href="#wows0" title="">1</a>
<a href="#wows1" title="">2</a>
<a href="#wows2" title="">3</a>
<a href="#wows3" title="">4</a>
<a href="#wows4" title="">5</a>
<a href="#wows5" title="">6</a>
<a href="#wows6" title="">7</a>
<a href="#wows7" title="">8</a>
<a href="#wows8" title="">9</a>
</div></div></div></div>
<script type="text/javascript" src="slides/script.js"></script></td>
<td rowspan="1" colspan="1" width="59" height="320">
<img name="a13" src="11_2x3.jpg" width="59" height="320" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="1" colspan="3" width="909" height="63">
<img name="a14" src="11_3x1.jpg" width="909" height="63" border="0" alt="" /></td>
</tr>
</table>
<!-- End Table -->
<table width="840" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="mainlink">
<center>
<!--drop down menu start HTML-->
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-base.css" />
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-topbar.css" />
<link rel="stylesheet" type="text/css" href="ddlevelsfiles/ddlevelsmenu-sidebar.css" />
<script type="text/javascript" src="ddlevelsfiles/ddlevelsmenu.js"></script>
<div id="ddtopmenubar" class="mattblackmenu">
<ul>
<li><a target="main" href="index.html">Home</a></li>
<li><a target="main" href="#" rel="ddsubmenu2">Biography</a></li>
<li><a target="main" href="#" rel="ddsubmenu3">To Be Lead</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="#">Blog</a></li>
<li><a target="main" href="#">Join Us</a></li>
<li><a target="main" href="#">Contact</a></li>
</ul>
</div>
<script type="text/javascript">
ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")
</script>
<!--Biography HTML-->
<ul id="ddsubmenu2" class="ddsubmenustyle">
<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>
<!--To be Lead HTML-->
<ul id="ddsubmenu3" class="ddsubmenustyle">
<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>
<!--Photo Gallery HTML-->
<ul id="ddsubmenu4" class="ddsubmenustyle">
<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>
<!--drop down menu end HTML-->
</center>
</td>
</tr>
</table>
<br/><br/>
<table width="840" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>
<!-- Start Page Content-->
</head>
<body>
<map name="11_1x1" id="logo_11_1x1">
<area shape="rect" coords="474,138,578,150" href="http://macho-madness.net" alt=""/>
<area shape="rect" coords="606,136,712,150" href="mailto:[email protected]" alt=""/>
<area shape="rect" coords="737,136,835,152" href="http://daxstudios.net" alt=""/>
</map>
<h1>Early Years Gallery</h1>
<div id="gallery" class="lbGallery">
<ul>
<li>
<a href="images/11.jpg" title=""><img src="images/11_thumb.jpg" width="72" height="72" alt="Flower" /></a>
</li>
<li>
<a href="images/16.jpg" title=""><img src="images/16_thumb.jpg" width="72" height="72" alt="Tree" /></a>
</li>
<li>
<a href="images/17.jpg" title=""><img src="images/17_thumb.jpg" width="72" height="72" alt="" /></a>
</li>
<li>
<a href="images/18.jpg" title=""><img src="images/18_thumb.jpg" width="72" height="72" alt="" /></a>
</li>
<li>
<a href="images/19.jpg" title=""><img src="images/19_thumb.jpg" width="72" height="72" alt="" /></a>
</li>
<li>
<a href="images/20.jpg" title=""><img src="images/20_thumb.jpg" width="72" height="72" alt="Flower" /></a>
</li>
<li>
<a href="images/22.jpg" title=""><img src="images/22_thumb.jpg" width="72" height="72" alt="Tree" /></a>
</li>
<li>
<a href="images/23.jpg" title=""><img src="images/23_thumb.jpg" width="72" height="72" alt="" /></a>
</li>
<li>
<a href="images/25.jpg" title=""><img src="images/25_thumb.jpg" width="72" height="72" alt="" /></a>
</li>
<li>
<a href="images/27.jpg" title=""><img src="images/27_thumb.jpg" width="72" height="72" alt="" /></a>
</li>
<li>
<a href="images/29.jpg" title=""><img src="images/29_thumb.jpg" width="72" height="72" alt="Flower" /></a>
</li>
<li>
<a href="images/30.jpg" title=""><img src="images/30_thumb.jpg" width="72" height="72" alt="Tree" /></a>
</li>
<li>
<a href="images/31.jpg" title=""><img src="images/31_thumb.jpg" width="72" height="72" alt="" /></a>
</li>
<li>
<a href="images/32.jpg" title=""><img src="images/32_thumb.jpg" width="72" height="72" alt="" /></a>
</li>
<li>
<a href="images/images.jpg" title=""><img src="images/images_thumb.jpg" width="72" height="72" alt="" /></a>
</li>
<li>
</ul>
</div>
<script type="text/javascript">
$(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>
<div align="left"></div>
</p>
<!-- End Page Content-->
</td>
</tr>
</table>
<br/><br/><br/>
<div style="background-color:#222;width:100%;"><br/>
<table width="870" border="0" cellspacing="10" cellpadding="0" align="center">
<tr>
<td width="35%" valign="top">
<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>
<p><font color="#000000">©macho-madness.net All right's Reserved.</font> </p>
</div></td>
<td width="35%" valign="top">
<h2>Offical Links</h2>
<div align="center">
<table width="269" border="0">
<tr>
<td width="94"><div align="center"><a href="https://www.facebook.com/TheMadnessWillNeverBeForgotten"><img src="fb logo.jpg" width="94" height="87" alt="fb logo" longdesc="http://www.macho-madness.net" /></a></div></td>
<td width="76"><div align="center"><a href="https://twitter.com/machomadnessnet"><img src="twitter logo.jpg" width="76" height="91" alt="twitter logo" longdesc="http://www.macho-madness.net" /></a></div></td>
<td width="85"><div align="center"><a href="http://pinterest.com/machomadness/"><img src="pinterest logo.jpg" width="79" height="87" alt="pin logo" longdesc="http://www.macho-madness.net" /></a></div></td>
</tr>
<tr>
<td><div align="center"><a href="https://vimeo.com/user13202435"><img src="vimeo.jpg" width="98" height="90" alt="vimeo" longdesc="http://www.macho-madness.net" /></a></div></td>
<td><div align="center"><a href="http://www.youtube.com/user/mich0679"><img src="youtube logo.jpg" width="83" height="95" alt="youtube logo" longdesc="http://www.macho-madness.net" /></a></div></td>
<td><div align="center"></div></td>
</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> -
Lightbox images not showing when uploaded to my website
Hello
I'm creating a new website for my photography business, and have created three 'gallery' pages which are basically just a lightbox gallery on each page with 20 images in.
I uploaded my first page, gallery1, and the associated images and went to test it and some of the thumbnail images didn't appear. I renamed the images in my 'gallery1 thumbnails' folder (which had originally been the same names as the images in gallery1) by adding 'tb' at the end of each image name and reuploaded them to my host and it resolved the problem. I uploaded gallery2 in the same way and ran into the same problem. I renamed the images again and reuploaded as I had before to fix the problem, but it didn't fix it this time. I changed the names in gallery3 thumbnails first and uploaded them and they uploaded perfectly. I went back to gallery2, and noticed that all the images I was having a problem with had a '_' character in them. I took that out, reuploaded, still not working. I've double checked everything's as it should be, reuploaded everything a couple more times for good measure, and it works on live view and when I open the file on my computer but once they're uploaded to my host it doesn't work. Can anyone shed a bit of light on this for me? Page in question in here: http://www.emmarichards.co.uk/gallery-2.html and code is here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Barnsley wedding photographer - Emma Richards Photography</title>
<style type="text/css">
<!--
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
margin: 0;
padding: 0;
color: #000;
background-image: url();
background-repeat: repeat;
margin-top: 20px;
margin-bottom: 10px;
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color:#414958;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
a:visited {
color: #4E5869;
text-decoration: underline;
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
/* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
.container {
width: 80%;
max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
min-width: 780px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
background-color: #FFF;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
/* ~~the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo~~ */
.header {
background-color: #FFFFFF;
/* ~~ This is the layout information. ~~
1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
.content {
padding: 10px 0;
font-size: 90%;
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
/* ~~ The footer ~~ */
.footer {
padding: 10px 0;
background-color: #FFFFFF;
font-size: xx-small;
color: #f08080;
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
-->
</style>
<link href="css/lightbox.css" rel="stylesheet" type="text/css" />
<link href="css/sample_lightbox_layout.css" rel="stylesheet" type="text/css" />
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/lightbox.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryWidget.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryMenu.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarKeyNavigationPlugin.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/plugins/MenuBar2/SpryMenuBarIEWorkaroundsPlugin.js" type="text/javascript"></script>
<style type="text/css">
/* BeginOAWidget_Instance_2127022: #gallery */
.lbGallery {
/*gallery container settings*/
background-color: #ffffff;
padding-left: 20px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
width: 100%;
height: auto;
text-align: center;
.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: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
margin-left:5px;
margin-right:5px;
margin-top:5px;
margin-bottom:5px:
.lbGallery ul li a:hover img {
/*background color on hover*/
border-color: #ffffff;
border-left-width: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
#lightbox-container-image-box {
border-top: 0px none #ffffff;
border-right: 0px none #ffffff;
border-bottom: 0px none #ffffff;
border-left: 0px none #ffffff;
#lightbox-container-image-data-box {
border-top: 0px;
border-right: 0px none #ffffff;
border-bottom: 0px none #ffffff;
border-left: 0px none #ffffff;
/* EndOAWidget_Instance_2127022 */
</style>
<link href="Spry-UI-1.7/css/Menu/basic/SpryMenuBasic.css" rel="stylesheet" type="text/css" />
<script type="text/xml">
<!--
<oa:widgets>
<oa:widget wid="2127022" binding="#gallery" />
<oa:widget wid="2141544" binding="#MenuBar" />
</oa:widgets>
-->
</script>
<style type="text/css">
/* BeginOAWidget_Instance_2141544: #MenuBar */
/* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
these rules, with the exception of the images used for down or right pointing arrows, which are in the file SpryMenuBasic.css
These assume the following widget classes for menu layout (set in a preset)
.MenuBar - Applies to all menubars - default is horizontal bar, all submenus are vertical - 2nd level subs and beyond are pull-right.
.MenuBarVertical - vertical main bar; all submenus are pull-right.
You can also pass in extra classnames to set your desired top level menu bar layout. Normally, these are set by using a preset.
They only apply to horizontal menu bars:
MenuBarLeftShrink - The menu bar will be horizontally 'shrinkwrapped' to be just large enough to hold its items, and left aligned
MenuBarRightShrink - Just like MenuBarLeftShrink, but right aligned
MenuBarFixedLeft - Fixed at a specified width set in the rule '.MenuBarFixedLeft', and left aligned.
MenuBarFixedCentered - - Fixed at a specified width set in the rule '.MenuBarFixedCentered',
and centered in its parent container.
MenuBarFullwidth - Grows to fill its parent container width.
In general, all rules specified in this file are prefixed by #MenuBar so they only apply to instances of the widget inserted along
with the rules. This permits use of multiple MenuBarBasic widgets on the same page with different layouts. Because of IE6 limitations,
there are a few rules where this was not possible. Those rules are so noted in comments.
#MenuBar {
background-color:#ffffff;
font-family: Arial, Helvetica, sans-serif; /* Specify fonts on on MenuBar and subMenu MenuItemContainer, so MenuItemContainer,
MenuItem, and MenuItemLabel
at a given level all use same definition for ems.
Note that this means the size is also inherited to child submenus,
so use caution in using relative sizes other than
100% on submenu fonts. */
font-weight: normal;
font-size: 16px;
font-style: normal;
padding:0;
border-color: #ffffff #ffffff #ffffff #ffffff;
border-width:0px;
border-style: none none none none;
/* Caution: because ID+class selectors do not work properly in IE6, but we want to restrict these rules to just this
widget instance, we have used string-concatenated classnames for our selectors for the layout type of the menubar
in this section. These have very low specificity, so be careful not to accidentally override them. */
.MenuBar br { /* using just a class so it has same specificity as the ".MenuBarFixedCentered br" rule bleow */
display:none;
.MenuBarLeftShrink {
float: left; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarRightShrink {
float: right; /* shrink to content, as well as float the MenuBar */
width: auto;
.MenuBarFixedLeft {
float: left;
width: 80em;
.MenuBarFixedCentered {
float: none;
width: 80em;
margin-left:auto;
margin-right:auto;
.MenuBarFixedCentered br {
clear:both;
display:block;
.MenuBarFixedCentered .SubMenu br {
display:none;
.MenuBarFullwidth {
float: left;
width: 100%;
/* Top level menubar items - these actually apply to all items, and get overridden for 1st or successive level submenus */
#MenuBar .MenuItemContainer {
padding: 0px 0px 0px 0px;
margin: 0; /* Zero out margin on the item containers. The MenuItem is the active hover area.
For most items, we have to do top or bottom padding or borders only on the MenuItem
or a child so we keep the entire submenu tiled with items.
Setting this to 0 avoids "dead spots" for hovering. */
#MenuBar .MenuItem {
padding: 0px 0px 0px 0px;
background-color:#ffffff;
border-width:1px;
border-color: #cccccc #ffffff #cccccc #ffffff;
border-style: none solid none solid;
#MenuBar .MenuItemFirst {
border-style: none none none none;
#MenuBar .MenuItemLast {
border-style: none solid none none;
#MenuBar .MenuItem .MenuItemLabel{
text-align:center;
line-height:1.4em;
color:#333333;
background-color:#ffffff;
padding: 0px 0px 0px 0px;
width: 10em;
width:auto;
.SpryIsIE6 #MenuBar .MenuItem .MenuItemLabel{
width:1em; /* Equivalent to min-width in modern browsers */
/* First level submenu items */
#MenuBar .SubMenu .MenuItem {
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 14px;
font-style: normal;
background-color:#ffffff;
padding:0px 2px 0px 0px;
border-width:1px;
border-color: #cccccc #cccccc #cccccc #cccccc;
/* Border styles are overriden by first and last items */
border-style: solid solid none solid;
#MenuBar .SubMenu .MenuItemFirst {
border-style: solid solid none solid;
#MenuBar .SubMenu .MenuItemFirst .MenuItemLabel{
padding-top: 6px;
#MenuBar .SubMenu .MenuItemLast {
border-style: solid solid solid solid;
#MenuBar .SubMenu .MenuItemLast .MenuItemLabel{
padding-bottom: 6px;
#MenuBar .SubMenu .MenuItem .MenuItemLabel{
text-align:left;
line-height:1em;
background-color:#ffffff;
color:#333333;
padding: 6px 12px 6px 5px;
width: 7em;
/* Hover states for containers, items and labels */
#MenuBar .MenuItemHover {
background-color: #ffffff;
border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuBar .MenuItemWithSubMenu.MenuItemHover .MenuItemLabel{
background-color: #ffffff; /* consider exposing this prop separately*/
color: #000000;
#MenuBar .MenuItemHover .MenuItemLabel{
background-color: #ffffff;
color: #000000;
#MenuBar .SubMenu .MenuItemHover {
background-color: #ffffff;
border-color: #cccccc #cccccc #cccccc #cccccc;
#MenuBar .SubMenu .MenuItemHover .MenuItemLabel{
background-color: #ffffff;
color: #333333;
/* Submenu properties -- First level of submenus */
#MenuBar .SubMenuVisible {
background-color: #ffffff;
min-width:0%; /* This keeps the menu from being skinnier than the parent MenuItemContainer - nice to have but not available on ie6 */
border-color: #ffffff #ffffff #ffffff #ffffff;
border-width:0px;
border-style: none none none none;
#MenuBar.MenuBar .SubMenuVisible {/* For Horizontal menubar only */
top: 100%; /* 100% is at the bottom of parent menuItemContainer */
left:0px; /* 'left' may need tuning depending upon borders or padding applied to menubar MenuItemContainer or MenuItem,
and your personal taste.
0px will left align the dropdown with the content area of the MenuItemContainer. Assuming you keep the margins 0
on MenuItemContainer and MenuItem on the parent
menubar, making this equal the sum of the MenuItemContainer & MenuItem padding-left will align
the dropdown with the left of the menu item label.*/
z-index:10;
#MenuBar.MenuBarVertical .SubMenuVisible {
top: 0px;
left:100%;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse */
/* Submenu properties -- Second level submenu and beyond - these are visible descendents of .MenuLevel1 */
#MenuBar .MenuLevel1 .SubMenuVisible {
background-color: #ffffff;
min-width:0px; /* Do not neeed to match width to parent MenuItemContainer - items will prevent total collapse*/
top: 0px; /* If desired, you can move this down a smidge to separate top item''s submenu from menubar -
that is really only needed for submenu on first item of MenuLevel1, or you can make it negative to make submenu more
vertically 'centered' on its invoking item */
left:100%; /* If you want to shift the submenu left to partially cover its invoking item, you can add a margin-left with a
negative value to this rule. Alternatively, if you use fixed-width items, you can change this left value
to use px or ems to get the offset you want. */
/* IE6 rules - you can delete these if you do not want to support IE6 */
/* A note about multiple classes in IE6.
* Some of the rules above use multiple class names on an element for selection, such as "hover" (MenuItemHover) and "has a subMenu" (MenuItemWithSubMenu),
* giving the selector '.MenuItemWithSubMenu.MenuItemHover'.
* Unfortunately IE6 does not support using mutiple classnames in a selector for an element. For a selector such as '.foo.bar.baz', IE6 ignores
* all but the final classname (here, '.baz'), and sets the specificity accordingly, counting just one of those classs as significant. To get around this
* problem, we use the plugin in SpryMenuBarIEWorkaroundsPlugin.js to generate compound classnames for IE6, such as 'MenuItemWithSubMenuHover'.
* Since there are a lot of these needed, the plugin does not generate the extra classes for modern browsers, and we use the CSS2 style mutltiple class
* syntax for that. Since IE6 both applies rules where
* it should not, and gets the specificity wrong too, we have to order rules carefully, so the rule misapplied in IE6 can be overridden.
* So, we put the multiple class rule first. IE6 will mistakenly apply this rule. We follow this with the single-class rule that it would
* mistakenly override, making sure the misinterpreted IE6 specificity is the same as the single-class selector, so the latter wins.
* We then create a copy of the multiple class rule, adding a '.SpryIsIE6' class as context, and making sure the specificity for
* the selector is high enough to beat the single-class rule in the "both classes match" case. We place the IE6 rule at the end of the
* css style block to make it easy to delete if you want to drop IE6 support.
* If you decide you do not need IE6 support, you can get rid of these, as well as the inclusion of the SpryMenuBarIEWorkaroundsPlugin.js script.
* The 'SpryIsIE6' class is placed on the HTML element by the script in SpryMenuBarIEWorkaroundsPlugin.js if the browser is Internet Explorer 6. This avoids the necessity of IE conditional comments for these rules.
.SpryIsIE6 #MenuBar .MenuBarView .MenuItemWithSubMenuHover .MenuItemLabel /* IE6 selector */{
background-color: #ffffff; /* consider exposing this prop separately*/
color: #000000;
.SpryIsIE6 #MenuBar .MenuBarView .SubMenu .MenuItemWithSubMenuHover .MenuItemLabel/* IE6 selector */{
background-color: #ffffff; /* consider exposing this prop separately*/
color: #333333;
.SpryIsIE6 #MenuBar .SubMenu .SubMenu /* IE6 selector */{
margin-left: -0px; /* Compensates for at least part of an IE6 "double padding" version of the "double margin" bug */
/* EndOAWidget_Instance_2141544 */
</style>
</head>
<body>
<div class="container">
<div class="header">
<div align="center">
<p><a href="index.html"><img src="Layout/watermark-coral-jpeg-200px.jpg" width="200" height="182" alt="wedding photgraphers barnsley" /></a></p>
<table width="500" border="0">
<tr>
<td><a href="about.html"><img src="Layout/about-c.png" width="145" height="28" alt="wedding photography barnsley" /></a></td>
<td><a href="weddings.html"><img src="Layout/weddings-c.png" width="145" height="28" alt="wedding photographer barnsley" /></a></td>
<td><a href="gallery.html"><img src="Layout/gallery-c.png" width="145" height="28" alt="wedding photographers barnsley" /></a></td>
<td><a href="pricing.html"><img src="Layout/pricing-c.png" width="145" height="28" alt="wedding photography barnsley" /></a></td>
<td><script type="text/javascript">
// BeginOAWidget_Instance_2141544: #MenuBar
var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
widgetID: "MenuBar",
widgetClass: "MenuBar MenuBarLeftShrink",
insertMenuBarBreak: true,
mainMenuShowDelay: 100,
mainMenuHideDelay: 200,
subMenuShowDelay: 200,
subMenuHideDelay: 200
// EndOAWidget_Instance_2141544
</script>
<img src="Layout/engagements-c.png" width="145" height="28" alt="barnsley wedding photographer" />
<script type="text/javascript">
// BeginOAWidget_Instance_2141544: #MenuBar
var MenuBar = new Spry.Widget.MenuBar2("#MenuBar", {
widgetID: "MenuBar",
widgetClass: "MenuBar MenuBarLeftShrink",
insertMenuBarBreak: true,
mainMenuShowDelay: 100,
mainMenuHideDelay: 200,
subMenuShowDelay: 200,
subMenuHideDelay: 200
// EndOAWidget_Instance_2141544
</script></td>
<td><a href="http://www.emmarichardsphotography.com"><img src="Layout/blog.png" width="145" height="28" alt="wedding photographer barnsley" /></a></td>
<td><a href="contact.html"><img src="Layout/contact-c.png" width="145" height="28" alt="wedding photography barnsley" /></a></td>
</tr>
</table>
<p> </p>
</div>
<!-- end .header --></div>
<div class="content">
<div align="center">
<table width="80%" border="0">
<tr>
<td><div id="gallery" class="lbGallery">
<ul>
<p><li> <a href="Images/Gallery2/Abbie and Ben 0567.jpg" title=""><img src="Images/Gallery2/Thumbnails/Abbie and Ben 0567tb.jpg" alt="wedding photographers barnsley" /></a> </li>
<li> <a href="Images/Gallery2/Laura Mal 046.jpg" title=""><img src="Images/Gallery2/Thumbnails/Laura Mal 046tb.jpg" alt="wedding photographer barnsley" /></a> </li>
<li> <a href="Images/Gallery2/img0056bw.jpg" title=""><img src="Images/Gallery2/Thumbnails/img0056bwtb.jpg" alt="wedding photographers sheffield" /></a> </li>
<li> <a href="Images/Gallery2/ka319.jpg" title=""><img src="Images/Gallery2/Thumbnails/ka319tb.jpg" alt="wedding photography barnsley" /></a> </li>
<li> <a href="Images/Gallery2/no crying.jpg" title=""><img src="Images/Gallery2/Thumbnails/no cryingtb.jpg" alt="wedding photographers barnsley" /></a> </li></p>
<p><li> <a href="Images/Gallery2/img5549.jpg" title=""><img src="Images/Gallery2/Thumbnails/img5549tb.jpg" alt="wedding photographer barnsley" /></a> </li>
<li> <a href="Images/Gallery2/jr89.jpg" title=""><img src="Images/Gallery2/Thumbnails/jr89tb.jpg" alt="wedding photography barnsley" /></a> </li>
<li> <a href="Images/Gallery2/img3239.jpg" title=""><img src="Images/Gallery2/Thumbnails/img3239tb.jpg" alt="wedding photographers barnsley" /></a> </li>
<li> <a href="Images/Gallery2/jr2.jpg" title=""><img src="Images/Gallery2/Thumbnails/jr2tb.jpg" alt="wedding photographers barnsley" /></a> </li>
<li> <a href="Images/Gallery2/sa711.jpg" title=""><img src="Images/Gallery2/Thumbnails/sa711tb.jpg" alt="" /></a> </li></p>
<p><li> <a href="Images/Gallery2/JamesRuth0056.jpg" title=""><img src="Images/Gallery2/Thumbnails/JamesRuth0056tb.jpg" alt="wedding photographers barnsley" /></a> </li>
<li> <a href="Images/Gallery2/mr mrs.jpg" title=""><img src="Images/Gallery2/Thumbnails/mr mrstb.jpg" alt="wedding photography barnsley" /></a></li>
<li><a href="Images/Gallery2/ka5.jpg" title=""><img src="Images/Gallery2/Thumbnails/ka5tb.jpg" alt="wedding photographer barnsley" /></a></li>
<li> <a href="Images/Gallery2/run.jpg" title=""><img src="Images/Gallery2/Thumbnails/runtb.jpg" alt="wedding photographers barnsley" /></a> </li>
<li> <a href="Images/Gallery2/img3440.jpg" title=""><img src="Images/Gallery2/Thumbnails/img3440tb.jpg" alt="wedding photographers barnsley" /></a> </li></p>
<p><li> <a href="Images/Gallery2/img3307.jpg" title=""><img src="Images/Gallery2/Thumbnails/img3307tb.jpg" alt="wedding photographers barnsley" /></a> </li>
<li> <a href="Images/Gallery2/centerpiece 2.jpg" title=""><img src="Images/Gallery2/Thumbnails/centerpiece 2tb.jpg" alt="wedding photographer barnsley" /></a> </li>
<li> <a href="Images/Gallery2/jr102.jpg" title=""><img src="Images/Gallery2/Thumbnails/jr102tb.jpg" alt="wedding photography barnsley" /></a> </li>
<li> <a href="Images/Gallery2/img0523.jpg" title=""><img src="Images/Gallery2/Thumbnails/img0523tb.jpg" alt="wedding photography barnsley" /></a> </li>
<li> <a href="Images/Gallery2/hug.jpg" title=""><img src="Images/Gallery2/Thumbnails/hugtb.jpg" alt="wedding photographers barnsley" /></a> </li></p>
</ul>
</div>
<script type="text/javascript">
// BeginOAWidget_Instance_2127022: #gallery
$(function(){
$('#gallery a').lightBox({
imageLoading: 'Layout/spin.gif', // (string) Path and the name of the loading icon
imageBtnPrev: 'Layout/prev.jpg', // (string) Path and the name of the prev button image
imageBtnNext: 'Layout/next.jpg', // (string) Path and the name of the next button image
imageBtnClose: 'Layout/close.png', // (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: false, // (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: "#ffffff", // (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: 0, // (integer) Opacity value to overlay; inform: 0.X. Where X are number from 0 to 9
txtImage: 'Image', //Default text of image
txtOf: 'of'
// EndOAWidget_Instance_2127022
</script><div align="center"> </div></td>
</tr>
<tr>
<td><div align="center">
<table width="100" border="0">
<tr>
<td width="50"><div align="right"><a href="gallery.html"><img src="Layout/prev2.jpg" alt="wedding photographers barnsley" width="63" height="32" /></a></div></td>
<td width="50"><a href="gallery-3.html"><img src="Layout/next2.jpg" alt="wedding photographers sheffield" width="63" height="32" /></a></td>
</tr>
</table>
</div></td>
</tr>
</table>
<p> </p>
<!-- end .content --></div>
</div>
<div class="footer">
<p align="right"><strong>07794430229 // [email protected]</strong></p>
<div align="right">
<table align="right" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
</tr>
</table>
<!-- end .footer -->
</div>
<div align="right">
<table align="right" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
</tr>
</table>
<!-- end .footer --></div>
</div>
<!-- end .container --></div>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-28715127-1']);
_gaq.push(['_setDomainName', 'emmarichards.co.uk']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
</script>
</body>
</html>
If someone could help me with my issue I'd be very greatful, it's been stumping me for hours now.
Thank you in advance for any help!!When I see code errors, I stop trying to trouble shoot because code errors account for 98% of browser rendering problems. When you clear up your orphaned tags: mismatched <p></p> and <li></li> tags, then I'll take a closer look.
PS. Being able to work with code is essential to using DW and 3rd party plugins. Without basic coding skills, you're going to be lost most of the time.
HTML & CSS Tutorials -
http://www.html.net/
http://w3schools.com/
Nancy O. -
Lightbox won't work - opens in a new page or not at all
Okay, so I am trying to get a lightbox to work for my ICT coursework (for an eportfolio) that is due in on the 26th April 2013. I have spent hours on this and have gotten nowhere and now I've resorted to asking you bright people to help ;_;
So I found this beautiful portfolio website and decided to have a go at replicating it for my coursework (since everyone in the class was using premade templates, I wanted to do something different). Here is my eBook (as an example as it hasn't and won't go live).
[IMG]http://i34.tinypic.com/29kow44.jpg[/IMG]
At the bottom I wanted to have 4 pictures side by side (one is in there already) and I have these inserted in div tags (?). Here is the code for it:
<div style="position:absolute; top:432px; left:456px; width:71px; height:72px; color: #FFF; font-family: Verdana, Geneva, sans-serif; font-size: 9px;">
</head><body onload="initLightbox()">
<div align="center" title="Change in Working Styles">
<a href="Old Working Styles large.png"
rel="lightbox"
title="Working Styles New"/>
<img src="Old Working Styles large.png"
alt=""
width="72" height="72"
border="0" class="lightbox"/></div>
</div>
Now, when I put this into my initial page, it doesn't work. It just opens up the image in a new tab. However, when I copy and paste this code into a new template, it works just fine (I mean, the lightbox shows up but the images do not because I haven't linked them in to that specific page).
All of my images are in my site root, but I can't figure out what the problem is. Here is my entire code for that particular page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Working Styles</title>
<style type="text/css">
<!--
body {
background-image: url(background%20small.png);
background-repeat: repeat-x;
color: #F5F5F5;
background-color: #161B31;
a:link {
text-decoration: none;
color: #BC2630;
a:visited {
text-decoration: none;
color: #BF2733;
.Colour .NColour {
color: #328451;
a:link {
color: #96A01E;
a:link {
color: #CAA31B;
a:link {
color: #B6232E;
a:link {
color: #D3A71A;
body div {
.Colour a {
color: #BF2532;
.Red {
color: #BF2B33;
.Red div .Colour a {
color: #D3A81F;
.Red div .Colour a {
color: #FFF;
.Red div .Colour a {
color: #CBA219;
.Green {
color: #969F15;
.Green {
color: #919E1A;
div {
.Red div {
color: #D2A61C;
.Yellow div {
color: #FFF;
.Colour a {
color: #C12733;
.Colour a {
color: #BC2632;
a:link {
color: #BF2733;
a:hover {
color: #FFF;
.Yellow div a {
color: #CFA51A;
a:hover {
color: #FFF;
.Green {
color: #92A017;
.Green a {
color: #95A31A;
a:hover {
color: #FFF;
a:hover {
color: #FFF;
a:hover {
color: #FFF;
a:hover {
color: #FFF;
a:hover {
color: #FFF;
a:hover {
.Colour {
color: #FFF;
-->
</style>
<script src="/Scripts/jquery.js" type="text/javascript"></script>
<script src="/Rainbow Portfolio/scripts/lightbox.js" type="text/javascript"></script>
<link href="/Rainbow Portfolio/css/lightbox.css" rel="stylesheet" type="text/css" />
<link href="/Rainbow Portfolio/css/sample_lightbox_layout.css" rel="stylesheet" type="text/css" />
</head>
<body link="#BA2330" alink="#FFFFFF" title="The change in Old Working Styles" onload="initLightbox()"><DIV STYLE="position:absolute; top:0px; left:199px; width:695px; height:572px; background-image: url(INFO%20PAGE.png); layer-background-image: url(INFO%20PAGE.png); border: 1px none #000000;">
<div align="left">
<p> </p>
</div>
<div align="center"></div>
<div align="center"></div>
</DIV><DIV STYLE="position:absolute; top:195px; left:346px; width:542px; height:377px; color: #FFF; font-family: Verdana, Geneva, sans-serif; font-size: small;">
<div align="center">
<p>Working Styles </p>
<p align="left">Working styles is the way someone interacts with the environment around them when working. When referring to working styles, it is commonly known to be the way someone works. For example, part time, full time, flexi working, telecommunicating etc. </p>
<p align="left"> </p>
<p align="left"> </p>
<p align="left"> </p>
</div>
<script type="text/javascript">
(function() {
('#gallery1 a').lightBox();
// EndWebWidget lightbox_gallery
</script>
</DIV><DIV STYLE="position:absolute; top:23px; left:348px; width:83px; height:72px; color: #C12733; font-size: 9px; font-family: Verdana, Geneva, sans-serif; background-image: url(Blank.png); layer-background-image: url(Blank.png); border: 1px none #000000;">
<div align="left"><span class="Colour"><span class="Colour"><a href="file:///N|/ICT/Unit 1/Rainbow Portfolio HTM/ENTERTAINMENT 1.htm">Entertainment </a></span><a href="file:///N|/ICT/Unit 1/Rainbow Portfolio HTM/DOWNLOAD S 1.htm">Download S. </a><a href="/COMMUNICATION 1.htm">Communication</a></span> <a href="file:///N|/ICT/Unit 1/Rainbow Portfolio HTM/SOCIAL N 1.htm"> Social Networks </span></a> <a href="file:///N|/ICT/Unit 1/Rainbow Portfolio HTM/REAL TIME INFO 1.htm">Real Time Info</a></span><a href="REAL TIME INFO 1.html"></a></div>
</DIV>
<p> </p>
<DIV class="Yellow" STYLE="position:absolute; top:24px; left:443px; width:89px; height:25px; color: #CFA41A; font-family: Verdana, Geneva, sans-serif; font-size: 9px;">
<div align="left">Working Styles <a href="COMMUNICATION STYLES 1.html">Communication</a> <a href="ENTERTAINMENT STYLES 1.html" class="Yellow">Entertainment</a> <a href="JOBS 1.html">Job Opportunities</a> <a href="CRIME 1.html">Crime Prevention</a></div>
</DIV>
<div align="center"></div>
<div style="position:absolute; top:24px; left:538px; width:84px; height:25px; color: #909F14; font-family: Verdana, Geneva, sans-serif; font-size: 9px;">
<div align="left" class="Green"><a href="DIVIDE 1.html">Introduction</a> <a href="FACTORS 1.html">Factors - </a><a href="IMPACTS 1.html" class="Colour"><span class="Colour"></a><a href="IMPACTS 1.html">Impacts -</a> <a href="BRIDGING 1.html" class="Colour"><span class="Colour"></a><a href="BRIDGING 1.html">Bridging the Gap</a></div>
</div>
<div style="position:absolute; top:23px; left:630px; width:90px; height:25px; color: #328551; font-family: Verdana, Geneva, sans-serif; font-size: 9px;">
<div align="left"><a href="CANDIDATE INFO.html" class="Colour"><span class="NColour">Candidate Info</span></a></div>
</div>
<div style="position:absolute; top:574px; left:393px; width:328px; height:26px; color: #FFF; font-family: Verdana, Geneva, sans-serif; font-size: 9px;">
<div align="center">Copyright (c) Leonora Golding 2013</div>
</div>
<div style="position:absolute; top:24px; left:754px; width:104px; height:37px; color: #318455; font-family: Verdana, Geneva, sans-serif; font-size: 9px;"><a href="file:///N|/ICT/Unit 1/Rainbow Portfolio HTM/INDEX.htm"><img src="Blank.png" alt="" width="107" height="39" border="0" /></a></div>
<div style="position:absolute; top:170px; left:828px; width:60px; height:25px; color: #FFF; font-family: Verdana, Geneva, sans-serif; font-size: 12px;">
<div align="left"><a href="WORKING STYLES 2.html">next</a></div>
</div>
<div style="position:absolute; top:170px; left:343px; width:60px; height:25px; color: #FFF; font-family: Verdana, Geneva, sans-serif; font-size: 12px;">
<div align="left"><a href="file:///N|/ICT/Unit 1/Rainbow Portfolio HTM/END OF TOPIC PAGE.html">previous</a></div>
</div>
<div style="position:absolute; top:429px; left:346px; width:540px; height:26px; color: #FFF; font-family: Verdana, Geneva, sans-serif; font-size: 9px;">
<div align="center"><img src="Lightbox Image BorderS.png" width="330" height="88" /></div>
</div>
<div style="position:absolute; top:432px; left:456px; width:71px; height:72px; color: #FFF; font-family: Verdana, Geneva, sans-serif; font-size: 9px;">
</head><body onload="initLightbox()">
<div align="center" title="Change in Working Styles">
<a href="Old Working Styles large.png"
rel="lightbox"
title="Working Styles New"/>
<img src="Old Working Styles large.png"
alt=""
width="72" height="72"
border="0" class="lightbox"/></div>
</div>
</body>
</html>
If someone could help me I'd be over the moon! I don't want to fail just because I cannot get a lightbox to work >_<
BTW: I am using Adobe Dreamweaver CS4This code is a big concern since it's pointing to a file:/// on your hard drive and not your local site.
<a href="file:///N|/ICT/Unit 1/Rainbow Portfolio HTM/INDEX.htm">
All your links are pretty much the same.
Are you working within a defined Local Site folder in DW? Without this critical step, DW cannot properly manage assets and links for you.
You have an image called "Old Working Styles large.png" which contains spaces. Don't use spaces in folder or filenames. You may use underscores_ or hyphens- between words but not spaces.
Change it to this: "Old-Working-Styles-large.png" or this: "Old_Working_Styles_large.png"
Nancy O. -
How can I add a button in my Lightbox container, on top of an image?
Hi guys,
I'm currently building out a reasonably advanced menu, which I've done by creating a lightbox and then placing the trigger over an image. This then fades in my menu image, and all works fine.
I then need to add a transparent rectangle (linking to a page when clicked) or menu within the lightbox container that users can click to go to another page. I can insert this rectangle into my lightbox container, but when it's placed over the image already in there it doesn't show as appearing where it should, but below it - despite it being in the right place....any ideas?Thanks, that seems to work. I'm struggling to place the lightbox at the top of the page however - when I click the trigger I want the menu image to display anchored to the top of the page, but there's always a gap as it centers the image. Help is appreciated!
-
Firefox won't allow some sites to open lightboxes or login popups.
OS: Windows 8.1 (64 bit) x64 AMD E-300 Processor
Firefox 25.0.1
I just got a new laptop and have discovered this issue: When I try to click links on some sites to open a lightbox or popup (usually for login boxes or photo slideshows) nothing happens. Absolutely nothing, no error message, no loading screen, no "busy" or "working" animations, no redirect. I've tried the same pages in the latest versions of Internet Explorer and Chrome and they work correctly. These sites work on my old laptop with the same version of Firefox and Vista SP2 32 bit and my work computer with Windows 7 64 bit.
I've tried disabling Add-Ons one by one and as a group, didn't make a difference. I've cleared the cache and cookies. I've turned by firewall and antivirus/antispyware/antimalware programs on and off.
Sites with a known issue: "View larger images" on Zillow.com, Login on Moviepilot.com, Login on doubletakedeals.com. I can't remember any others at the moment.If you use extensions (Firefox/Tools > Add-ons > Extensions) that can block content (e.g. Adblock Plus, NoScript, Flash Block, Ghostery) then make sure that such extensions aren't blocking content.
Start Firefox in <u>[[Safe Mode|Safe Mode]]</u> to check if one of the extensions (Firefox/Tools > Add-ons > Extensions) or if hardware acceleration is causing the problem (switch to the DEFAULT theme: Firefox/Tools > Add-ons > Appearance).
*Do NOT click the Reset button on the Safe Mode start window.
*https://support.mozilla.org/kb/Safe+Mode
*https://support.mozilla.org/kb/Troubleshooting+extensions+and+themes
You can inspect and manage the permissions for all domains on the <b>about:permissions</b> page or for the domain in the currently selected tab by clicking the "Site Identity Button" (globe/padlock) on the location bar and "More Information" to open "Page Info" and go to the Permissions tab.
*https://support.mozilla.org/kb/how-do-i-manage-website-permissions
*Tools > Page Info > Permissions
You can delete the permissions.sqlite file to reset all permissions.
Boot the computer in Windows Safe mode with network support (press F8 on the boot screen) as a test to see if that helps. -
How can I constrain image proportions in a BC gallery lightbox?
Hey! Ok so I have created a simple photo gallery using BC, and if you have played with the gallery option that is built into BC you will know that on the front end of the site when you click a photo your image will expand to its original dimensions in a pretty nice lightbox display...
Now my question is... Is it possible to set specific dimensions to the lightbox display? (after clicking the image)
Basically my site is for a photographer and all the pictures are huge... so it would be cool for the lightbox to automatically rescale the photos to fit the screen. Plus I would hate for my client to be forced to resize every photo she takes...
I would assume that I would need to access the lightbox.css file, but I cant seem to find that anywhere.
Maybe there is something I could write in the modulestylesheets.css file, but I am not that knowledgable to know what to put... Help?Yeah sure.
http://michaellaphotography.businesscatalyst.com/weddings.html
So yeah I am talking about the lightbox effect after clicking the thumbnail. If you have a large screen, the pictures might not extend past your screen, but for smaller devices and laptops it does.
Also if you have any advice for styling the thumbnails to be cleaner, that would be cool too. (just thought of it) -
Hi, I'm making my portfolio in Muse, and I'm using the composition widget - lightbox display. I imported all the images and then I wanted to reorganize the thumbnails - and when I do that, the order in the lightbox doesn't change and so it's not the same as the order of the thumbnails (after rearranging them). Please let me know if there is a way to fix this quickly, or do I have to do it all one more time
The order the items display in a composition widget is the front to back order of the items. You can rearrange the stacking order of the thumbnails/triggers using the Layers panel and/or the Object > Bring To Front, Send To Back, etc. menu items to adjust the order they're displayed during auto play or when clicking the next/previous buttons.
-
I have just started to use Muse for our design agency and learning how to build ourselves a new site, I have managed to create a basic lightbox which contains sliding images, what I need to do now is have a pop up window which goes into detail about the projects, what I would like is a piece of text or icon that when you roll over it and then click a separate window pops up with additional information in, once finished reading the info you can then click to close the box, any advice on how to do this?
The best way to do what you're asking is with the Composition widget. Start with the Tooltip preset, which, by default shows the info on rollover. You can change the option to show on click, which is what you're after. You can also add the close button or have the info disappear on rollout.
David -
How can I trigger a lightbox slide show with a single image using Dreamweaver?
I'm trying to build a page for a cosmetics company in which clicking on a color swatch opens a lightbox-style slide show of model shots using that color makeup. Each swatch should trigger a different slideshow. I'm using Dreamweaver (CS6), and I'm sure there must be an easy way to do this, but I haven't figured it out yet. (It would be a snap in Flash, but alas, the site needs to work on a broad range of devices).
I'd appreciate any ideas, and please make your instuction easy to follow if possible—pretend you're talking to a dog, or an eighty-six-year-old—because I may not be as experienced as I ought to be. Probably not.
Thanks in advance for any advice.
best,
wendyDW doesn't do this for you.
Get the jQuery Fancybox plugin.
See this Primer for Using jQuery Plugins
http://alt-web.blogspot.com/2012/11/primer-for-using-jquery-plug-ins.html
Nancy O. -
Is there a way to remove default lightbox related stuff from poplets in product detail page?
http://pilotpenaustralia.com.au/product-catalogue/writing-instruments/frixion-range/frixio n-ball-erasable-pen/
On above page (which is a product detail page using product large layout) I added poplets and it started to generate javascript conflicts and my dropdown stoped working. I am using mootools and jQuery in my site and if I just take out the tag for poplets out, every thing start working perfect. I also tried to take every thing out except scripts we are using for dropdown but all in vain.
I am looking for some solution like if I can have plain markup including images for popup without the default lightbox code. My plan is to add lightbox or colorbox manually so it will not have any confilict with other scripts.
I am trying to find the solution for last two days but no solution worked at all. Your help will be appericiated. Thanks a lot in advace.Thanks for your kind reply. Yes I can see number of errors. Actually my client purchased this theme and it uses some how mootools and jQuery at same time. I was only to look into product layouts. I don't know what other scripts are doing there. I know this is a mess but I am sure there should be some way to resolve it in my current scope of work. I switched all other scripts specifically the ones uses jQuery and also did not link jQuery too. But still lightbox.js (the one BC embeds) is conflicting with mootools and menu. So what the deal??? Waiting for positive feedback.
-
Help with lightbox gallery widget
Hello
I built a website for my photography business and used the lightbox gallery widget. I'm not massively HTML minded so I tend to build in design view and just tweak the HTML code.
The gallery is here: http://www.emmarichards.co.uk/gallery.html
When you click on one of the photos, it is not working properly, it just takes you to another webpage with just the image. It worked fine in the live view. I'm looking at it in IE, not sure which version but a fairly up to date one I think. I've also checked it using the Mozilla browser and having the same problem. How can I rectify this please? The pages code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Barnsley Wedding Photographer - Emma Richards</title>
<style type="text/css">
<!--
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #4E5869;
margin: 0;
padding: 0;
color: #000;
background-color: #99BADB;
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
border: none;
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color:#414958;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
a:visited {
color: #4E5869;
text-decoration: underline;
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
background-color: #FFFFFF;
/* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
.container {
width: 80%;
max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
min-width: 780px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
background: #FFF;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
/* ~~the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo~~ */
.header {
background-color: #ffffff;
/* ~~ This is the layout information. ~~
1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
.content {
padding: 10px 0;
/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol {
padding: 0 15px 15px 40px; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
/* ~~ The footer ~~ */
.footer {
padding: 10px 0;
background-color: #ffffff;
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
body,td,th {
font-family: Tahoma, Geneva, sans-serif;
-->
</style>
<script src="scripts/jquery.js" type="text/javascript"></script>
<script src="scripts/lightbox.js" type="text/javascript"></script>
<link href="css/lightbox.css" rel="stylesheet" type="text/css" />
<link href="css/sample_lightbox_layout.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* BeginOAWidget_Instance_2127022: #gallery */
.lbGallery {
/*gallery container settings*/
background-color: #ffffff;
padding-left: 180px;
padding-top: 20px;
padding-right: 180px;
padding-bottom: 20px;
width: 900px;
height: auto;
text-align:center;
.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: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
margin-left:5px;
margin-right:5px;
margin-top:5px;
margin-bottom:5px:
.lbGallery ul li a:hover img {
/*background color on hover*/
border-color: #ffffff;
border-left-width: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
#lightbox-container-image-box {
border-top: 0px none #ffffff;
border-right: 0px none #ffffff;
border-bottom: 0px none #ffffff;
border-left: 0px none #ffffff;
#lightbox-container-image-data-box {
border-top: 0px;
border-right: 0px none #ffffff;
border-bottom: 0px none #ffffff;
border-left: 0px none #ffffff;
/* EndOAWidget_Instance_2127022 */
</style>
<script type="text/xml">
<!--
<oa:widgets>
<oa:widget wid="2127022" binding="#gallery" />
</oa:widgets>
-->
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#000000" vlink="#000000" alink="#000000">
<div class="container">
<div class="header">
<div align="center">
<p><img src="1title 2.png" alt="emma richards barnsley wedding photographer" width="1144" height="368" /></p>
<p><a href="about.html"><img src="1.png" alt="about emma richards barnsley wedding photographer" width="143" height="46" border="0" /></a><a href="weddings.html"><img src="1.weddings.png" alt="weddings information barnsley photographer" width="162" height="46" border="0" /></a><a href="gallery.html"><img src="1.gallery.png" alt="barnsley wedding photographer image gallery" width="162" height="46" border="0" /></a><a href="pricing.html"><img src="1.pricing.png" alt="barnsley wedding photographer pricing information" width="162" height="46" border="0" /></a><a href="engagements.html"><img src="1.engage.png" alt="engagement photography couples shoot barnsley" width="221" height="46" border="0" /></a><a href="http://emmarichardsuk.blogspot.com"><img src="1 blgo.png" alt="emma richards wedding photography blog" width="105" height="45" border="0" /></a><a href="contact.html"><img src="1 contact.png" alt="contact emma richards" width="162" height="46" border="0" /></a></p>
</div>
<!-- end .header --></div>
<div class="content">
<div id="gallery" class="lbGallery">
<div align="center">
<ul>
<li> <a href="2.ABBIE AND KID.jpg" width="600" height="400" title=""><img src="2.ABBIE AND KID.jpg" width="150" height="100" alt="barnsley wedding photography" /></a>
<li> <a href="2.R AND M CUTTING CAKE.jpg" title=""><img src="2.R AND M CUTTING CAKE.jpg" width="150" height="100" alt="Park Inn wedding" "wath" "barnsley" "photography" /></a>
<li> <a href="alex laura 1 (5).jpg" title=""><img src="alex laura 1 (5).jpg" width="150" height="100" alt="barnsley wedding photographer" /></a>
<li> <a href="alex laura 1 (8).jpg"><img src="alex laura 1 (8).jpg" width="150" height="100" alt="whitley hall wedding" "sheffield" "barnsley wedding photographer" "reception" /></a> </li>
<li> <a href="tree closer.jpg" width="600px" height="400px" title=""><img src="tree closer.jpg" width="150" height="100" alt="" /></a> </li><br />
<li> <a href="11.jpg" width="600" height="400" title=""><img src="11.jpg" width="150" height="100" alt="barnsley wedding photography" /></a>
<li> <a href="10.jpg" title=""><img src="10.jpg" width="150" height="100" alt="barnsley wedding photography" /></a>
<li> <a href="James Ruth Church128.jpg" title=""><img src="James Ruth Church128.jpg" width="150" height="100" alt="whitley hall wedding" "sheffield" "barnsley wedding photographer" "reception" /></a>
<li> <a href="2.ABBIE GROUP.jpg"><img src="2.ABBIE GROUP.jpg" width="150" height="100" alt="barnsley wedding photographer" /></a> </li>
<li> <a href="12-5.jpg" width="600px" height="400px" title=""><img src="12-5.jpg" width="150" height="100" alt="barnsley wedding photography" /></a> </li><br />
<li> <a href="alex laura 1 (3).jpg" width="600" height="400" title=""><img src="alex laura 1 (3).jpg" width="150" height="100" alt="barnsley wedding photography" /></a>
<li> <a href="confetti crop.jpg" title=""><img src="confetti crop.jpg" width="150" height="100" alt="barnsley wedding photographer" /></a>
<li> <a href="Mark & Rachel 025.jpg" title=""><img src="Mark & Rachel 025.jpg" width="150" height="100" alt="park inn wedding" "wath" "barnsley" "photography" /></a>
<li> <a href="Abbie Ben 0336.jpg"><img src="Abbie Ben 0336.jpg" width="150" height="100" alt="barnsley wedding photographer" /></a> </li>
<li> <a href="Abbie Ben 0309.jpg" width="600px" height="400px" title=""><img src="Abbie Ben 0309.jpg" width="150" height="100" alt="barnsley wedding photographer" "first kiss" /></a> </li><br />
<li> <a href="laughing 2.png" width="600" height="400" title=""><img src="laughing 2.png" width="150" height="100" alt="whitley hall wedding" "sheffield wedding photography" /></a>
<li> <a href="2.double.jpg" title=""><img src="2.double.jpg" width="150" height="100" alt="Park Inn wedding" "wath" "barnsley" "photography" /></a>
<li> <a href="132.jpg" title=""><img src="132.jpg" width="150" height="100" alt="whitley hall wedding" "sheffield" "barnsley wedding photographer" "reception" /></a>
<li> <a href="Abbie and Ben 0621.jpg"><img src="Abbie and Ben 0621.jpg" width="150" height="100" alt="barnsley wedding photography" /></a> </li>
<li> <a href="Abbie Ben 0320.jpg" width="600px" height="400px" title=""><img src="Abbie Ben 0320.jpg" width="150" height="100" alt="barnsley wedding photography" /></a> </li><br />
<li> <a href="Abbie Ben 0011 copy.jpg" width="600" height="400" title=""><img src="Abbie Ben 0011 copy.jpg" width="150" height="100" alt="bouquet" "barnsley wedding photographer" /></a>
<li> <a href="James & Ruth0202.jpg" title=""><img src="James & Ruth0202.jpg" width="150" height="100" alt="barnsley wedding photographer" /></a>
<li> <a href="alex laura 1 (4).jpg" title=""><img src="alex laura 1 (4).jpg" width="150" height="100" alt="barnsley wedding photographer" /></a>
<li> <a href="123.jpg"><img src="123.jpg" width="150" height="100" alt="rotherham" "park inn wedding" "wath" "barnsley" "photography" /></a> </li>
<li> <a href="Mark & Rachel 311.jpg" width="600px" height="400px" title=""><img src="Mark & Rachel 311.jpg" width="150" height="100" alt= "rotherham" "Park Inn wedding" "wath" "barnsley" "photography" /></a> </li><br />
</ul>
</div>
</div>
<div align="center">
<script type="text/javascript">
// BeginOAWidget_Instance_2127022: #gallery
$(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: false, // (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: "#ffffff", // (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: 0, // (integer) Opacity value to overlay; inform: 0.X. Where X are number from 0 to 9
txtImage: 'Image', //Default text of image
txtOf: 'of'
// EndOAWidget_Instance_2127022
</script><!-- end .content --></div>
</div>
<div class="footer">
<hr />
<p align="right" class="container">07794 430 229 // [email protected]</p>
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
</html>emmarichards4 wrote:
Do I need to have the same path as in my root folder, so for example within my Public folder with my host, have a 'script's folder and then put the 'jquery.js' file within that or should that not matter?
All paths (the route from the parent file to the dependent file) are crucial.
If the path is not correct, the required file will not be found and the effect will not work.
There's no need to upload files individually and manually place them into remote folders. DW handles all file and folder paths for you if you use the Files panel.
For example, http://www.emmarichards.co.uk/scripts/lightbox.js = 404 error. The file still does not exist on the server in that location.
You should be able to click on the css and scripts folders locally, click Put and all files in those folders will be uploaded correctly. -
Why can't I reduce the height of my container box in the Lightbox Display composition widget?
I'm using the Lightbox Display composition widget, I would like to place my trigger at the bottom of my lightbox, I've reduced the height of my image frame but the container box cannot be reduced accordingly. I need to reduce the height of the container box or my triggers will be hidden behind the box. Please advice, thank you.
Hi,
When you insert the light box display, by default it has 3 slides with different components like trigger, container, target, image frame, text box, next button, preview button. You have to change the dimensions for all components for these default 3 images one by one.
Or you can delete 2 of the triggers (that will resul in deleting all of their components from the widget), then you are left with only one image and its components. Later, you can add more images to lightbox display.
Resize the components as per following video:
http://gauravr183.businesscatalyst.com/images/2013-09-26_1440.swf
The steps are, after you have added the widget on the page:
Delete the triggers.
Then select Image frame, resize it. Move close button near it (the 'X' button), resize the text box,resize next and previous buttons and move all of these near the image frame.
Then click on the image frame, till you get "Target" area selected, resize target area and container will be resized automatically.
Regards,
Gaurav Aggarwal
Maybe you are looking for
-
Hi All We appear to have a major problem. Yesterday the invoice delta from DSO to Cube failed. My colleage traced the problem to invalid characters in the PSA. However it had loaded successfully into the DSO (I dont know why cos it usually fails into
-
Having problems when exporting .swf file as an animated gif
Hi: I was wondering if anyone has ever had any issues exporting a flash file as an animated gif? When I do so, the image quality is very compromised and the animation is distorted. I know this is not very specific question, but I have never encounter
-
Macbook Pro 10.6.8 keeps freezing
This has started occuring more and more frequent... it happened maybe once a week 5 months ago, now it happens almost twice everyday. The screen will just go black, and i'll have to turn it off and turn it back on again. Once i do I get this message
-
Extraction from SAP ECC to SAP BI
What are the steps for Extraction from SAP ECC to SAP BI? Thanks.
-
What do I have to do to get itunes to recognize or acknowledge my ipod when i plug it in?
Help with Ipod touch 4 connecting to itunes please?