Lightbox help
Hi.
I recently added the Lightbox extension to my site (it isn't
online, it is for school) and I am having problems with where it is
showing up.
When I click on the image, the Lightbox doesn't show the
image at the centre of the screen, it makes you scroll down and it
is positioned all the way to the left, and the Close button and
caption aren't even positioned the way it is supposed to be either.
I didn't change anything in the scripts. I just pasted everything
where they are supposed to be. What could be wrong with it and how
can I fix it?
Thanks
BubbleFarter wrote:
> What could be wrong with it and how can I fix it?
There is no way to tell what the problem is without you
posing the page so that others may see the problem in action.
Posting the code can *sometimes* work, but mostly is more of a pain
to work with as the forum generally screws up code by munching some
tags and adding line breaks in the middle of JavaScript lines that
ends up breaking the JavaScript. So please do find some way to post
your site online so that someone can see what problem you're
experiencing to be able to suggest a work around.
Danilo Celic
|
http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert
Similar Messages
-
Disjointed rollovers & lightbox help
Hello,
Im a newbie taking some classes & trying to get into the code but it gets frustrating at times.
I have 2 sets of rollover buttons on one page.
The first set is a bunch of categories (ads, brochures, Illustrations, etc).
The second set are thumbnails of those categories. When you roll over a thumbnail, the category button turns on, the problem is that the button will not turn off. ( I think it has something to do with the swap image restore behavior)
problem #2 (lightbox)
All of the the thumbnails will open up an image in lightbox when you click on them, I wanted to have the category buttons also start the series of lightbox images that are in that category. I have assigned the first image to the category button, that same image is also assigned to the first themnail button in that category. so when you go through the next buttons, you actually see the first image twice. I had theis fixed & then I must have accidentally deleted the code that I had working.
Ultimatley I would like to be able to have all of the thumnails also light up when you roll over the category button.
Here is a section of the code from the category buttons: I think Ive tried different placement of swap image restore on all of these, but none seem to be working.
<a href="images/portfolio_images/ad_wno1.jpg" rel="lightbox[ads]" title="my caption" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('ads','','images/btn_nav/btn_ads_on.gif',1)"><img src="images/btn_nav/btn_ads_off.gif" alt="Advertising" name="ads" width="100" height="20" border="0" id="ads" /></a>
<a href="images/portfolio_images/broc_wno0910.jpg" rel="lightbox[broc]" title="my caption" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('brochures','','images/btn_nav/btn_brochures_on.gif',1)"><img src="images/btn_nav/btn_brochures_off.gif" alt="Brochures" name="brochures" width="100" height="20" border="0" id="brochures" onmouseout="MM_swapImgRestore()" /></a>
<a href="images/portfolio_images/ill_gnatty.jpg" rel="lightbox[ill]" title="my caption" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('illustration','','images/btn_nav/btn_illustration_on.gif',1)"><img src="images/btn_nav/btn_illustration_off.gif" alt="Illustration" name="illustration" width="100" height="20" border="0" id="illustration" /></a>
and here is a section of code from the thumbnails
<a href="images/portfolio_images/ad_wno1.jpg" rel="lightbox[ads]" title="my caption" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('wno_ad1','','images/thumbs/thb_ad_wno1.jpg',1)"><img src="images/thumbs/thb_ad_wno1_bl.jpg" alt="WNO Ad1" name="wno_ad1" width="100" height="100" border="0" id="wno_ad1" onmouseover="MM_swapImage('ads','','images/btn_nav/btn_ads_on.gif',1)" onmouseout="MM_swapImgRestore()" /></a>
<a href="images/portfolio_images/ad_hf1.jpg" rel="lightbox[ads]" title="my caption" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('ad_ht1','','images/thumbs/thb_ad_hf1.jpg',1)"><img src="images/thumbs/thb_ad_hf1_bl.jpg" alt="Headfirst Ad" name="ad_ht1" width="100" height="100" border="0" id="ad_ht1" onmouseover="MM_swapImage('ads','','images/btn_nav/btn_ads_on.gif',1)" onmouseout="MM_swapImgRestore()" /></a>
<a href="images/portfolio_images/ad_mink1.jpg" rel="lightbox[ads]" title="my caption" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('mink1','','images/thumbs/thb_ad_mink1.jpg',1)"><img src="images/thumbs/thb_ad_mink1_bl.jpg" alt="Mink1 Ad" name="mink1" width="100" height="100" border="0" id="mink1" onmouseover="MM_swapImage('ads','','images/btn_nav/btn_ads_on.gif',1)" onmouseout="MM_swapImgRestore()" /></a>
if you want to see the beta site go to:
www.malleygraphics.com/webtest
user:guest
pw:getinmg
its the portfolio section
thanks .. I hope I explained my problem well enough to get some feedback.Hello Again Murray ...
Thanks for the tips, that made perfect sense, I was able to update all of my buttons to work the way I wanted them too.... and I even made the thumbs swap when rolling over the category buttons ... Thank You!
Im still having an issue with the way that lightbox is working.
I want to be able to start the series of lightbox images if you click on the category button, or the thumbnail
I cant seem to figure out how I can make it so that it wont show the image twice, I tried removing the first jpg (in the code of the category Button) but that didnt work.
Category button code:
<a href="images/portfolio_images/ad_wno1.jpg" rel="lightbox[ads]" title="my caption" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('ads','','images/btn_nav/btn_ads_on.gif','ad_wno1','','images/thumbs/thb_ad_wno1.jpg','ad_ht1','','images/thumbs/thb_ad_hf1.jpg','mink1','','images/thumbs/thb_ad_mink1.jpg',1)"><img src="images/btn_nav/btn_ads_off.gif" alt="Advertising" name="ads" width="100" height="20" border="0" id="ads" /></a>
Thumb code:
<a href="images/portfolio_images/ad_wno1.jpg" rel="lightbox[ads]" title="my caption" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('ads','','images/btn_nav/btn_ads_on.gif','ad_wno1','','images/thumbs/thb_ad_wno1.jpg',1)"><img src="images/thumbs/thb_ad_wno1_bl.jpg" alt="WNO Ad1" name="ad_wno1" width="100" height="100" border="0" id="ad_wno1" /></a>
<a href="images/portfolio_images/ad_hf1.jpg" rel="lightbox[ads]" title="my caption" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('ads','','images/btn_nav/btn_ads_on.gif','ad_ht1','','images/thumbs/thb_ad_hf1.jpg',1)"><img src="images/thumbs/thb_ad_hf1_bl.jpg" alt="Headfirst Ad" name="ad_ht1" width="100" height="100" border="0" id="ad_ht1" /></a>
<a href="images/portfolio_images/ad_mink1.jpg" rel="lightbox[ads]" title="my caption" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('ads','','images/btn_nav/btn_ads_on.gif','mink1','','images/thumbs/thb_ad_mink1.jpg',1)"><img src="images/thumbs/thb_ad_mink1_bl.jpg" alt="Mink1 Ad" name="mink1" width="100" height="100" border="0" id="mink1" /></a>
any ideas?
here is the link again if that helps
http://www.malleygraphics.com/webtest/portfolio.html
user: guest
pw: getinmg
I can post this as a separate question if you like to get the points (im not sure what that's all about) ... you did answer my swap image question. -
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> -
Help with embedding Javascript for Lightbox Photo Gallery in Muse!
Hi all:
I am fairly new to Muse and I have been having trouble finding relevant information for embedding Javascript in order to get a lightbox to work in Muse. Would anyone be able to walk me through embedding the Javascript for the Lightbox Photogallery for Picasa in Muse?
This is the code I want to use: Lightbox Photo Gallery and Slideshow for Picasa
And this is the look I am trying to accomplish within my Muse site: Cycling Around The World / January 2006 / Picasa Template by www.paulvanroekel.nl
Any help would be appreciate. Thanks much,
AlexisHi,
I have tried inserting the script that you have pasted above as HTML on my test site and it worked.
What happens is whenever you insert something as HTML, Muse by default creates a div tag and places the content within the div tag. What I have done differently is I have inserted the JS with in the <script> tag and it has inserted the Javascript in this manner,
I beleive that since this a browser re-direct script that you are using, you would like to place this in the head section and not in the body tag, however, that is certainly not possible using Muse as it does not allow access to the code it generates as a muse file.
You, can still export the pages as HTML and make the appropriate changes there before uploading to the server.
Hope that helps.
Regards, -
Help with a weird little blue line in the bottom right corner of my lightbox gallery?
I get a weird little blue line in the bottom right corner of my lightbox gallery when viewing in Safari and Chrome. Its not there when looking in Dreamweaver or Firefox. I'm going crazy! Can anyone help?
I have added to following code to sample_lightbox_layout.css
.lbGallery a {
text-decoration: none;
That fixes the dash, which is an underline. The default style for a link is an underline and since it was not defined the tag gets the default style for the underline.
Good luck. -
Please someone help! Lightbox widget not working...
I was trying to get the Lightbox widget to work on my webpage. I could not get the images to upload in the expandable box like they should. Instead of expanding out like the animated way they should, my Lighbox links kept opening in a new page and causing me to click the back button to see another image in the lightbox. I thought by deleting the lightbox widget and getting a fresh one might help but it seems to made things a lot worse. I was warned by a message that said "by deleting these settings you will not be able to get them back" and I deleted anyway thinking it was fixable. Now I can't fix it. There has to be a way for me to get the lightbox settings back into dreamweaver! Help Please!!!!!
i had the same problem, and then i noticed when in design view view, the web page that contained the lightbox on it was trying to use 5 or 6 other files, like lightbox.js and some other files. i noticed when i clicked on the little files at the top on same bar as Source Code, it gave me an error saying the file is not on my local drive and gave me the option to "get", but when i clicked on "get" nothing happened. I'm assuming you might need those extra files for lightbox to work right?
I don't know currently, and so i tried to "sign" into my widget browser, and i keep getting a timeout error. There's nothing wrong with my internet, so I don't know whats wrong with it. -
Need help with adding lightbox feature to images pulled from .js
Hello,
I've been attempting to add a lightbox to separate images (no group) in a responsive one page portfolio template. Unfortunately I'm not savy with this topic.
The template came with a hover action to apply what I would believe to be a light box image but no other documentation on how to add it to the images. I've looked everywhere.
The portfolio gallery is built in .js Here is some code The image code you see is just copied over and over to add images.
BTW - Lightbox mxp only allows you to add to an image when clicked on in the properties. These images are pulled from .js
Here is a link to the site:
http://wswdesign.com
Please help!
<ul class="portfoliofilter">
<li class="filter active" data-filter="design branding media web">All</li>
<li class="filter" data-filter="design">PRINT Design</li>
<li class="filter" data-filter="branding">Branding</li>
<li class="filter" data-filter="media">Digital Media</li>
<li class="filter" data-filter="web">WEB DESIGN</li>
<ul class="portfolio">
<li class="item design">
<div class="portfolioitem">
<img src="img/print1.jpg">
<div class="portfoliohover">
<div class="info">
<h1>+</h1>
<h5>trade show graphics</h5>
<h6><b class="light-gray">Celguard / Membrana</b></h6>
</div>
</div>
</div>
</li>You might want to correct your HTML errors first.
[Invalid] Markup Validation of http://wswdesign.com/ - W3C Markup Validator
Your document contains links to jQuery scripts. But I don't see any lightbox in there. It appears to be using jQuery's core library as well as scripts for carousel and scrolling/show & hide features.
Nancy O. -
Need a little help with Slimbox (Lightbox clone) and Spry data sets
Hello guys!
First of all let me say that I'm not a programmer in any way,
shape or form, and somehow I managed to build me a dynamic
thumbnail gallery that reads data from an XML file and displays it
on my webpage using a Spry data set and a slider widget (yay!)
This is of course only thanks to the many great examples
provided by the Adobe Spry team, and me being stubborn enough to
keep at it, even though I don't really understand what I'm doing :D
But I got to this point where I have basically everything
working, except that I can't get the Slimbox (Lightbox clone)
script to work with the Spry-generated thumbnail gallery.
From what I could understand from other threads on this
forum, is that I need to add an observer somewhere, only that I'm
not sure where and how (those threads are pretty old and the
examples aren't available anymore).
I'm sure you guys know what I'm talking about, anyway, here's
what I got so far:
http://www.riotdesign.com.ar/misc/gallery/test1.html
I have the thumbnail gallery populated from the external XML
file, a basic page navigation using the Sliding Panels widget, and
the Slimbox script which works only on the static test image.
Okay I guess that's it for now, sorry for the long post and
of course any help with this will be GREATLY appreciated :)
Thanks & bye!Kev,
Where exactly does the .evalScripts = true; text need to go?
Does it go in the href call?
<a href="ManageNotes.asp" title="Manage Notes" onClick="this.blur();
Modalbox.show(this.href, {title: 'Manage Notes', width: 575}); return false;">View your notes.</a>
Thanks for any assistance.
J Bishop -
Seriously Need Help With Lightbox Widget In Dreamweaver
Hi guys, I seriously need your help with this widget.
I'm not exactly new to Dreamweaver and I've been working on a particular website. Everything was going well until I dropped the Lightbox widget into the page.
Lightbox gallery displays, but opens images in a new window on its own. Here's an example;
http://imagesbylady.co.nz/photomike/HTML/promogallery.html
Yet, when I drop the widget into a completely separate page from the website, it works absolutely fine. Like here;
http://imagesbylady.co.nz/photomike/HTML/testing.html
I have exhausted this entire forum on the subject. I don't understand how the widget can work on a blank html page but when dropped into an already designed webpage, it breaks....!
If you need to have a look at the coding so you can help me further let me know. I've been on this for a total of 11 hours and I still can't figure out what the problem is. Seriously....i'm nearly close to tears! ;-(
If you could help me out I would be forever grateful.
Lots of Love
Lady xxHi guys, I seriously need your help with this widget.
I'm not exactly new to Dreamweaver and I've been working on a particular website. Everything was going well until I dropped the Lightbox widget into the page.
Lightbox gallery displays, but opens images in a new window on its own. Here's an example;
http://imagesbylady.co.nz/photomike/HTML/promogallery.html
Yet, when I drop the widget into a completely separate page from the website, it works absolutely fine. Like here;
http://imagesbylady.co.nz/photomike/HTML/testing.html
I have exhausted this entire forum on the subject. I don't understand how the widget can work on a blank html page but when dropped into an already designed webpage, it breaks....!
If you need to have a look at the coding so you can help me further let me know. I've been on this for a total of 11 hours and I still can't figure out what the problem is. Seriously....i'm nearly close to tears! ;-(
If you could help me out I would be forever grateful.
Lots of Love
Lady xx -
Auto/Hide with Flv playback doesn't work with javascript lightbox, need help?
Hi everyone,
i created some swf loading a flv file in a flv playback and
check on the auto/hide parameter. When i test the movie it works
very well. BUT, in my website, i put those swf files in Lightbox
(javascript computed) and when the mouse goes Over the flash video,
it shows the Skin player and when the mouse goes Out, the Skin
player stays over the video!? Why? Does someone has an idea on how
to force the auto/hide paramater in this case?
Thanks for your help
OrlenkaFound this post when searching for an answer, but didn't find much elsewhere so I'll post my quick and ugly solution here. I'm sure it can be vastly improved, but I didn't have much more than 5 minutes. Note - setting .visible to false just ended up causing the autohide transition to occur over and over, so instead I'm just temporarily moving the whole sprite offscreen.
(AS3, using CS5 component... note that 'player' is the FLVPlayback instance):
//### force 'autohide' when mouse inactive
var timer:Timer = new Timer(1500, 0);
timer.addEventListener(TimerEvent.TIMER, onTimer);
timer.start();
var skinSprite:DisplayObject;
var prevMouseX:Number;
var prevMouseY:Number;
function onTimer(e:TimerEvent):void {
//get skinSprite if we haven't already
if(!skinSprite) {
var child:DisplayObject;
for(var i:Number = 0; i < player.numChildren; i++) {
child = player.getChildAt(i);
if(i == 2) { //this is the skinSprite
skinSprite = child;
//check to see if mouse hasn't moved since last timer event
if(skinSprite && mouseX == prevMouseX && mouseY == prevMouseY) {
skinSprite.y = -1000;
prevMouseX = mouseX;
prevMouseY = mouseY;
stage.addEventListener(MouseEvent.MOUSE_MOVE, stage_onMouseMove);
function stage_onMouseMove(e:MouseEvent):void {
if(skinSprite) {
skinSprite.y = 0; -
I need help making a popup menu activate a customized lightbox for a digital magazine/publication.
I'm not much of a programmer since my experience is in animation, but I need to make a popup window link to/activate a lightbox. I did well just to get the button to make the popup work since I have no programming experience! So now, on to something a little more complex for me! A button is basically supposed to bring up a menu (which I got to work) and the menu is supposed to have links that the user can click on to open up a lightbox similar to the one that opens up on the first click of this example: http://viewer.zmags.com/publication/e9dd9178?viewType=pubPreview#/e9dd9178/1
These were the instructions I was given, but I'm not sure where to even place this code! Please help!
For example for Brides/Target this looks like this:
if (window.location.host.indexOf("brides.com") !== -1) {
document.domain = "brides.com";
$('.productImages1').click(function() {
openLightbox("http://www.target.com/p/riedel-vivant-champagne-flutes-set-of-4/-/A-10077709#prodSlot=medi um_1_1&term=200-03-1024?ref=tgt_adv_XC&afid=d_brides&cpng=2013weddingregistry&DFA=1");
trackEvent("show", {page: 19, id: 'A-10077709', name: 'riedel-vivant-champagne-flutes-set-of-4'}); //_gaq.push(['_trackEvent', 'Target Advertisment', 'Show', 'Page 19 - item 1']); });I was also given this information, but since I can't really read or write code, this means nothing to me. Is this something I can paste in the stages action panel or on the actual buttons that I'm wanting to call up the lightboxes? I like Edge because it seems to be easy and user friendly for creative/non-programmers like myself, but this is getting a bit complex for me. How can I go about this without having to code HTML5 from scratch?
In the header of the HMTL file, you'll need to add a reference to the Zmags API.
Example in Header
<script src="//secure.api.viewer.zmags.com/widgets/iframe.js" type="text/javascript"></script>
Example with Javascript section:
<script type="text/javascript"> // Opens the specified url in a lightbox, and applies the supplied css to it, if any; otherwising defaulting to the // standard width and height for the lightbox. To explicitly close the lightbox, call close() on the returned lightbox. function openLightbox(url, css) { return window.parent.parent.com.zmags.ps.widget.openLightbox(url, css || {"width": "100%", "max-width": 1010, "height": 780}); } // Shares the specified url on the given network, with optional title and image. This will automatically trigger // tracking of the shared url, so no need to do so here. function shareUrl(network, url, image, title) { return window.parent.parent.com.zmags.ps.widget.sharing.shareUrl('widget', network, url, title || 'Check out this product from Target', image); } // Tracks the logical action, e.g. "show", "overview" event, with the supplied arguments. The actual event action/label // formatting is handled by the Zavior configuration, and can have values injected, like if "args" = {page: 7, name: 'foo', id: 'bar', item: 1}, // a configured label can utilise these data like "${page}" and "${item}". function trackEvent(action, args) { if (!args) { args = {}; } return window.parent.parent.com.zmags.ps.widget.trackEvent("google_analytics", action, args); } if (window.location.host.indexOf("brides.com") !== -1) { document.domain = "brides.com"; } $('.productImages1').click(function() { openLightbox("http://www.target.com/p/giada-de-laurentiis-for-target-6-qt-cast-iron-dutch-oven/-/A-11992 552#prodSlot=medium_1_1&term=11992552?ref=tgt_adv_XC&afid=d_brides&cpng=2013weddingregistr y&DFA=1"); trackEvent("show", {page: 8, id: 'A-11992552', name: 'giada-de-laurentiis-for-target-6-qt-cast-iron-dutch-oven'}); //_gaq.push(['_trackEvent', 'Target Advertisment', 'Show', 'Page 8 - item 1']); }); $('#activateBtn').click(function() { document.getElementById('activateBtn').style.visibility = 'hidden'; //trackEvent("overview", {page: 8}); $('#big_wrapper').animate({ left: '+=100%' }, 1000, function() { //do nothing }); }); $('#deactivateBtn').click(function() { $('#big_wrapper').animate({ left: '-=100%' }, 1000, function() { document.getElementById('activateBtn').style.visibility = 'visible'; }); }); </script> -
Help creating a lightbox please
Hi everyone
I've just launched my first portfolio site and I really need some help creating a lightbox to show my work.
This is the page i need help with
www.marieparkinson.co.uk/portfolio.html
I think I'm struggling with online tutorials as I've already designed the layout of my work (and maybe i've not used the best coding either??)
What i want to happen is the user clicks on the thumbnail image and in a pop-up screen another full size image is displayed.
I've read all the tutorials etc and downloads for it, but i just don't know where to start.
I've read a lot about JQuery, is this something I need to download??
Please help!
Any comments will be really appreciated!!
Thanks!Primer for using jQuery Plug-ins:
#1 Download the Plug-in files from the source site. I'm using Fancybox in this example:
#2 Extract Zip files with WinZip or StuffIt and save to your local site folder. I prefer to keep scripts in my Scripts folder CSS files in my Styles folder but that's up to you.
#3 jQuery has 3 basic parts to it:
the core code library which you ref in your <head>
the plug-in scripts & CSS files which you ref in your <head>
the function code inside <script> tags to invoke the plug-in. I prefer to put this above closing </body> tag but again that's up to you.
EXAMPLE:
<head>
<!--Link to latest jQuery core library from the CDN-->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
</script>
<!-- links to plug-in files in your local site-->
<script type="text/javascript" src="Scripts/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="Scripts/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="Styles/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
</head>
<body>
<!--BEGIN IMAGE GALLERY -->
<div id="thumbs" class="fancybox">
<a rel="group" href="Images/big-image1.jpg" title="optional captions and description"><img src="Images/small-image1.jpg" alt="image 1" width="75" height="75" /></a>
<a rel="group" href="Images/big-image2.jpg" title="optional captions and description"><img src="Images/small-image2.jpg" alt="image 2" width="75" height="75" /></a>
<a rel="group" href="Images/big-image3.jpg" title="optional captions and description"><img src="Images/small-image3.jpg" alt="image 3" width="75" height="75" /></a>
</div>
<!--Fancybox function-->
<script type="text/javascript">
/* Apply fancybox slideshow to 'group'*/
$("a.group").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false
</script>
</body>
That's all there is to it.
Nancy O. -
Lightbox 2 problem- Could really use some help!!!
I have several galleries the last picture of each gallery repeats over and over. Caption says 10f 8 but I only have 5 pictures but last one just keeps repeating! Would really apprecite some help.
Here's source code but I'm wonderingcould it be a problem with lightbox.js or jquery-1.7.2
because I've checked this all over and over and it appears to be correct. I'm not familiar with their coding.
<!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>Truss</title>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />
<style type="text/css">
body {
background; #036;
text-align: center;
background-repeat: repeat-x;
background-image: url(Images/greenbluefade_drops.jpg);
html.body {
padding: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
height: 0px;
width: 1170px;
background-repeat: repeat-x;
position: relative;
margin-top: 25px;
#wrapper {
height: 1400px;
width: 970px;
text-align: left;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px;
#header {
background-color: #FFF;
width: 970px;
float: left;
position: relative;
margin: 0px;
height: 61px;
#logo_box {
height: 269px;
width: 366px;
position: absolute;
z-index: 500;
left: -130px;
#logoshadow {
height: 200px;
width: 230px;
z-index: 200;
margin-left: 18px;
#sidebar {
height: 1000px;
width: 245px;
position: absolute;
background-repeat: no-repeat;
background-image: url(Images/left_sidebar-copy.png);
clear: both;
left: 20px;
#nav_bar {
background-color: #244AB0;
height: 45px;
width: 708px;
float: left;
padding-left: 263px;
#side_captions {
height: 725px;
width: 225px;
padding-left: 20px;
z-index: 100;
margin-top: 0px;
padding-top: 0px;
#photobox {
background-image: url(Images/marble.jpg);
background-repeat: repeat;
float: left;
height: 1000px;
width: 0px;
padding-left: 300px;
position: relative;
#photobx2dcolumn {
background-image: url(Images/marble.jpg);
background-repeat: repeat;
float: left;
height: 1000px;
width: 310px;
#photobox_column3 {
background-image: url(Images/marble.jpg);
background-repeat: repeat;
height: 922px;
width: 330px;
float: left;
padding-top: 52px;
padding-left: 30px;
.bridge_photo_box {
background-color: #FFF;
padding: 10px;
height: 154px;
width: 250px;
.box-shadow {
height: 200px;
width: 290px;
background-image: url(Images/shadowbridgeboxes.png);
background-repeat: no-repeat;
margin-bottom: 20px;
#footer {
background-color: #1B1B1C;
clear: left;
height: 200px;
width: 720px;
padding-left: 250px;
padding-top: 1px;
margin-top: 0px;
#browser_whitebar {
background-color: #FFF;
height: 120px;
width: auto;
body,td,th {
font-family: Georgia, "Times New Roman", Times, serif;
h5 {
font-size: 42px;
color: #FFF;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
text-align: center;
line-height: normal;
vertical-align: top;
white-space: normal;
h1 {
font-size: 40px;
color: #244FB3;
h1_bridges {
color: #779788;
padding-left: 10px;
.H1bridgeheads {
color: #75958A;
margin-top: 30px;
font-size: 36px;
h2 {
font-size: 17px;
color: #666;
h3 {
font-size: 17px;
color: #000;
h4 {
font-size: 17px;
color: #000;
a {
font-size: 17px;
color: #03F;
a:visited {
color: #7A0A2F;
a:hover {
color: #FFF;
a:active {
color: #666;
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo_box"><img src="images/tensor_final_logo_website.png" alt="logo_leftinclude" width="362" height="270" /></div>
</div>
<div id="nav_bar">
<div id="nav_position">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">HOME</a> </li>
<li><a href="#">ABOUT US</a>
<ul>
<li><a href="#">FOUNDER</a></li>
<li><a href="#">MANAGEMENT</a></li>
</ul>
</li>
<li><a href="#">CAPABILITIES</a> </li>
<li><a href="#">PORTFOLIO</a>
<ul>
<li><a href="#">ARCH</a></li>
<li><a href="#">BASCULE</a></li>
<li><a href="#">BOX GIRDER</a></li>
<li><a href="#">CABLE STAYED</a></li>
<li><a href="#">PLATE GIRDER</a></li>
<li><a href="#">TRUSS</a></li>
<li><a href="#">VERTICLE LIFT</a></li>
<li><a href="#">SUSPENTION</a></li>
</ul>
</li>
<li><a href="#">AWARDS</a></li>
<li><a href="#">CONTACT </a></li>
<li><a href="#">BLOG</a></li>
</ul>
</div>
</div>
<div id="photobox">
<div id="sidebar">
<div id="logoshadow"><img src="Images/logoshadow.png" width="226" height="190" alt="logo_shadow" /></div>
<div id="side_captions">
<h2>Leading the Industry<br />
for over 50 Years
</h2>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<img src="Images/organizationsymbols.png" alt="3symbols" width="175" height="52" hspace="15" /></div>
</div>
</div>
<div id="photobx2dcolumn">
<h1 class="H1bridgeheads">Verticle Lift</h1>
<div class="box-shadow">
<div class="bridge_photo_box">
<a href="images/portfolio/verticalliftcategory/amgallery/am1.jpg"rel="lightbox[amgallery]" title="Amtrack RR over Thames River <br /><br />
(Click right side of image to forward and left for back)">
<img src="images/portfolio/verticalliftcategory/amgallery/amthumb.jpg" width="250" height="154" alt="Amtrack RR over Thames River " /></a>
<a href="images/portfolio/verticalliftcategory/amgallery/am2.jpg"rel="lightbox[amgallery]" title= "Amtrack RR over Thames River <br /><br /></a>
(Click right side of image to forward and left for back)">
<a href="images/portfolio/verticalliftcategory/amgallery/am3.jpg"rel="lightbox[amgallery]" title= "Amtrack RR over Thames River <br /><br /></a>
(Click right side of image to forward and left for back)">
<a href="images/portfolio/verticalliftcategory/amgallery/am4.jpg"rel="lightbox[amgallery]" title= "Amtrack RR over Thames River <br /><br /></a>
(Click right side of image to forward and left for back)">
<a href="images/portfolio/verticalliftcategory/amgallery/am5.jpg"rel="lightbox[amgallery]" title= "Amtrack RR over Thames River <br /><br /></a>
(Click right side of image to forward and left for back)">
</div>
</div
><div class="box-shadow">
<div class="bridge_photo_box">
<a href="images/portfolio/verticalliftcategory/csxgallery/csx1.jpg" rel="lightbox[csxgallery]" title= "CSX Lift Span over the Mobile River <br /><br />
(Click right side of image to forward and left for back)">
<img src="images/portfolio/verticalliftcategory/csxgallery/csxthumb.jpg" width="250" height="154" alt="CSX Lift Span over the Mobile River CSX Lift Span over the Mobile River " /></a>
<a href="images/portfolio/verticalliftcategory/csxgallery/csx2.jpg" rel="lightbox[csxgallery]" title= "CSX Lift Span over the Mobile River <br /><br /></a>
(Click right side of image to forward and left for back)">
<a href="images/portfolio/verticalliftcategory/csxgallery/csx3.jpg" rel="lightbox[csxgallery]" title= "CSX Lift Span over the Mobile River <br /><br /></a>
(Click right side of image to forward and left for back)">
<a href="images/portfolio/verticalliftcategory/csxgallery/csx4.jpg" rel="lightbox[csxgallery]" title= "CSX Lift Span over the Mobile River <br /><br /></a>
(Click right side of image to forward and left for back)">
<a href="images/portfolio/verticalliftcategory/csxgallery/csx5.jpg" rel="lightbox[csxgallery]" title= "CSX Lift Span over the Mobile River <br /><br /></a>
(Click right side of image to forward and left for back)"></div>
</div>
</div>
<div id="photobox_column3"><br />
<br />
<div class="box-shadow">
<div class="bridge_photo_box">
<a href="images/portfolio/verticalliftcategory/burlinggallery/burling1.jpg"rel="lightbox[bur linggallery]" title= "Burlington Northern Lift Span <br /><br />
(Click right side of image to forward and left for back)">
<img src="images/portfolio/verticalliftcategory/burlinggallery/burlingthumb.jpg" width="250" height="154" alt="Burlington Northern Lift Span" /></a>
<a href="images/portfolio/verticalliftcategory/burlinggallery/burling2.jpg"rel="lightbox[bur linggallery]" title= "Burlington Northern Lift Span <br /><br /></a>
(Click right side of image to forward and left for back)">
<a href="images/portfolio/verticalliftcategory/burlinggallery/burling3.jpg"rel="lightbox[bur linggallery]" title= "Burlington Northern Lift Span <br /><br /></a>
(Click right side of image to forward and left for back)">
<a href="images/portfolio/verticalliftcategory/burlinggallery/burling4.jpg"rel="lightbox[bur linggallery]" title= "Burlington Northern Lift Span <br /><br /></a>
(Click right side of image to forward and left for back)">
</div>
</div>
</div>
<div id="footer">Content for id "footer" Goes Here</div>
<div id="apDiv1"></div>
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>Your first section - the code is fully malfunctioning.
<div class="box-shadow">
<div class="bridge_photo_box">
<a href="images/portfolio/verticalliftcategory/amgallery/am1.jpg"rel="lightbox[amgallery]" title="Amtrack RR over Thames River <br /><br />
(Click right side of image to forward and left for back)">
<img src="images/portfolio/verticalliftcategory/amgallery/amthumb.jpg" width="250" height="154" alt="Amtrack RR over Thames River " /></a>
<a href="images/portfolio/verticalliftcategory/amgallery/am2.jpg"rel="lightbox[amgallery]" title= "Amtrack RR over Thames River <br /><br /></a>
(Click right side of image to forward and left for back)">
<a href="images/portfolio/verticalliftcategory/amgallery/am3.jpg"rel="lightbox[amgallery]" title= "Amtrack RR over Thames River <br /><br /></a>
(Click right side of image to forward and left for back)">
<a href="images/portfolio/verticalliftcategory/amgallery/am4.jpg"rel="lightbox[amgallery]" title= "Amtrack RR over Thames River <br /><br /></a>
(Click right side of image to forward and left for back)">
<a href="images/portfolio/verticalliftcategory/amgallery/am5.jpg"rel="lightbox[amgallery]" title= "Amtrack RR over Thames River <br /><br /></a>
(Click right side of image to forward and left for back)">
</div>
</div
><div class="box-shadow">
Remove all <br> tags from within the title tag. You cannot have nested tags this way. Also, the instruction wont be required (IMO). People should be knowing how to navigate lightbox. Or, you could do one thing and display the right and left arrows at all times (not just while hover, the way it is now). This will fix 50% of your problem.
Notice the red highlight in your code above. Fix the closing DIV tag.
Provide thumbnails for all of your Lightbox images. This way your users are aware there are more images on your site. Also, you give them the choice of choosing what image they want to zoom into, rather than forcing them to go through them one at a time. -
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. -
Help with Installing Lightbox 2 in Adobe golive cs2
Iam having some difficulty installing lightbox 2 for a gallery that I want to creat on my website, Ive downloaded the latest version.
Do I just drop the whole folder (lightbox 2 into my site window? then add the code for javascript in the header window and css, can anyone tell me exactly where these files go? and where the code goes exactly for the javascript and css? Iam having trouble adding the href code too.Put these 4 lines in the head of the page (remove the space after all of < less than symbols, the space was added after the < to get the code to display)
< script type="text/javascript" src="js/prototype.js">< /script>
< script type="text/javascript" src="js/scriptaculous.js?load=effects,builder">< /script>
< script type="text/javascript" src="js/lightbox.js">< /script>
< link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
Make sure the src location is correct for you site, if not change it as needed to match your directory/folder layout
java scripts generally go in the js folder
style sheets generally go in the css folder
follow the rest of the instructions on
http://www.huddletogether.com/projects/lightbox2/
under the Activate section.
Upload and test
Maybe you are looking for
-
WRT54G2 does not work and internet, port 2 and port 3 LEDs are in a flashing pattern
I've tried the reset button and plenty of power cycling. The LEDs are stuck in a cycle: internet LED is a continous flash port 2 LED is a continous flash port 3 LED flashes occasionally, but I can't see a pattern. It does not respond to pings.
-
Oooops my neighbours can access my Infinity
Hi, To test my new Inifinity's speed on a better PC I borrowed my friendly neighbours laptop and entered my wireless/password key into their laptop so I could log into my network. However their laptop has now "remembered" my password and they can now
-
hai i am using xslt for transformation of xml to html/wml.if i am tring the java code for tht tht is working file.i want to get the output in the browser.so i want to use servlet.if i am tring the code as servelt tht is not working.any seeting r ther
-
I cannot mount my hard drive volume!
Began a standard install of OS 9.2.2 and then my hard drive icon disappeared from the desktop. I opened drive setup from the utilities folder of the 9.2.2 cd and I cannot mount the volume no matter what. I can only start up from the cd holding down t
-
need my i tunes i can only find them in my purchase history is there any way i can get them back please help ty