Lightbox Gallery Display (InDesign CC)

I saw a few old posts from 2011 talking about this, but I was wondering if there have been any updates regarding lightbox in InDesign for DPS.
Whether I'm doing this for a photo gallery for my portfolio app or within an article, can I have a user tap a smaller image and display a larger/full screen version that I can show with text maybe?
Thanks in advance

Jeff or Bob, would you please explain how you did this a bit better? I've got the local HTML file, but I'm not sure of each of the steps to link it to a button or text frame properly. I'm not sure which action should be used, or how exactly the HTML file is linked. You can't use "Go to URL" because this is a local file, so I'm unsure.
Also, what happens if you move the Muse Export file - what is the best workflow to keep the Muse HTML export files with their respective InDesign projects?
Will this effect work when the exported pdf is read by Apple's Preview instead of Adobe Reader? Or is this one of the effects that are incompatible with Apple Preview?

Similar Messages

  • Lightbox Gallery - TCN Widget not displaying live

    Hi,
    I wonder if anyone could help with this please. I've downloaded the TCN Widget Lightbox Gallery and it works fine in preview mode but I can't get it to work properly live on the web. Whenever I click on a thumbnail, the large image does display but that's it - there's no graphics (beside the main image) and it's not placed properly etc.
    The site is:   http://www.valuevisionglasses.co.uk   and the relevant gallery pages from the drop down menu would be Ladies, Gents, Sunglasses.
    It's probably something obvious that I'm missing but I've been tearing my hair out for two days over this.

    Hi Ibby26,
    looking to your source code the first thing I saw (I know, I have to go deeper next time) was this little difference, please control it. You started with:
    <script src="scripts/jquery.js" type="text/javascript"></script>
    <link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />
    <script type="text/javascript" src="lightbox.js"></script>
    Widgets code is in my DW:
    <title>Lightbox Gallery : &lt;default&gt;</title>
    <script type='text/javascript' src='scripts/jquery.js'></script>
    <script type='text/javascript' src='scripts/lightbox.js'></script>
    <link type='text/css' href='css/lightbox.css' rel='stylesheet'/>
    <link type='text/css' href='css/sample_lightbox_layout.css' rel='stylesheet'/>
    <style type="text/css">
    ... and Lightbox actually responds very sensitively to deeper nesting and wide ramifications of directories and sometimes and sometimes even in long file names, like "Alpine-Titanium-Alp23-M.Gun-54-17.jpg". For this reason I created for all my lightbox-applications one single lightbox-directory. There you will find all my lightbox-php-html-files and all the subdirectories for the corresponding images and from there Lightbox worked.
    Hans-Günter

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

  • LightBox gallery not working

    i am trying to make a lightbox gallery . when i click first image , it show the content normal, even i close and opne , it work fine. when i come to image two , if i click it , it show me the lightbox for the first image.
    can any one help me please http://jsfiddle.net/wwavyh0y/2/

    Use jQuery Fancybox2.  Simply copy & paste this code into a new, blank document. 
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>HTML5, with Fancybox2 Viewer</title>
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <!--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>
        margin: 0;
        padding: 0;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    body {
        background: silver;
        font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    #wrapper {
        width: 90%;
        margin: 0 auto;
        background: #FFF;
        overflow: hidden;
    /**left sidebar**/
    aside {
        float: left;
        width: 25%;
        border-right: 1px dotted #999;
        min-height: 400px;
        padding: 2%
    /**this styles image container**/
    #thumbs {
        float: left;
        width: 75%;
    #thumbs li {
        list-style: none;
        float: left;
        width: 160px;
        margin: 10px 1% 0 1%; /**space between containers**/
    /**use same size images**/
    #thumbs img {
        width: 160px; /**adjust width to thumbnail**/
        height: 120px; /**adjust height to thumbnail**/
        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>
    <div id="wrapper">
    <aside> Left Sidebar </aside>
    <h1><a href="http://fancyapps.com/fancybox/">Fancybox2</a> Image Viewer</h1>
    <!--insert thumbnails with links to full size images below-->
    <ul id="thumbs">
    <li><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" /></a></li>
    <li><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" /></a></li>
    <li><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" /></a></li>
    <li><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" /></a></li>
    </ul>
    <!--end thumbs-->
    </div>
    <!--end wrapper-->
    <!--FancyBox function code-->
    <script>
    $(document).ready(function() {
        $('.fancybox').fancybox();
    </script>
    </body>
    </html>
    Nancy O.

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

  • Lightbox Gallery Widget for Mobile Site

    A few questions regarding Lightbox Gallery Widget...
    Is there a trick to getting a lightbox gallery inside of each Spry Tabbed Panels 2 tab?
    Is there a way to scale down the enlarged photos 50% with css for iPhone retina display (as can be done with Spry Content Slideshow)?
    Is there a way to show (make visible) the Prev/Next buttons on the enlarged images for touch screen? I've moved them outside of the image area, but the hover state doesn't seem to be editable with CSS.
    Thanks,
    Steve

    1, There is no trick, just make sure that each unique constructor is within each each tab.
    2 and 3 The widget is third party and as such you will need to obtain the information elsewhere like here http://leandrovieira.com/projects/jquery/lightbox/
    Gramps
    PS example of placing the widget inside a panel
        <div class="TabbedPanelsContent">
             <div id="gallery_2" class="lbGallery">
               <ul>
                 <li> <a href="images/lightboxdemo1.jpg" title=""><img src="images/lightboxdemo_thumb1.jpg" width="72" height="72" alt="Flower" /></a> </li>
                 <li> <a href="images/lightboxdemo2.jpg" title=""><img src="images/lightboxdemo_thumb2.jpg" width="72" height="72" alt="Tree" /></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">
    // BeginOAWidget_Instance_2127022: #gallery_2
              $(function(){
                   $('#gallery_2 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:           "#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>
        </div>

  • Flash lightbox gallery

    Hey everyone is there way to create a lightbox gallery using Adobe Flash? i have Flash as well but cs6
    thanks if anyone can help out?

    you would create movieclips for the black semi-transparent background and white background, use a database (like xml) with the urlloader class to supply image path/file names and size, the loader class to load external images and display a preloader movieclip and the backgrounds and use the tween class (or a 3rd party library like tweenlite) to tween the white background and fade-in the loaded image.

  • 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

  • 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

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

  • Photo Gallery display by date uploaded

    I would really like to have the photo gallery display images by date uploaded not alphabetical. I know this isn't possible but I remember somewhere on the old forum someone posting a workaround for this issue. Does any one know a workaround? I'm sure it had something to do with renaming the files.
    Thanks
    Karl

    Hi Sidney, thanks loads for your reply. If i try your method the most recent image still wont be placed at the beginning eg.
    If today's date is 01022012 then tomorrows date will be 02022012 which will still be placed after 01022012
    Eg
    01022012
    02022012
    Thanks again but is there any other method?
    Karl

Maybe you are looking for

  • Default interface

    Is there a way to revert back to the default user interface?

  • Harman Kardon Drive Play

    I have just Purchased a Harman Kardon Drive+ play for use with the i touch . It works perfectly . Ideal when driving and i can change track and album etc whilst driving . For 30 quid this is a must have for all drivers.

  • Getting error in popup search page window in oaf

    Hi ALL, I have a custom OAF page ,in that i am calling  a popup window by using java script.in the popup window i have to do search operation by selecting soem field. so for that i followed below approach. 1>Created a new AM 2>Created a new VO 3>Crea

  • Odd Battery

    This is my third iPod, and I am experiencing a strange phenomenon that I have not seen in my previous models. My iPod is fully charged, and I turn the iPod off. I then place the iPod on Hold. In the morning after I remove the hold button, the iPod wi

  • Oracle Mobile Server 11g - BerkelyDB corrupt.

    We have a client that currently uses Oracle Database Lite 10.3.0.3.0 to synce an olite database that interacts with a Win32 application. Due to the support being dropped they are in the process of migrating to Oracle Mobile Server 11g, however I have