Skip navigation
liningchaos
Currently Being Moderated

LightBox is opening in a new window!

May 6, 2013 9:33 AM

Tags: #error #jquery #mac #dreamweaver #javascript #css #cs6 #lightbox_gallery_widget #parralax #lightbox_problems

I have gone though so many other old discussion on this subject and have tried everything i have read about but nothing seemes to be working If anybody could have at look at my code below it would be so helpful maybe i have missed some think

 

I would also like to add this is my very first time coding so it could be super **** (pardon my french)

 

Thanks

 

<!doctype html>

<html class="no-js" lang="en">

<head>

  <meta charset="utf-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

 

 

<title>Portfolio</title>

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

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

  <link rel="stylesheet" href="css/reset.css">

  <link rel="stylesheet" href="css/style.css">

  <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: transparent;

                              padding-left: 20px; 

                              padding-top: 20px; 

                              padding-right: 20px; 

                              padding-bottom: 20px; 

                              width: 540px;

                              height: auto;

                              text-align:left;

                    }

                    .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: 10px;

                              margin-left:5px;

                              margin-right:5px;

                              margin-top:5px;

                              margin-bottom:5px:

                              }

 

                    .lbGallery ul li a:hover img {

                              /*background color on hover*/

                              border-color: #000000;

                              border-left-width: 10px;

                              border-top-width: 10px;

                              border-right-width: 10px;

                              border-bottom-width: 10px;

                    }

 

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

<div id="main" role="main">

 

 

          <!-- Section #1 / Intro -->

          <section id="first" class="story" data-speed="8" data-type="background">    

            <div class="smashinglogo" data-type="sprite" data-offsetY="100" data-Xposition="50%" data-speed="-2"></div>

                    <article><img src="images/tutorial-title.png" alt="tutorial-title" width="711" height="242" /></article>

          </section>

 

 

          <!-- Section #2 / Background Only -->

          <section id="second" class="story" data-speed="4" data-type="background">

               <div class="smashinglogo2" data-type="sprite" data-offsetY="100" data-Xposition="50" data-speed="-2"></div>

      <article>

        <div id="gallery" 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

 

 

                    $(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:                     "#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:                              0.9,                    // (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>

      </article>

    </section>

 

 

          <!-- Section #3 / Photos -->

          <section id="third" class="story" data-speed="6" data-type="background" data-offsetY="250">    

                    <div class="photograph" data-type="sprite" data-offsetY="1250" data-Xposition="25%" data-speed="2"></div>

              <article>

                        <h2>Scrolling Sprites</h2>

                        <div class="textbox">    

                                  <p>The next step in your parallax scrolling adventure is to create some sprites!</p>

                                  <p>I have cut out one of the photos in this background and use it as a sprite. It scrolls at a different speed to the background <i>and</i> the window, and it's this effect that's used so well on Nike Better World and other parallax sites..</p>

                                  <p>Using too many sprites can slow down older computers, and you need to use some clever maths (and trial & error!) to work out their placement on the page.</p>

                        </div>

              </article>

          </section>

 

 

 

          <!-- Section #4 / HTML5 Video -->

          <section id="fourth" class="story" data-speed="8" data-type="background" data-offsetY="250">

              <article>

                        <h2>HTML5 Video</h2>

                        <div class="textbox">    

                                  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

                                  <p>Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

                                  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. o.</p>

                        </div>

              </article>

                    <video controls width="640" height="480" data-type="video" data-offsetY="2400" data-speed="1.5">

                              <source src="video/parallelparking.theora.ogv" type="video/ogg" />

                              <source src="video/parallelparking.mp4" type="video/mp4" />

                              <source src="video/parallelparking.webm" type="video/webm" />

                    </video>

          </section>

 

 

          <!-- Section #5 / The End-->

          <section id="theend" class="story" data-speed="8" data-type="background" data-offsetY="250">    

                    <div class="byebye" data-type="sprite" data-offsetY="-1600" data-Xposition="50%" data-speed="-2"></div>

          </section>

 

</div> <!-- // End of #main -->

 

 

 

 

 

 

  <!-- Our Javascript, starting with jQuery -->

  <script src='js/libs/jquery-1.6.1.min.js'></script>

<script src="js/script.js"></script>

  <!--[if lt IE 7 ]>

    <script src="js/libs/dd_belatedpng.js"></script>

    <script>DD_belatedPNG.fix("img, .png_bg");

  <![endif]-->

 

 

</body>

</html>

 
Replies
  • Currently Being Moderated
    May 6, 2013 9:51 AM   in reply to liningchaos

    For questions like this, we really need to see a link to a live test page.  Don't forget to upload all the scripts and other supporting files to your remote server.

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    May 6, 2013 10:51 AM   in reply to liningchaos

    Ultimately, you need a remote server to host your site.   Simply upload your problem page to a TEST folder on your remote server.  Delete that folder when your question has been answered.

     

    If you don't have permanent web hosting yet and you're a Creative Cloud user, you can upload to Business Catalyst. 

     

    Or find a free web host for temporary testing & debugging.

    http://www.000webhost.com/

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    May 7, 2013 11:22 AM   in reply to liningchaos

    seriously need some hepl right no its getting very close to my deadline is there anyone out there that can have a look over this????

     

    Not without a link to your page.

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    May 7, 2013 11:59 AM   in reply to Nancy O.

    Is it opening in a new page (two tabs or windows open for your browser), or is it simply opening the large image in the current browser window?

     

    Typically, if the image is opening itself in the browser window, instead of in a modal window within the page you are viewing, it's because your links to the javascript or css files are wrong.

     

    Without seeing the page in action within an actual browser, it's pretty much guesswork.

     
    |
    Mark as:
  • Currently Being Moderated
    May 7, 2013 12:02 PM   in reply to Jon Fritz II

    You also appear to be missing this in your images...

     

    rel="lightbox"

     

    That attribute is what determines if the lightbox code is to be attached to an image (if you are using Lightbox by Lokesh Dhakar)

     
    |
    Mark as:
  • Currently Being Moderated
    May 8, 2013 7:47 AM   in reply to liningchaos

    Nope, that one is different. The code I gave won't help.

     

    Make sure all of your .css and .js files are where your links are pointing. Also make sure your cass classes and ids are called correctly.

     

    If something is supposed to be labeled as <div id="gallery1"> and you have <div id="gallery"> it will break.

     
    |
    Mark as:
  • Currently Being Moderated
    May 8, 2013 8:21 AM   in reply to liningchaos

    You may be having a css conflict then.

     

    If you are defining a class or id in more than one of the following, it could be breaking your lightbox. Especially if one of these is not being used in your test page (also look at the embedded css in the <head> of your page) ...

     

      <link rel="stylesheet" href="css/style.css">

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

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

     
    |
    Mark as:
  • Currently Being Moderated
    May 8, 2013 10:00 AM   in reply to liningchaos

    Check that .css page for any ids or classes that have the same name as those in the other sheets listed.

     

    This would be much, much simpler to diagnose if you could upload your pages and post a link to them here. Even if you put everything into a test folder on your server (it doesn't need to be viewable by the general public as your index.html page)

     

    Everything we suggest is going to be a guess until we can see all of your code running in a browser.

     
    |
    Mark as:
  • Currently Being Moderated
    May 8, 2013 12:12 PM   in reply to liningchaos

    If you have purchased a domain name and have a hosting plan, the hosting provider would have given you your FTP credentials and the address to transfer files to. Your FTP credentials usually contain the following items...

     

    Name

    Password

    Server Name/IP

    Root Directory

     

    If you have those things, it's a simple matter of adding them to the FTP information under Site > Manage Sites > Edit and then uploading the files. For testing purposes, it's easiest if you create a new folder called TEST within your site and do a Save As to get a page into it, then upload the TEST folder along with any image, script or stylesheet folders.

     

    If you don't have those four things, your website cannot be placed online and cannot be seen by anyone who isn't sitting in front of your development computer.

     
    |
    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