>/D_
Published on

Jquery Lightbox Not Working?

Authors
  • avatar
    Name
    Frank
    Twitter

Had a struggle getting this jquery lightbox working recently, the solution for me was to alter the markup of the popup div because some divs were not closing correctly with />.

Basically I had to replace this portion of code:

/**
 * Create the jQuery lightBox plugin interface
 *
 * The HTML markup will be like that:
  <div id="jquery-overlay"></div>
  <div id="jquery-lightbox">
    <div id="lightbox-container-image-box">
      <div id="lightbox-container-image">
        <img src="../fotos/XX.jpg" id="lightbox-image">
        <div id="lightbox-nav">
          <a href="#" id="lightbox-nav-btnPrev"></a>
          <a href="#" id="lightbox-nav-btnNext"></a>
        </div>
        <div id="lightbox-loading">
          <a href="#" id="lightbox-loading-link">
            <img src="../images/lightbox-ico-loading.gif">
          </a>
        </div>
      </div>
    </div>
    <div id="lightbox-container-image-data-box">
      <div id="lightbox-container-image-data">
        <div id="lightbox-image-details">
          <span id="lightbox-image-details-caption"></span>
          <span id="lightbox-image-details-currentNumber"></span>
        </div>
        <div id="lightbox-secNav">
          <a href="#" id="lightbox-secNav-btnClose">
            <img src="../images/lightbox-btn-close.gif">
          </a>
        </div>
      </div>
    </div>
  </div>
 *
 */
function _set_interface() {
 
  // Apply the HTML markup into body tag
  //$('body').append('<div id="jquery-overlay"></div><div id="jquery-lightbox"><div id="lightbox-container-image-box"><div id="lightbox-container-image"><img id="lightbox-image" /><div style="" id="lightbox-nav"><a href="#" id="lightbox-nav-btnPrev"></a><a href="#" id="lightbox-nav-btnNext"></a></div><div id="lightbox-loading"><a href="#" id="lightbox-loading-link"><img src="' + settings.imageLoading + '"></a></div></div></div><div id="lightbox-container-image-data-box"><div id="lightbox-container-image-data"><div id="lightbox-image-details"><span id="lightbox-image-details-caption"></span><span id="lightbox-image-details-currentNumber"></span></div><div id="lightbox-secNav"><a href="#" id="lightbox-secNav-btnClose"><img src="' + settings.imageBtnClose + '" /></a></div></div></div></div>'); 
  $('body').append('<div id="jquery-overlay"></div><div id="jquery-lightbox"><div id="lightbox-container-image-box"><div id="lightbox-container-image"><img id="lightbox-image" /><div style="" id="lightbox-nav"><a href="#" id="lightbox-nav-btnPrev"></a><a href="#" id="lightbox-nav-btnNext"></a></div><div id="lightbox-loading"><a href="#" id="lightbox-loading-link"><img src="' + settings.imageLoading + '" /></a></div></div></div><div id="lightbox-container-image-data-box"><div id="lightbox-container-image-data"><div id="lightbox-image-details"><span id="lightbox-image-details-caption"></span><span id="lightbox-image-details-currentNumber"></span></div><div id="lightbox-secNav"><a href="#" id="lightbox-secNav-btnClose"><img src="' + settings.imageBtnClose + '" /></a></div></div></div></div>');

jquery.lightbox-0.5.new