Skip navigation
Currently Being Moderated

Lightbox close but still not working

Jan 29, 2013 2:12 PM

Tags: #dreamweaver #images #lightbox



I am back with another question and it very well may not be my last.  I have the lightbox working now in design view.  However, when viewing it in Safari or Firefox the pictures are just question marks, which is really funny because I question if I should be doing this at all.  Anyway, below is my source code.  Any suggestions?  Please keep in mind that I am a beginner and I was following step by step instructions by Createthenet on youtube.  I just can't get his, or the lightbox widget to work.  Yes, I do have content in here.  I hope this is not a bad thing as the page is not laid out in totality.  Again, thanks for help.  Maria


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

   ""><!-- InstanceBegin template="/Templates/sweetwater-commercial.dwt" codeOutsideHTMLIsLocked="false" -->




          <script type="text/javascript" src="../js/jquery.js"></script>

          <script type="text/javascript" src="../js/timothy.js"></script>


    <link href="../css/styles.css" rel="stylesheet" type="text/css" media="screen">

          <link href="../css/print.css" rel="stylesheet" type="text/css" media="print">



    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

          <meta http-equiv="Content-Type" content="cache" />

          <meta name="robots" content="INDEX,FOLLOW" />

          <meta name="keywords" content="home builder, Florida home builder, custom home builder, Sugarmill Woods, Pine Ridge, Black Diamond, Citrus Springs, Citrus County" />

          <meta name="description" content="Home Builder in Sugarmill Woods Florida, builder of new homes in Citrus County Florida" />

<!-- InstanceBeginEditable name="doctitle" -->

          <title>Sugarmill Woods Home Builder, Sweetwater Homes Builder of New Homes in Florida</title>

          <style type="text/css">

/* BeginOAWidget_Instance_2127022: #gallery */



                    .lbGallery {

                              /*gallery container settings*/

                              background-color: #cccccc;

                              padding-left: 20px; 

                              padding-top: 20px; 

                              padding-right: 20px; 

                              padding-bottom: 20px; 

                              width: 800px;

                              height: auto;



                    .lbGallery ul { list-style: none; margin:0;padding:0; }

                    .lbGallery ul li { display: inline;margin:0;padding:0; }

                    .lbGallery ul li a{text-decoration:none;}


                    .lbGallery ul li a img {

                              /*border color, width and margin for the images*/

                              border-color: #008080;

                              border-left-width: 10px;

                              border-top-width: 10px;

                              border-right-width: 10px;

                              border-bottom-width: 10px;







                    .lbGallery ul li a:hover img {

                              /*background color on hover*/

                              border-color: #ffffff;

                              border-left-width: 10px;

                              border-top-width: 10px;

                              border-right-width: 10px;

                              border-bottom-width: 10px;



                    #lightbox-container-image-box {

                              border-top: 2px solid #ffffff;

                              border-right: 2px solid #ffffff;

                              border-bottom: 2px solid #ffffff;

                              border-left: 2px solid #ffffff;



                    #lightbox-container-image-data-box {

                              border-top: 0px;

                              border-right: 2px solid #ffffff;

                              border-bottom: 2px solid #ffffff;

                              border-left: 2px solid #ffffff;


/* EndOAWidget_Instance_2127022 */


<!-- InstanceEndEditable -->

          <!-- Google Analytics Code Goes Below Here -->



    <!-- End Google Analytics Code -->




<!-- InstanceBeginEditable name="head" -->


<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">

<script type="text/xml">



  <oa:widget wid="2127022" binding="#gallery" />




<!-- InstanceEndEditable -->







<div id="outer">



<div id="wrapper">


                    <div id="logo">

                  <img src="../images/cmh-banner.jpg" width="900" height="200" />




                    <div id="social-media-icons">


                      <li><a href=" uilder-Citrus-County-Florida/155328264499419"><img src="../images/icons/facebook_32.png" /></a></li>

              <li><a href="!/SweetwaterHomes"><img src="../images/icons/twitter_32.png" /></a></li>

                <li><a href=""><img src="../images/icons/youtube_32.png" /></a></li>





                    <div id="topnav">


                  <li><a href="index.html">HOME</a></li>

            <li><a href="about.html">ABOUT US</a></li>

            <li><a href="ourhomes.html">OUR MOST POPULAR PLANS</a></li>

            <li><a href="our-other-plans.html">OUR OTHER PLANS</a></li>

            <li><a href="custom-homes.html">CUSTOM HOMES</a></li>



            <li><a href="communities.html">COMMUNITIES</a></li>

            <li><a href="commercial.html">COMMERCIAL</a></li>

            <li><a href="findus.html">FIND US</a></li>

            <li><a href="requestinfo.html">CONTACT US</a></li>





                    <div id="banner"></div>


        <div id="content-fullwidth"><!-- InstanceBeginEditable name="content" -->

          <h1>Sweetwater Commercial Construction</h1>

          <p>As the largest custom builder in Citrus County, we have an excellent working relationship with the Citrus County Building and Permitting Departments. This allows us to coordinate permit approvals and inspections, thereby avoiding unnecessary project delays.</p>

          <div id="gallery" class="lbGallery">


              <li> <a href="/images/commercial1-TLC.png" title=""><img src="/images/commercial1-TLCsmall.png" width="259" height="72" alt="" /></a> </li>

              <li> <a href="/images/custom2.PNG" title=""><img src="/images/commercial2-shirdisaismall.png" width="120" height="72" alt="" /></a> </li>

              <li> <a href="/images/commercial3-citrusneph.png" title=""><img src="/images/commercial3-citrusnephsmall.png" width="160" height="72" alt="" /></a> </li>

              <li> <a href="/images/commercial4-swcon.png" title=""><img src="/images/commercial4-swconsmall.png" width="128" height="72" alt="" /></a> </li>

              <li> <a href="/images/commercial5-swplaza.png" title=""><img src="/images/commercial5-swplazasmall.png" width="188" height="72" alt="" /></a> </li>

<li> <a href="/images/commercial6-hagar.png" title=""><img src="/images/commercial6-hagarsmall.png" width="154" height="72" alt="" /></a> </li>           




          <script type="text/javascript">

// BeginOAWidget_Instance_2127022: #gallery




                              $('#gallery a').lightBox({

                                        imageLoading:                              '/images/lightbox/lightbox-ico-loading.gif',                    // (string) Path and the name of the loading icon

                                        imageBtnPrev:                              '/images/lightbox/lightbox-btn-prev.gif',                               // (string) Path and the name of the prev button image

                                        imageBtnNext:                              '/images/lightbox/lightbox-btn-next.gif',                               // (string) Path and the name of the next button image

                                        imageBtnClose:                              '/images/lightbox/lightbox-btn-close.gif',                    // (string) Path and the name of the close btn

                                        imageBlank:                                        '/images/lightbox/lightbox-blank.gif',                               // (string) Path and the name of a blank image (one pixel)

                                        fixedNavigation:                    true,                    // (boolean) Boolean that informs if the navigation (next and prev button) will be fixed or not in the interface.

                                        containerResizeSpeed:          400,                               // Specify the resize duration of container image. These number are miliseconds. 400 is default.

                                        overlayBgColor:                     "#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:                              .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*/





          <p>Routine meetings between the architect, engineers, project manager, subcontractors, project superintendent, and suppliers throughout the construction process will provide cohesiveness and unity, thus insuring compliance with the construction documents (drawings, specifications, and related Codes). This will permit final AHCA construction surveys (including system checks) to flow smoothly, mininmizing questions and possible findings that could arise from those inspections.</p>

          <p> </p>

        <!-- InstanceEndEditable --></div>


                    <div id="footer">

                      <p class="footer-text">Copyright 2013 - Sweetwater Homes of Citrus, Inc.| All Rights Reserved CBC 049056</p>








<!-- InstanceEnd --></html>



<!-- Timothy Framework - -->



<!-- This work is licensed under the MIT License - -->

  • Currently Being Moderated
    Jan 29, 2013 2:16 PM   in reply to mariadouble

    When viewing in Safari and Firefox, is that looking at an online version, or just using Preview In Browser?


    Is the page uploaded?


    Generally a link to the actual page will work better than pasted code, especially if there is an image problem.

    Mark as:
  • Currently Being Moderated
    Jan 29, 2013 2:52 PM   in reply to mariadouble

    What version of Safari and Firefox are you running?


    Have you cleared the browser cache to make sure you aren't seeing an old version of the page?


    Dreamweaver's Live View is basically Safari, so you should be seeing the same thing, or something very similar at least in the Safari browser.


    I would make a test folder on your site and upload it to that. Once the problem is found, you can delete the folder and all of it's contents.

    Mark as:
  • Currently Being Moderated
    Jan 29, 2013 5:05 PM   in reply to mariadouble

    The syntax error is caused by the orphaned opening <script> tag at the top of the page:

    <!-- InstanceBeginEditable name="head" -->


    <script src="../scripts/jquery.js" type="text/javascript"></script>

    <script src="../scripts/lightbox.js" type="text/javascript"></script>



    As for the images, as Jon has mentioned, you would be best to post a live page. It could be any number of things. You are using root relative links for the images - have you defined the site properly? Do they work in Live View?

    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points