Jquery Lightbox Not Working?

by frank on August 13, 2010

in Tips of the Week

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

Was this article useful?

rss feed icon

Email this article to yourself or...

rss feed icon

Subscribe to the RSS feed for more useful articles and tips.

Share this article with others

  • del.icio.us
  • Twitter
  • Reddit
  • StumbleUpon
  • Facebook
  • Digg
  • http://deadlytechnology.com/silverstripe/silverstripe-image-gallery/ SilverStripe 2.4 Image Gallery Tutorial : DataObjectManager Image Gallery | Deadly Technology

    [...] have had issues adding jquery plugins in the past mostly because of conflicts with multiple libraries declaring the $() function. I [...]

  • Aneat

    Still don’t know how to get this script to work with WordPress. No errors in the error console… loading.gif still shows up but the linked image doesn’t.

  • frank

    If the loading.gif image shows up you are at least on the right track, that means the script is running and generating an overlaid div for the gallery to sit in. I would double check the paths to your images, you should have markup something like: try checking that the link_to_image.jpg works and that the file exists.