Lightbox gallery issue

Hi everyone, I have a problem with the thickbox gallery. Im using dreamweaver CS5. My thickbox gallery was working just fine. But since I added a slideshow at the top of my website The thickbox stopped working properly. Now everytime I click on a picture everything turns dark (as it used to until the image pops up) and a little time bar appears in the middle as showing that something is trying to happen.
I don't know if someone can help me through mail. Or what do you need to be pasted. The problem is that I don't want to break any rule.

As a newbie you have done very well so keep it up.  Just keep working on it and read widely about web designs and keep visiting people's sites to get new ideas.
Good luck.

Similar Messages

  • Issues with Video Lightbox Gallery from Muse Exchange...

    I've been trying to customize the Video Lightbox Gallery from the exchange, Video Gallery Lightbox | Exchange | Adobe Muse CC
    I'm using embed codes from Vimeo. My first issue was that when I replace the placeholder embed code with my Vimeo code, the frame size is considerably smaller. From Vimeo it is 500x281 and in the widget it is 700x396. So I changed the frame size in my Vimeo embed and that seemed to work. Now, though, when a preview the page it plays fine in the window, but when I enter full screen and then escape from that while the video is playing to go back the smaller window, it jumps up so far up the screen it is off the page... It doesn't happen with the placeholder video and the only difference I can see is that it's from YouTube and mine is from Vimeo. I haven't change any of the settings except for the embed code. Can anyone help me with this?

    I wanted to add that I am using on one page design and I have multiple video galleries further down the page. What I've noticed is that no matter which thumbnail I play and enter into full screen, when I hit escape, that window jumps all the way to the top instead of staying locked to where is originated. Again, it doesn't do it with the placeholder video, only when I replace it with my embed codes from Vimeo. This is very frustrating because I am so close to finishing and this issue is holding me up. I've searched and searched and cannot find the answer... is there anyone who can help, please?

  • Issue with Lightbox Gallery

    Hello,
    This should hopefully be a minor problem, I just can't figure it out.
    I have a lightbox gallery set up, and it works perfectly except once clicked on, underneath the image it has this large white space area underneath it which contains the 'prev,' and 'next' buttons.
    Could anyone possibly look at my website/coding to see if I've made a newbie mistake here?
    Any help at all would be hugely appreciated!
    Cheers!
    My site:
    http://www.paulricedesign.com/photo.html

    As a newbie you have done very well so keep it up.  Just keep working on it and read widely about web designs and keep visiting people's sites to get new ideas.
    Good luck.

  • 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 &amp; Rachel 025.jpg" title=""><img src="Mark &amp; 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 &amp; Ruth0202.jpg" title=""><img src="James &amp; 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 &amp; Rachel 311.jpg" width="600px" height="400px" title=""><img src="Mark &amp; 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.

  • Customizing Lightbox gallery in Dreamweaver CS5

    Hi,
    I've downloaded the jQuery LightBox gallery from Dreamweaver Exchange and I'd like to change the color of the overlay when the gallery is "up and running". By default it's black and I've gone through every item on the lightbox.css file but I can't find the place to customize the overlay...adding a new property doesn't work. Does anyone know how to do this?
    Also I'd like to add a caption to each photo...how do I do this?
    Thanks and best regards

    Gomez,
    If you have an issue you really ought to start  your own thread.  Whatever is happening for you is entirely different to the question asked here.
    As for the overly question it looks like you are using Thickbox and as far as I can tell this is the code that will help you adjust the transparency/color of the overlay thing; this is the code that I think you will need to alter and it should be in thickbox.css or something like it?
    .TB_overlayMacFFBGHack {background: url(macFFBgHack.png) repeat;}
    .TB_overlayBG {
      background-color:#000;
      filter:alpha(opacity=75);
      -moz-opacity: 0.75;
      opacity: 0.75;
    Dreamweaver should hlep you locate that code and what I would do is use good ol' "tria-and-error" to see how ig goes.
    Martin

  • Lightbox Gallery Buttons

    I know i'm not the designer girl type, but i'm really trying my best with a website i'm needing.
    Using the Lightbox gallery, i saw a boring problem that i cant fix....
    The Next, Previous, close and loading buttons arent appearing
    I try to verify the folder and link, but it looks ok ... Can anyone take a look for me?
    Thanks^^
    <!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>
    <link rel="shortcut icon" href="/favicon.ico" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- TemplateBeginEditable name="doctitle" -->
    <title>FINAL FANTASY RPG - By Fernanda Parker</title>
    <!-- TemplateEndEditable -->
    <style type="text/css">
    <!--
    body {
              font: 100% Verdana, Arial, Helvetica, sans-serif;
              background: #666666;
              margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
              padding: 0;
              text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
              color: #000000;
              background-image: url(../Images/Layout/bg-stripes.gif);
              background-repeat: repeat;
              background-color: #FFFFE2;
    .oneColElsCtr #container {
              width: 46em;
              background: #FFFFFF;
              margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
              border: 1px solid #000000;
              text-align: left; /* this overrides the text-align: center on the body element. */
    .oneColElsCtr #mainContent {
              padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
    -->
    </style>
    <script src="../includes/jquery-1.4.2.js" type="text/javascript"></script>
    <script src="../jQuery/js/jquery.jsocial.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js" type="text/javascript"></script>
    <script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
    <script src="../Scripts/jquery.js" type="text/javascript"></script>
    <script src="../Scripts/lightbox.js" type="text/javascript"></script>
    <script src="../Scripts/jquery.js" type="text/javascript"></script>
    <script src="../Scripts/lightbox.js" type="text/javascript"></script>
    <script type="text/javascript">
    <!--
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    //-->
    </script>
    <link href="../jQuery/css/style.css" rel="stylesheet" type="text/css" />
    <script type="text/xml">
    <!--
    <oa:widgets>
      <oa:widget wid="2149023" binding="#social" />
      <oa:widget wid="2102522" binding="#navigation" />
      <oa:widget wid="2127022" binding="#gallery" />
      <oa:widget wid="2624026" binding="#OAWidget" />
    </oa:widgets>
    -->
    </script>
    <style type="text/css">
    .oneColElsCtr table tr td table {
              font-family: Verdana, Geneva, sans-serif;
              color: #97934A;
    .oneColElsCtr table tr td table {
              color: #6C5C44;
    .oneColElsCtr table tr td table {
              font-size: 12%;
    .oneColElsCtr table tr td table {
              font-size: 12px;
    .oneColElsCtr table tr td table tr th table tbody tr td img {
              text-align: center;
    #apDiv1 {
              position:absolute;
              left:879px;
              top:198px;
              width:143px;
              height:42px;
              z-index:1;
    #apDiv2 {
              position:absolute;
              left:814px;
              top:178px;
              width:109px;
              height:56px;
              z-index:1;
    .Titulo1 {
              color: #C4AF87;
              font-weight: bold;
              font-size: 18px;
              font-family: Verdana, Arial, Helvetica, sans-serif;
              line-height: normal;
              text-transform: capitalize;
    .Corpo {
              color: #C4AF87;
              font-family: Verdana, Arial, Helvetica, sans-serif;
              font-size: 14px;
              font-style: normal;
              line-height: normal;
              font-weight: lighter;
              font-variant: normal;
              text-transform: none;
              list-style-position: inside;
              list-style-type: disc;
    .Links {
              color: #C4AF87;
              font-family: Verdana, Arial, Helvetica, sans-serif;
              font-size: 14px;
              font-style: oblique;
              line-height: normal;
              font-weight: normal;
              font-variant: normal;
              text-transform: capitalize;
              text-decoration: underline;
              border-top-style: none;
              border-right-style: none;
              border-bottom-style: none;
              border-left-style: none;
    body,td,th {
              color: #C4AF87;
              list-style-type: square;
    a {
              font-size: 14px;
    </style>
    <!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable --><!-- TemplateParam name="Subtitulos" type="boolean" value="true" -->
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    /* BeginOAWidget_Instance_2102522: #navigation */
    ul#navigation {
          position: fixed;
          margin: 0px;
          padding: 0px;
          top: 0px;
          left: 10px;
          list-style: none;
          z-index:999999;
          width:auto;
          ul#navigation li {
          display:inline;
          float:left;
          width:102px;  
          ul#navigation li a {
          display: block;
          float:left;
                color:#000000;
          margin-top: -2px;
          height: 25px;
          width:100px;
          background-repeat:no-repeat;
          background-position:50% 10px;
          background-color:transparent;
          border:3 solid #000000;
          -moz-border-radius:0px 0px 10px 10px;
          -webkit-border-bottom-right-radius: 10px;
          -webkit-border-bottom-left-radius: 10px;
          -khtml-border-bottom-right-radius: 10px;
          -khtml-border-bottom-left-radius: 10px;
          text-decoration:none;
          text-align:center;
          padding-top:80px;
          opacity: 0.7;
          filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); 
          ul#navigation li a:hover{
          background-color:transparent;
          ul#navigation .home a{
              background-image: url(../Images/Navegador/Home.png);
          ul#navigation .about a{
              background-image: url(../Images/Navegador/News.png);
          ul#navigation .search a{
              background-image: url(../Images/Navegador/Sistema.png);
          ul#navigation .podcasts a{
              background-image: url(../Images/Navegador/Fanarea.png);
          ul#navigation .rssfeed a{
              background-image: url(../Images/Navegador/Blog.png);
          ul#navigation .photos a{
              background-image: url(../Images/Navegador/Download.png);
          ul#navigation .contact a{
              background-image: url(../Images/Navegador/Contato.png);
    /* EndOAWidget_Instance_2102522 */
    </style>
    <link rel="shortcut icon" href="/favicon.ico" />
    <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: #c4af87;
                                  padding-left: 20px; 
                                  padding-top: 20px; 
                                  padding-right: 20px; 
                                  padding-bottom: 20px; 
                                  width: 540px;
                                  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: transparent;
                                  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: #ffffe2;
                                  border-left-width: 10px;
                                  border-top-width: 10px;
                                  border-right-width: 10px;
                                  border-bottom-width: 20px;
                        #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>
    <style type="text/css">
    /* BeginOAWidget_Instance_2624026: #OAWidget */
    .element{
                        width:140px;
                        height:70px;
                        background-color:transparent;
                        color:#333333;
                        float:left;
                        margin-right:10px;
                        overflow:hidden;
                        -moz-transition-property:height;
                        -moz-transition-duration:1s;
                        -o-transition-property:height;
                        -o-transition-duration:1s;
                        -webkit-transition-property:height;
                        -webkit-transition-duration:1s;
              .element img{
                        width:140px;
                        height:70px;
              .element:hover{
                        height:160px;
                        -moz-transition-property:height;
                        -moz-transition-duration:1s;
                        -o-transition-property:height;
                        -o-transition-duration:1s;
                        -webkit-transition-property:height;
                        -webkit-transition-duration:1s;
              .empty{
                        clear:both;
                        height:20px;
                        background-color:#333333;
    /* EndOAWidget_Instance_2624026 */
    </style>
    </head>
    <Body lang="pt" onload="MM_preloadImages('../Images/Botoes/Jobs2.png','../Images/Botoes/Magias2.png','../ Images/Botoes/Summons2.png','../Images/Botoes/Races2.png')" onselectstart="return false">
    <table width="1116" border="0" align="center" cellpadding="0" cellspacing="0" lang="pt">
      <tr>
        <th height="78" background="../Images/Layout/repeatleftTOP2.png" scope="col"> </th>
        <th align="left" valign="top" background="../Images/Layout/teste-fundo-horizontal.png" scope="col"><p> </p>
          <table width="1009" border="0" cellpadding="0" cellspacing="0" class="Corpo">
            <!-- TemplateBeginRepeat name="Repeat_socials" -->
            <tr>
              <th width="100" scope="col"> </th>
              <th width="727" align="right" scope="col"><a href="https://www.facebook.com/pages/Final-Fantasy-RPG/260352977361922" target="_new"><img src="../Images/icons/facebook.png" alt="icon_facebook" name="FacebookButton" width="50" height="50" id="FacebookButton" lang="pt" /></a><a href="https://twitter.com/ferparker" target="_new"><img src="../Images/icons/twitter.png" alt="icon_twitter" name="TwitterButton" width="50" height="50" id="TwitterButton" /></a><a href="http://finalfantasyrpg.wordpress.com" target="_new"><img src="../Images/icons/rss.png" alt="icon_rss" name="RssButton" width="50" height="50" id="RssButton" /></a></th>
            </tr>
            <!-- TemplateEndRepeat -->
          </table></th>
        <th background="../Images/Layout/repeatrightTOP21.png" scope="col"> </th>
      </tr>
      <tr>
        <th width="50" height="46" background="../Images/Layout/ribbon-left.png" scope="col"> </th>
        <th width="1012" background="../Images/Layout/ribbon-main.png" scope="col"><span class="Corpo">
          <script type="text/javascript">
    // BeginOAWidget_Instance_2149023: #social
              $('.social').jsocial({
                                  twitter                    :  'myID',
                                  facebook          :  'facebook.com/myID',
                                  flickr                    :  'myID_2',
                                  delicious          :  'myID_3',
                                  linked                    :  'linkedin.com/in/myID',
                                  youtube                    :  'youtube.com/myID',
                                  feed                    :  'myID_4',
                                  friendfeed          :  'myID_5',
                                  digg                    :  'myID_6',
                                  lastfm                    :  'myID_7',
                                  center                    : false,
                                  inline                    : true,
                                  small                    : false,
                                  newPage                    : false
    // EndOAWidget_Instance_2149023
          </script>
        </span></th>
        <th width="54" background="../Images/Layout/ribbon-right.png" scope="col"> </th>
      </tr>
      <tr>
        <td background="../Images/Layout/repeatleft.png"> </td>
        <td align="center" valign="top" background="../Images/Layout/bg-main.gif"><table width="1012" height="1086" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_">
          <tbody>
            <tr>
              <td width="792" height="1086" valign="top" background="news.php_arquivos/bg-main.gif"><!-- TemplateBeginEditable name="CorpoEditavel" -->
                <div align="center">
                  <div id="maincontent">
                    <div align="center">
                      <table width="701" height="31" border="0" align="center" cellpadding="0" cellspacing="0">
                        <tbody>
                          <tr>
                            <td align="center"><a href="../ffrpg.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Sistema','','../Images/Botoes/Sistema2.png',0)"><img src="../Images/Botoes/Sistema1.png" alt="Sistema" name="Sistema" width="120" height="37" border="0" id="Sistema" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image15','','../Images/Botoes/Races2.png',1)"><img src="../Images/Botoes/Races1.png" name="Image15" width="92" height="37" border="0" id="Image15" /></a><a href="../jobs.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Jobs','','../Images/Botoes/Jobs2.png',1)"><img src="../Images/Botoes/Jobs1.png" alt="Jobs" name="Jobs" width="79" height="37" border="0" id="Jobs" /></a><a href="../magia.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Magias','','../Images/Botoes/Magias2.png',1)"><img src="../Images/Botoes/Magias1.png" alt="Magias" name="Magias" width="106" height="37" border="0" id="Magias" /></a><a href="../summons.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Summons','','../Images/Botoes/Summons2.png',1)"><img src="../Images/Botoes/Summons1.png" alt="Summons" name="Summons" width="144" height="37" border="0" id="Summons" /></a></td>
                          </tr>
                        </tbody>
                      </table>
                      <p class="Corpo"><script type="text/javascript">
    // BeginOAWidget_Instance_21490</script></p>
                      <table width="616" border="0" cellpadding="0" cellspacing="0" class="Corpo">
                        <tr>
                          <th width="25" height="25" background="../Images/Layout/table-topleft.gif" scope="col"> </th>
                          <th width="566" background="../Images/Layout/bg-table.gif" scope="col"> </th>
                          <th width="25" background="../Images/Layout/table-topright.gif" scope="col"> </th>
                        </tr>
                        <tr>
                          <td width="25" height="18" background="../Images/Layout/bg-table.gif"> </td>
                          <th width="566" background="../Images/Layout/bg-table.gif" scope="col"><p class="Corpo"><img src="../Images/Linhas/Sistema---Sistema.png" alt="RaceLine" height="74" width="500" /></p>
                            <table width="556" border="0" cellpadding="0" cellspacing="0" class="Corpo">
                              <tr>
                                <th width="200" height="203" scope="col"><table width="180" height="88" border="0" cellpadding="0" cellspacing="0">
                                  <tr>
                                    <th class="Corpo" scope="col"><img src="../Images/Stuff/Logo-Fundo-Tranp.png" alt="LogoFFRPG" width="180" height="180" /></th>
                                    </tr>
                                  </table></th>
                                <th width="356" class="Corpo" scope="col">Final Fantasy RPG Final Fantasy RPG Final Fantasy RPG Final Fantasy RPG Final Fantasy RPG Final Fantasy RPG Final Fantasy RPG Final Fantasy RPG Final Fantasy RPG Final Fantasy RPG Final Fantasy RPG Final Fantasy RPG Final Fantasy RPG Final Fantasy RPG Final Fantasy RPG Final Fantasy RPG Final Fantasy RPG Final Fantasy RPG Final Fantasy RPG Final Fantasy RPG Final Fantasy RPG Final Fantasy RPG Final Fantasy RPG Final Fantasy RPG Final Fantasy RPG Final Fantasy RPG Final Fantasy RPG</th>
                                </tr>
                            </table>
                            <p class="Corpo">Final Fantasy RPG Final Fantasy RPG Final Fantasy </p>
    <p class="Corpo">RPG Final Fantasy RPG Final Fantasy RPG Final Fantasy RPG Final Fantasy RPG Final Fantasy RPG Final Fantasy RPG Final Fantasy RPG Final Fantasy RPG Final Fantasy RPG Final Fantasy RPG </p></th>
                          <td width="25" background="../Images/Layout/bg-table.gif"> </td>
                        </tr>
                        <tr>
                          <td width="25" height="23" background="../Images/Layout/table-bottomleft.gif"> </td>
                          <th width="566" background="../Images/Layout/bg-table.gif" scope="col"> </th>
                          <td width="25" background="../Images/Layout/table-bottomright.gif"> </td>
                        </tr>
                    </table>
                    </div>
                    <p align="center" class="Corpo"><br />
                    </p>
                    <div align="center" class="Corpo">
                      <table align="center" border="0" cellpadding="0" cellspacing="6">
                        <tbody>
                          <tr>
                            <td width="656"><div align="center">
                              <p class="Corpo"><img src="../Images/Layout/Divider Linha.png" alt="divider" height="64" width="494" /></p>
                              <p> </p>
                            </div></td>
                          </tr>
                          <tr>
                            <td width="656" align="center" valign="top"><p class="Titulo1">Título 1
              GALLERY PLUS
              </p>
                              <p class="Titulo1"> </p>
                              <div id="gallery" class="lbGallery">
                                <ul>
                                  <li> <a href="../Images/Jobs/Mago Negro.png" title="AAAAAAAAAAAAAAA"><img src="../Images/Jobs/thumbnails/Mago-NegroThumb.png" alt="Flower" width="51" height="100" /></a> </li>
                                  <li> <a href="../Images/Jobs/Alquimista.png"><img src="../Images/Jobs/thumbnails/AlquimistaThumb.png" alt="Tree" width="46" height="100" /></a> </li>
                                  <li> <a href="../Images/Jobs/Arqueiro.png"><img src="../Images/Jobs/thumbnails/ArqueiroThumb.png" alt="" width="87" height="100" /></a> </li>
                                  <li> <a href="../Images/Jobs/Bardo.png"><img src="../Images/Jobs/thumbnails/BardoThumb.png" alt="" width="54" height="100" /></a> </li>
                                  <li> <a href="../Images/Jobs/Cavaleiro das Runas.png"><img src="../Images/Jobs/thumbnails/Cavaleiro-das-RunasThumb.png" alt="" width="53" height="100" /></a><a href="../Images/Jobs/Apostador.png"><img src="../Images/Jobs/thumbnails/ApostadorThumb.png" alt="Flower" width="85" height="100" /></a><a href="../Images/Jobs/Cavaleiro Magico.png"><img src="../Images/Jobs/thumbnails/Cavaleiro-MagicoThumb.png" alt="Tree" width="70" height="100" /></a><a href="../Images/Jobs/Cavaleiro Negro.png"><img src="../Images/Jobs/thumbnails/Cavaleiro-Negro.png" alt="" width="76" height="100" /></a><a href="../Images/Jobs/Invocador Negro.png"><img src="../Images/Jobs/thumbnails/Invocador-NegroThumb.png" alt="" width="51" height="100" /></a><a href="../Images/Jobs/Ladrao.png"><img src="../Images/Jobs/thumbnails/LadraoThumb.png" alt="" width="73" height="100" /></a></li>
                                </ul>
    </div>
                              <script type="text/javascript">
    // BeginOAWidget_Instance_2127022: #gallery
                        $(function(){
                                  $('#gallery a').lightBox({
                                            imageLoading:                              '<img src="../Images/lightbox/lightbox-ico-loading.gif" width="32" height="32" alt="Ico_Loading" />',                    // (string) Path and the name of the loading icon
                                            imageBtnPrev:                              '<img src="../Images/lightbox/lightbox-btn-prev.gif" width="63" height="32" alt="Ico_Previous" />',                              // (string) Path and the name of the prev button image
                                            imageBtnNext:                              '<img src="../Images/lightbox/lightbox-btn-next.gif" width="63" height="32" />',                              // (string) Path and the name of the next button image
                                            imageBtnClose:                              '<img src="../Images/lightbox/lightbox-btn-close.gif" width="66" height="22" />',                    // (string) Path and the name of the close btn
                                            imageBlank:                                        '<img src="../Images/lightbox/lightbox-blank.gif" width="1" height="1" />',                              // (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:                     "#999999",                    // (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'
    // EndOAWidget_Instance_2127022
                              </script>
    <p> </p>
                              <p></p>
                              <p class="Corpo">Corpo de Texto Corpo de Texto Corpo de Texto Corpo de Texto Corpo de Texto Corpo de Texto Corpo de Texto Corpo de Texto Corpo de Texto Corpo de Texto Corpo de Texto Corpo de Texto Corpo de Texto </p>
                              <span class="Corpo"><a href="endereço do link" class="Links">Link</a></span></td>
                          </tr>
                          <tr>
                            <td width="656"><div align="center" class="Corpo"><img src="../Images/Sign_Up.png" alt="a" width="150" height="44" /><br />
                            </div></td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                    <p align="center" class="Corpo"> </p>
                  </div>
                  <p class="Corpo"><br />
                </p>
                </div>
              <!-- TemplateEndEditable --></td>
              <td width="220" colspan="6" valign="top" background="news.php_arquivos/bg-main.gif"><!-- TemplateBeginEditable name="LateralEditavel" -->
                <div id="maincontent2">
                  <div align="center">
                    <p><span class="Corpo"><img src="../Images/Sign_Up.png" alt="News" name="Brass1" width="150" height="44" border="0" id="Brass1" title="News" /></span></p>
                    <table width="193" height="194" border="0" cellpadding="0" cellspacing="0">
                      <!--DWLayoutTable-->
                      <tr>
                        <th width="192" height="508" background="../Images/Layout/bg-table.gif" scope="col"><table width="167" height="478" border="0" align="center" cellpadding="0" cellspacing="0" background="../Images/Layout/bg-table_002.gif">
                          <tr>
                            <th height="478" background="../Images/Layout/bg-main.gif" scope="col"><span class="Corpo"><img src="" alt="Banner" name="Banner" width="167" height="478" align="middle" class="Corpo" id="Banner" style="background-color: #FFFFE2" /></span></th>
                          </tr>
                        </table></th>
                      </tr>
                    </table>
                    <p><span class="Corpo"><img src="../Images/Sign_Down.png" alt="d" name="Brass2" width="150" height="44" id="Brass2" /></span></p>
                    <p> </p>
                    <p><span class="Corpo"></span></p>
                  </div>
                </div>
              <!-- TemplateEndEditable --></td>
            </tr>
          </tbody>
        </table>
    <p align="center"> </p></td>
        <td background="../Images/Layout/repeatright.png"> </td>
      </tr>
      <tr>
        <td height="103" background="../Images/Layout/Bottomleft-shadow.png"> </td>
        <td background="../Images/Layout/footer.png"> </td>
        <td background="../Images/Layout/Bottomright-shadow.png"  background-repeat: no-repeat> </td>
      </tr>
      <tr>
        <td height="10" colspan="3" background="../Images/dropshadow-bottom3.png"> </td>
      </tr>
    </table>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <div class="social"></div>
    <p> </p>
    <!-- TemplateBeginRepeat name="Repeat_Navegacao" -->
    <ul id="navigation">
      <li class="home"><a href="../index.html" class="Corpo">Home</a></li>
      <li class="about"><a href="../news.html" class="Corpo">News</a></li>
      <li class="search"><a href="../Sistema-FFRPG.html" class="Corpo">Sistema FFRPG</a></li>
      <li class="photos"><a href="../downloads.html" class="Corpo">Downloads</a></li>
      <li class="rssfeed"><a href="../favicon.png" class="Corpo">Blog</a></li>
      <li class="podcasts"><a href="../fan_area.html" class="Corpo">FanArea</a></li>
      <li class="contact"><a href="mailto:[email protected]" class="Corpo">Contato</a></li>
    </ul>
    <!-- TemplateEndRepeat --><script type="text/javascript">
    // BeginOAWidget_Instance_2102522: #navigation
    $(function() {
          var d=300;
          $('#navigation a').each(function(){
          $(this).stop().animate({
          'marginTop':'-80px'
          },d+=150);
          $('#navigation > li').hover(
          function () {
          $('a',$(this)).stop().animate({
          'marginTop':'-2px'
          },200);
          function () {
          $('a',$(this)).stop().animate({
          'marginTop':'-80px'
          },200);
    // EndOAWidget_Instance_2102522
    </script>
    <p> </p>
    <p> </p>
    <p> </p>
    <script language=JavaScript>
    <!--
    var mensagem="";
    function clickIE() {if (document.all) {(mensagem);return false;}}
    function clickNS(e) {if
    (document.layers||(document.getElementById&&!document.all)) {
    if (e.which==2||e.which==3) {(mensagem);return false;}}}
    if (document.layers)
    {document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
    else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
    document.oncontextmenu=new Function("return false")
    // -->
    </script>
    </Body>
    </html>

    Julie726 wrote:
    Actually, I'm still having a problem getting those buttons to display before I worry about moving their positions.
    They have been uploaded to the correct locations.  I can't figure out why they don't display.
    They don't display because the link to those buttons points to an "images" folder (lowercase I) but they're stored on the server in "Images" folder (capital I).
    http://www.julieappelt.com/images/lightbox/lightbox-btn-close.gif does not work
    http://www.julieappelt.com/Images/lightbox/lightbox-btn-close.gif works
    It's usually best to avoid mixing cases when naming folders and files to avoid these issues, esp on Linux servers. Stick to all lowercase.

  • Lightbox Gallery Widget Rocks

    Hello Everyone,
    I really like the look of photographs as presented by the Lightbox Gallery Widget, available on Dreamweaver Exchnage, and authored by Andres Cayon, from the Spain  Adobe Dreamweaver User  Group.
    Also, please let me express my gratitude for his help with a small issue. The word 'close" did not appear because the path for that gif needed to be changed in JS Lightbox. Not only did Andres Canyon help resolve this issue, he did so very promptly.
    The Lightbox Gallery Widget is a beautiful way to showcase my photographs and I am grateful that he makes it available for free and for his timely assistance. What can I say but many thanks to Andres Cayon!
    Gail Indvik
    Oakland, CA

    Thanks for the reply
    I think i have it working now.
    Not really sure what I did though.

  • Lightbox Gallery previous and next not visible

    I'm still looking for a solution to the other Lightbox Gallery question I posted earlier, but in the meantime I've copied files from the application support folder mentioned before and have the gallery working up to a point.
    It works perfectly well locally in Dreamweaver Live View but having uploaded the files to the server the gallery functions without displaying the Previous, Next or Close tabs. They're active but not visible which makes me think there is a failure to load the icons
    http://www.yellotestbed.co.uk/shtml/photo_gallery.shtml
    Thanks

    Looks like you need to fix the links to those images in your javascript.
    You have a mix of "images" and "Images" for the directory names in the links. It looks like your actual folder is capital "i" Images. Your local files will work fine, because your OS sees no difference between "images" and "Images" however your server treats them as two different directories so you're getting 404 File Not Found errors because it is looking for a directory that doesn't exist
    File names should be all lower case with no special characters ($%&* etc). You should also use hyphens and underscores instead of spaces to avoid issues like this.

  • Problems using lightbox gallery widget

    Hi,  I am just learning Dreamweaver and thought I would try out a widget.  I tried the lightbox gallery widget, and it mostly works, except that I get a box with a question mark on the right, under the photo when it is enlarged.  It can't find some of the included widget image icon files. Anybody know why?  It does it in live view and firefox and safari.
    I looked at the code and from what I can tell, the code references images which appear to be in the correct directory /images/lightbox/blahblah.gif.
    For example, the widget is supposed to say 'close' under the image, and that text is a .gif image apparently.
    Anyone have this trouble or know what the problem could be?
    Thanks
    Bob

    I found a fix for something similar that occurred on my machine. I too was seeing no problems locally but when I posted it to my site, it just had the placeholder and no images....
    Apparently, dreamweaver is smarter than the browser... (maybe incorrect statement) however..... the file extensions are case sensitive!
    I had this-------- <A href="Img/CGM_1.JPG" border="0"  rel="lightbox[Img/CGM_1thumb.JPG]" title="CGM Pic Set"><img src="Img/CGM_1thumb.JPG" /></a>
    <a href="Img/CGM_2.jpg" rel="lightbox[Img/CGM_1thumb.JPG]"></a>
                      <a href="Img/CGM_3.jpg" rel="lightbox[Img/CGM_1thumb.JPG]"></a>
                      <a href="Img/CGM_4.jpg" rel="lightbox[Img/CGM_1thumb.JPG]"></a>
    Well, I didnt think anything was so bad, all of the colors were right I wasn't getting any warnings.... wtf?
    As it turns out, and this is only because I just started a new image set after testing an individual - - baby steps - - if you use the properties bar at the bottom of DW, it applies a different case for specific parts...... i.e. this is what it produced
    <A HREF="Img/CGM_1.jpg" border="0"  rel="lightbox[Img/CGM_1thumb.jpg]" title="CGM Pic Set"><img src="Img/CGM_1thumb.jpg" /></a>
                      <a HREF="Img/CGM_2.jpg" rel="lightbox[Img/CGM_1thumb.jpg]"></a>
                      <a HREF="Img/CGM_3.jpg" rel="lightbox[Img/CGM_1thumb.jpg]"></a>
                      <a HREF="Img/CGM_4.jpg" rel="lightbox[Img/CGM_1thumb.jpg]"></a>
    Notice the HREF's are now UPPER case and the jpg's are now lower case. !!!! really?!?!?
    Also, another thing to look out for is the folder/ in front of your thumbnail; make sure it is there. In my case I use my sam "Img" folder, not the "images" folder that lightbox creates.
    Hope this helps, I beat my head against the wall for a total of 10 hours over 2 days trying to figure this out. I couldn't find anything on the internet. I'm going to post this so others having this issue get it resolved. I found those, just no resolution.

  • Lightbox Gallery Layout Problems

    I'm still struggling with layout methods. Recently moving from tables, and trying now to move from over-using absolute positioning, I'm now having major issues with float and clear methods.
    I have a site with a lightbox gallery, which works great in a previous site. http://home.comcast.net/~steven.kay/event/uplighting.html
    Another client wants a similar gallery, but when I copy it from the other site and paste it into the content div, I get a real mess. It seems to be inheriting some extra padding or margins or something.  http://home.comcast.net/~steven.kay/showtime/event_lighting.html
    I realize my layout isn't done properly (I'm working on it), but if anyone can at least help me get this gallery working, I'd be very grateful.
    Steve

    I think that the padding in this rule:
    #main_content li
    Is screwing your gallery.
    It's because that will apply to all <li> elements withing your #main_content div and your gallery of course, is constructed with using an unordered list.  One way around it is to give the other lists an id and target them directly in your CSS.
    Martin

  • Problem with lightbox gallery widget!

    Hi I'm using the lightbox gallery in conjuction with the css only menu and the psry content slideshow.
    I simply cannot get the lightbox to work, it opens up the images in a new page.
    www.studio-88.co.za
    Please help anyone!

    Hi Scott
    Thank you so much for taking the time to look at my site.
    about half an hour after i posted I realised there was a case-sensitive error reffering to the pictures in the javascript...
    Wnated to delete the post however couldnt as my internet went offline.
    If you could help me with another issue though.
    As you can see the light box is currently set as a marquee on the page (<marquee><div> _lightbox </div></marquee>
    is it possible to get the images scrolling on one line?

  • Lightbox gallery extension - upload problems!

    Hi,
    I've made a small test site in Dreamweaver CS5 with a photo gallery in a Lightbox extension ( that I've added from Dreamweaver extensions ). Everything looks and works the way I want it to in Dreamweaver Safari preview...but as soon as I upload my test site, the Lightbox Gallery doesn't work anymore. I asked my webhotel support for help, but they say that I should contact the developer for an answer ???
    I'm thinking that it must a very common problem, does anyone have a clue what the problem could be?
    ( My webhotel is an  advanced LINUX server ...as if I knew what that means ;-)
    Thanks and Merry Christmas !

    You have:
    <a href="nyhavn.jpg" title="Nyhavn, heritage harbour and a popular
    place to go for dinner or a drink.">
    <img src="nyhavn_s.jpg" width="72" height="73" alt="" /> </a>
    Are you not supposed to have   rel="lightbox" added to it? Such as
    <a href="nyhavn.jpg" title="Nyhavn, heritage harbour and a popular
    place to go for dinner or a drink.">
    <img src="nyhavn_s.jpg" rel="lightbox" width="72" height="73" alt="" /> </a>
    On closer inspection, if you look at your  "scripts/lightbox.js"
    It is not a js file at all, it is an html file....what happened to your original js file?
    Gary

  • Lightbox-gallery too low on the page

    I have created a photo gallery in dreamweaver cs5 with Lightbox2. The page with the gallery is quite long and when I open the gallery I see nothing and i have to scroll down very long to see the photos. Is there a way to ensure that the lightbox gallery opens at the top of the page?
    http://mastrigt.home.xs4all.nl/stellingloop/stelling.htm
    click on Foto’s.   Its Dutch :-)
    ZONDAG 10 JULI 2011
    Wandeling langs de duinen
    Ik was er zelf niet bij; de foto’s zijn van Marian.
    Foto's
    Thanks in advance, Laurens
    sorry i did something wrong , now it seems the thread is solved , so i put this question again

    Ok
    thank you
    Op 1 aug. 2011, om 18:18 heeft Nancy O. het volgende geschreven:
    Probably because it was a duplicated post.
    Nancy O.
    >

  • Lightbox-gallery too low

    I have created a photo gallery in dreamweaver cs5 with Lightbox2. The page with the gallery is quite long and when I open the gallery I see nothing and i have to scroll down very long to see the photos. Is there a way to ensure that the lightbox gallery opens at the top of the page? Thanks in advance, Laurens

    You have no document type declaration on the page.  Lightbox requires a valid document type to work properly in all browsers.
    Modify > Page Properties > Title Encoding >
    Select a document type that fits your coding skills (recommend XHTML transitional or XHTML strict).
    Also, you will get better results if you put your lightbox gallery on a separate, shorter page.
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/
    http://twitter.com/altweb

  • 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.

Maybe you are looking for