2

I have several pages made from the a template that has a navigation made with idTabs, in javascript.

This is what I have in <head>:

 <script type="text/javascript" src="jquery.idTabs.min.js"></script>
 <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" />

Then in <body>: 

<div id="poze">
  <div id="gallery" class="lbGallery">
    <ul>
      <li> <a href="images/lightboxdemo2.jpg" title=""><img src="images/lightboxdemo_thumb2.jpg" width="72" height="72" alt="Flower" /></a> </li>
      <li> <a href="images/lightboxdemo5.jpg" title=""><img src="images/lightboxdemo_thumb5.jpg" width="72" height="72" alt="Tree" /></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:         .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>

The navigation has two links: a <div> with text, and a <div> with lightbox gallery. The lightbox is a widget from Dreamweaver.

<div id="navidtabs">
  <ul class="idTabs">
    <li><a href="#info">informatii</a></li>
    <li><a href="#pictures">poze</a></li>
  </ul>
</div>

Something unbelievable happens: I apply the template to a new page, make the modifications, save it, load it into the wamp server, switch between the navigation links, test the lightbox, it works! But when I switch for example, to a different page, and return, the lightbox crashes. I can see the pictures, but when I click it opens another page just for the picture.

I forgot to say that I have a third <div> conected into the navigation, a select command to retrieve data from database. The entire file is PHP.

What can I do to mantain the lightbox effect?

martin clayton
  • 76,436
  • 32
  • 213
  • 198
georgeB
  • 164
  • 1
  • 9
  • 1
    Any errors/notices/warning in console? – CuriousMind Nov 26 '11 at 11:49
  • what console are u talking about? no errors, warnings. i m using firefox. do u need more code? – georgeB Nov 26 '11 at 11:51
  • Try Checking javascript console for any error thrown by the script? – CuriousMind Nov 26 '11 at 11:55
  • i m a begginder, where do i find javascript console? i underline the fact that i have dreamweaver.10x – georgeB Nov 26 '11 at 11:58
  • Checkout Debugging JavaScript(https://developer.mozilla.org/en/Debugging_JavaScript), it should give you some pointers on how to find errors in your javascript code. – CuriousMind Nov 26 '11 at 12:21
  • the javascript shouldn t have errors at all, because i just inserted it form dreamweaver. no modifications made, except inserting my own photos. – georgeB Nov 26 '11 at 12:28
  • **jQuery plugins should always load after the framework itself**. As i can see your HTML loads `jquery.idTabs.min.js` before `scripts/jquery.js`. This may create a JS error and your JS breaks. _by the way, Google Chrome has a integrated console by default. You can access by pressing F12 on your keyboard. You'll see a button named Console._ Hope this will help solving the problem. – doptrois Jun 07 '12 at 17:35

0 Answers0