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

Similar Messages

  • Dreamweaver CS4 Lightbox Gallery Problem

    Hello Everyone,
    I am using Dreamweaver CS4 on a Mac and I am a beginner at producing my website, just so you know.  I am using lightbox gallery for my photo gallery on my website and everything works fine except that when you click on the picture to start the gallery there is a question mark that pops up where there should be instead the enlarged picture.  When I preview it using Safari the enlarged photo pops up with no problem, the question mark pops up only when I upload the website online. I have been trouble shooting to the best of my ability, but to no avail.  Please someone, show me what I am doing wrong.
    Here is the 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>Photo Gallery</title>
    <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" />
    </head>
    <body>
    <div id="gallery1" class="lbGallery">
      <ul>
        <li> <a href="images/lightboxdemo1.jpg" title=""> <img src="images/lightboxdemo_thumb1.JPG" width="72" height="72" alt="" /> </a> </li>
        <li> <a href="images/lightboxdemo2.jpg" title=""> <img src="images/lightboxdemo_thumb2.jpg" width="72" height="72" alt="" /> </a> </li>
        <li> <a href="images/lightboxdemo3.jpg" title=""> <img src="images/lightboxdemo_thumb3.jpg" width="72" height="72" alt="" /> </a> </li>
        <li> <a href="images/lightboxdemo4.jpg" title=""> <img src="images/lightboxdemo_thumb4.jpg" width="72" height="72" alt="" /> </a> </li>
        <li> <a href="images/lightboxdemo5.jpg" title=""> <img src="images/lightboxdemo_thumb5.jpg" width="72" height="72" alt="" /> </a> </li>
      </ul>
    </div>
    <script type="text/javascript">
    // BeginWebWidget lightbox_gallery
                        $(function() {
            $('#gallery1 a').lightBox();
    // EndWebWidget lightbox_gallery
    </script>
    </body>
    </html>
    And the website URL is: http://majesticmonumentvalley.com/photogallery.html
    Please note that I have not customized my own photos in the gallery because they only end up with the question mark so I wanted to fix this problem before I started putting my own photos on the website.
    Thank you for your time.
    -Jessica

    Hello, 
    Thank you for your response.  I put my own photos into the gallery and made sure they were located in the images folder.  I previewed it in Safari and all was well.  But, yet again, when I uploaded it online it does the same thing- a question mark appears instead of the enlarged image.  The thumbnail images are fine, it is just the enlarged images giving me grief.  What am I doing wrong?
    The new 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>Photo Gallery</title>
    <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" />
    </head>
    <body>
    <div id="gallery1" class="lbGallery">
      <ul>
        <li> <a href="images/honeymoonarch1.jpg" title=""> <img src="images/honeymoonarch_thumbnail.jpg" width="200" height="133" alt="" /> </a> </li>
        <li> <a href="images/jessicaofmv.jpg" title=""> <img src="images/jessicaofmv_thumbnail.jpg" width="150" height="226" alt="" /> </a> </li>
        <li> <a href="images/mittensunriseglow.JPG" title=""> <img src="images/mittensunriseglow_thumbnail.JPG" width="200" height="150" alt="" /> </a> </li>
        <li> <a href="images/themittens.JPG" title=""> <img src="images/themittens_thumbnail.JPG" width="200" height="150" alt="" /> </a> </li>
        <li></li>
      </ul>
    </div>
    <script type="text/javascript">
    // BeginWebWidget lightbox_gallery
                        $(function() {
            $('#gallery1 a').lightBox();
    // EndWebWidget lightbox_gallery
    </script>
    </body>
    </html>
    And the URL:  http://majesticmonumentvalley.com/photogallery.html
    Thanks again for your time.
    -Jessica

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

  • Problem in Quick Gallery Extension

    I use Quick Gallery extension to make a photo gallery on my
    site with Horizontal scroller.I insert pictures in the horizontal
    scroller and thn after clicking a small image then larger image
    appears.The problem is that images takes too much time to appear in
    the scroller n as well as whn the larger image displays.
    Waiting for ur urgent reply.
    Thankx
    Regards,

    Preload the images (use the preload behavior, a standard
    Dreamweaver
    behavior)
    Paul Davis
    http://www.kaosweaver.com/
    Visit us for dozens of useful Dreamweaver Extensions.
    http://www.communitymx.com/
    Partner at Community MX - Extend your knowledge
    sahil_m wrote:
    > I use Quick Gallery extension to make a photo gallery on
    my site with
    > Horizontal scroller.I insert pictures in the horizontal
    scroller and thn after
    > clicking a small image then larger image appears.The
    problem is that images
    > takes too much time to appear in the scroller n as well
    as whn the larger image
    > displays.
    >
    > Waiting for ur urgent reply.
    > Thankx
    > Regards,
    >

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

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

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

  • Why my adobe lightbox gallery widget works well on "live view" and not well in the browsers?

    Hi I need help with adobe lightbox gallery.I am building a website using dreamweaver cs5.
    My problem is that the gallery works perfect in "live view" but when I check it in the browsers the pictures do not show at all.
    What am I doing wrong .Please help.
    Thank you

    Hi All:
    From my experience with other people having problems with the widget, here are some things you can check when it doesn't work:
    Names with uppercase characters: Some servers don't see a difference between "images" and "Images" but most of them do: Check that the paths to the folders and files are correctly written. I encourage people to use always lowercase characters. Same applies to spaces (I prefer to use an underscore instead)
    "scripts" folder: I've also found that some servers don't allow a folder called "scripts". You should change both the folder name and the paths in the main document.
    Paths: This is the most common one: Make sure that the paths to the required files are correct. In theory, you shouldn't find this when the document is at the site root. If the document is inside a folder, sometimes files' location and related paths may vary. If you are using CS5 or above, a good trick is using the related files toolbar and check whether DW can find and open the files.
    Upload all the required files: Some users forget to upload the "lightbox" folder, located inside "images". That folder contains the images used by the lightbox to work (nav and close buttons, for example). And also check that the paths to those images is correct. In this case, you can edit the paths in the parameters that you will find in the script code added to the document (names are quite self explanatory and every param is commented, so this shouldn't be a problem)
    I hope this helps.

  • Adobe Lightbox Gallery Widget

    Can anyone please solve a problem I'm having with the above widget?
    I inserted the Lightbox Gallery Widget into the Editable Region of a template page on my website. I then deleted three of the five default images in the code and swapped the remaining two images with my own images using the properties panel. The result was that the widget no longer works. 
    Therefore, I placed the widget onto a newly created (non template page) and it worked ok, but after I deleted three of the five default images in the code and swapped the remaining two images with my own images using the properties panel, it no longer worked.
    I havn't uploaded my website as yet.
    thanks
    John

    Hi All:
    From my experience with other people having problems with the widget, here are some things you can check when it doesn't work:
    Names with uppercase characters: Some servers don't see a difference between "images" and "Images" but most of them do: Check that the paths to the folders and files are correctly written. I encourage people to use always lowercase characters. Same applies to spaces (I prefer to use an underscore instead)
    "scripts" folder: I've also found that some servers don't allow a folder called "scripts". You should change both the folder name and the paths in the main document.
    Paths: This is the most common one: Make sure that the paths to the required files are correct. In theory, you shouldn't find this when the document is at the site root. If the document is inside a folder, sometimes files' location and related paths may vary. If you are using CS5 or above, a good trick is using the related files toolbar and check whether DW can find and open the files.
    Upload all the required files: Some users forget to upload the "lightbox" folder, located inside "images". That folder contains the images used by the lightbox to work (nav and close buttons, for example). And also check that the paths to those images is correct. In this case, you can edit the paths in the parameters that you will find in the script code added to the document (names are quite self explanatory and every param is commented, so this shouldn't be a problem)
    I hope this helps.

  • When I build a web photo gallery and upload to my server, the web page as displayed by browsers is blank.  With preview, insid Bridge, the slideshow works fine.

    I have been building web photo galleries with Bridge for a few years and everything worked fine until my latest two builds.  Now when I build a gallery and upload the folder to my web server, it's not getting displayed by browsers.  When you hit the index file of the gallery, the page is blank with no written errors.
    When I use the "preview in browser" feature in Bridge, the slide show works as expected.
    I'm creating the gallery and saving to my local hard drive.  When that's complete, I ftp the entire folder to the server and then point to the index.htm file.  I've been doing this for two years with good results.  All of a sudden, I can't get a gallery to display on-line.

    I am experiencing the exact same problem; the gallery displays and functions perfectly when viewed locally but not when uploaded to the web server. I am wondering if it is also a Dreamweaver issue as each time I upload I receive an error report e.g. some files did not upload et cetera.

  • Flash Photo Gallery Extension

    Anyone know if there is a free flash photo gallery extension available?
    If not an extension then maybe an application to create a flash gallery to upload to website?
    Thanks
    Andy

    Hey Boss DJ
    Thanks for that - just what i was after :-)
    Andy

  • Lightbox gallery not working right...

    I inserted a lightbox gallery from the adobe exchange website. For some reason when you click on the thumbnail it doesn't open as it should. Can anyone see what the problem is?
    What it should look like: http://www.tecnorama.org/demos/lightbox.html
    What mine looks like: http://www.hopelightworship.com/photos.html
    Thanks...

    I see that you fixed your lightbox problem
    How did you fix it?

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

  • Lightbox gallery dreamweaver cs6

    Hello, I m tried to insert a picture gallery with dreamweaver cs6 using the widget lightboxgallery, the first problem is that the  buttons,next, previous ... are not displayed, the second problem happens when I want to insert a second " lightbox gallery" in the  same page.
    thank you for helping me

    Many people have reported problems with the Lightbox widget.  I highly recommend using FancyBox2 instead of that widget.  To see a demonstration, copy & paste this code into a new, blank document.  SaveAs test.html and preview in browsers.
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>HTML5, with Fancybox2 Viewer</title>
    <!--LATEST JQUERY CORE LIBRARY-->
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <!--FANCYBOX plugins-->
    <link href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.css" rel="stylesheet" media="screen">
    <script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.pack.js"></script>
    <style>
    /**this styles image container**/
    #thumbs p {
    float:left;
    width: 180px;
    height: 12.5em;
    margin: 10px 0 0 20px;
    padding: 10px;
    border: 1px solid silver;
    /**rounded borders**/
    -moz-border-radius: 20px;
    -webkit-border-radius:20px;
    border-radius: 20px;
    /**this styles caption text**/
    font: italic 14px/1.5 Geneva, Arial, Helvetica, sans-serif;
    color: #666;
    text-align:center;
    /**recommend using same size images**/
    #thumbs img {
    width:  160px; /**adjust width to thumbnail**/
    height: 120px; /**adjust height to thumbnail**/
    margin-bottom: 1.5em;
    opacity: 0.75;
    #thumbs img:hover {opacity: 1.0}
    /**float clearing**/
    #thumbs:after {
    content:".";
    clear:left;
    font-size:0px;
    line-height:0;
    display:block;
    visibility:hidden;
    </style>
    </head>
    <body>
    <h1><a href="http://fancyapps.com/fancybox/">Fancybox2</a> Viewer with images</h1>
    <!--insert thumbnails with links to full size images below-->
    <div id="thumbs">
    <p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail 1" /></a> <br />
    Caption 1
    </p>
    <p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail 2" /></a> <br />
    Caption 2
    </p>
    <p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail 3" /></a> <br />
    Caption 3
    </p>
    <p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120.jpg" alt="Thumbnail 4" /></a> <br />
    Caption 4
    </p>
    <p><a class="fancybox" data-fancybox-group="gallery" href="http://placehold.it/400x320.jpg" title="optional captions"><img src="http://placehold.it/160x120" alt="Thumbnail 5" /></a> <br />
    Caption 5
    </p>
    <!--end thumbs--></div>
    <!--Fancybox with Iframe-->
    <h1>Fancybox with Iframe</h1>
    <h3><a class="fancybox" data-fancybox-type="iframe" href="http://example.com">EXAMPLE.COM</a></h3>
    <!--FancyBox function code-->
    <script>
            $(document).ready(function() {
                $('.fancybox, iframe').fancybox();
        </script>
    </body>
    </html>
    Nancy O.

Maybe you are looking for

  • My new macbook pro can't find my Belkin network

    My new Macbook Pro is recognizing all sorts of newtorks in the area except the one in my home.  I have a Belkin N+ wireless router which I know is working because two other computers (pc) and my wife's iPad are having no problems connecting.  This is

  • Issue in Serializing the ViewObject to XML

    Hi , I am using XMLInterface method to serialize a view Object to XML. I am using following code , after querying the ViewObject. Node node = writeXML(XML_IGNORE_DEPTH_COUNT, XML_OPT_ALL_ROWS); ByteArrayOutputStream objSrc = new ByteArrayOutputStream

  • IChat window does not open - I did search

    Hello - I searched and found many people have this issue, however I did not find someone with exactly the same issue as me, although I am sure someone has. I can open iChat, my light opens underneath and my computer makes a sound that it is open. I g

  • How do I get the latest software program for my G5 iSight ? I want to updatemy iTunes to transfer music to my ipod

    i have a G5 iSight & need to update the software so that I can import songs from iTunes to put on my iPod. Does anyone know what upgrade I need please, atm I have Mac os 10.4.11 on Macintosh hd ( think it maybe Tiger ? ive been told I need leopard bu

  • BAPI or program to schedule project

    Hi, Any BAPI or function modue or program to schedule whole project? I have tried to run BDC of CJ20n but it is not working properly in production environment. Thanks, Harsh