JQuery Lightbox: thumbnails OK, background dims, but no large image shows

Question

I have a weird issue where lightbox appears to be working but no larger image appears.

Links to images are correct and thumbnails are showing but no full size image.

There are also no errors in the console.

I have my gallery HTML set up as such:

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

I have ensured that JQuery, JQuery UI, Lightbox.css, Lighbox.js and jquery.smooth-scroll.min.js are all present.

The page is: http://www.fastfestival.com.au/gallery.html

Does anyone know whats happening at all?

EDIT:

Checking in the console I see there is not image appearing in the Lightbox div when it is envoked

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

Answer 1

The conflict with jQuery 1.9 has to do with new behavior for the .after() method . You can rewrite the Lightbox.prototype.build method in Lightbox to avoid using the .after() method on disconnected nodes and Lightbox will work with jQuery 1.9 again.

My quickly hacked together solution (that works) follows. It could be cleaned up with more chaining, but I've decided to leave that for later or probably just to wait for Lightbox v2.51 to be revved 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 2

It appears that this version of LightBox isnt compatible with the lastest version of JQuery.

I had linked to version 1.9 hosted on Google. I changed to version 1.7 that comes with the download and it works

Answer 3

You have to use a bigger image href in the anchor tag, it isnt automatic. You link to a bigger version of the picture and instead of the browser taking you there it shows it in a fancybox. But you still have to supply the 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 was loading up jquery 1.10, a newer version than on my production site which still runs jquery 1.8.3. For some reason, this broke Lightbox2 (v2.51) exactly as you describe--screen goes dark but no image is shown. Not sure if this is a jquery or lightbox issue, but so that I could push out my latest changes to production I just manually forced my app to use the previous version of jquery v1.8.3 using a 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" %>

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

I know that linking in this way isn't ideal but I was having issues trying to use an earlier version of the jquery-rails gem, so doing things manually at least for a while resolved it for me. Hope this helps someone else.