JQuery Lightbox: thumbnails OK, background dims but large image is not displayed

Question

I have a strange problem when lightboxes work but a larger image is not displayed.

Image links are correct, and thumbnails are displayed, but without a full-size image.

There are also no errors in the console.

I have my HTML gallery installed:

<a href="images/here.jpg" rel="lightbox[gallery]"><img src="images/here.jpg" alt="FAST Festival Image Gallery"></a> 

I made sure that all jQuery, jQuery UI, Lightbox.css, Lighbox.js and jquery.smooth-scroll.min.js are present.

Page: http://www.fastfestival.com.au/gallery.html

Does anyone know what is going on at all?

EDIT:

Verification in the console. I see that there is no image in the Lightbox window when it is displayed.

<div id="lightboxOverlay" style="width: 1633px; height: 1234px; display: block;"></div>

Answer 1

It looks like this version of LightBox is not compatible with the latest version of jQuery.

I contacted version 1.9 hosted by Google. I switched to version 1.7, which comes with download and works

Answer 2

The conflict with jQuery 1.9 is due to a new behavior for the .after () method . You can rewrite the Lightbox.prototype.build method to lightbox to avoid using the .after () method for disabled nodes, and lightbox will work with jQuery 1.9 again.

The following is my quickly hacked solution (what works). It could have been cleaned up with a lot of chaining, but I decided to leave it for a later one or maybe just wait until Lightbox v2.51 is updated to include a standardized fix.

 Lightbox.prototype.build = function() { var $lightbox, _this = this; // Editing here for jQuery 1.9 conflict $("<div>", { "id": "lightboxOverlay" }).appendTo("body"); lightbox = $("<div>", { "id": "lightbox" }); outerContainer = $("<div>", { "class": "lb-outerContainer" }); container = $("<div>", { "class": "lb-container" }); $(container).append($("<img>", { "class": "lb-image" })); nav = $("<div>", { "class": "lb-nav" }); $(nav).append($("<a>", { "class": "lb-prev" })); $(nav).append($("<a>", { "class": "lb-next" })); loader = $("<div>", { "class": "lb-loader" }); $(loader).append($("<a>", { "class": "lb-cancel" }).append($("<img>", { "src": this.options.fileLoadingImage }))); $(container).append(nav); $(container).append(loader); $(outerContainer).append(container); dataContainer = $("<div>", { "class": "lb-dataContainer" }); data = $("<div>", { "class": "lb-data" }); details = $("<div>", { "class": "lb-details" }); $(details).append($("<span>", { "class": "lb-caption" })); $(details).append($("<span>", { "class": "lb-number" })); closeContainer = $("<div>", { "class": "lb-closeContainer" }); $(closeContainer).append($("<a>", { "class": "lb-close" }).append($("<img>", { "src": this.options.fileCloseImage }))); $(data).append(details); $(data).append(closeContainer); $(dataContainer).append(data); $(lightbox).append(outerContainer); $(lightbox).append(dataContainer); $(lightbox).appendTo("body"); // End custom changes $('#lightboxOverlay').hide().on('click', function(e) { _this.end(); return false; }); $lightbox = $('#lightbox'); $lightbox.hide().on('click', function(e) { if ($(e.target).attr('id') === 'lightbox') _this.end(); return false; }); $lightbox.find('.lb-outerContainer').on('click', function(e) { if ($(e.target).attr('id') === 'lightbox') _this.end(); return false; }); $lightbox.find('.lb-prev').on('click', function(e) { _this.changeImage(_this.currentImageIndex - 1); return false; }); $lightbox.find('.lb-next').on('click', function(e) { _this.changeImage(_this.currentImageIndex + 1); return false; }); $lightbox.find('.lb-loader, .lb-close').on('click', function(e) { _this.end(); return false; }); }; 

Answer 3

You should use a larger href image in the anchor tag, this is not automatic. You refer to a larger version of the image, and instead of the browser showing you there, it shows it in fancybox. But you still need to provide an image.

 <a href="images/here_big.jpg" rel="lightbox[gallery]"><img src="images/here.jpg" alt="FAST Festival Image Gallery"></a> 

Answer 4

I found out that the latest version of jquery-rails gem v2.2.0 downloaded jQuery 1.10, a newer version than on my production site, which is still running jquery 1.8.3. For some reason, it broke Lightbox2 (v2.51) exactly as you described - the screen goes dark but the image does not appear. Not sure if this is a jquery or lightbox problem, but so that I could push out my latest production changes, I just manually forced my application to use the previous version of jquery v1.8.3 using the script tag in my application layout:

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <%= javascript_include_tag "application" %> 

Be sure to place it above the javascript_include_tag, which creates an asset pipeline and all other javascript files. Also, comment out any jquery references in application.js to disable it.

I know that the link in this way is not perfect, but I had problems trying to use an earlier version of jquery-rails gem, so doing something manually at least for a while resolved this for me. Hope this helps someone else.