我有一个奇怪的问题,灯箱似乎工作但没有出现更大的图像.
控制台中也没有错误.
我的画廊HTML设置如下:
<a href="images/here.jpg" rel="lightBox"><img src="images/here.jpg" alt="FAST Festival Image Gallery"></a>
我确保JQuery,JQuery UI,LightBox.css,LighBox.js和jquery.smooth-scroll.min.js都存在.
该页面是:http://www.fastfestival.com.au/gallery.html
有谁知道发生什么事了?
编辑:
检查控制台我发现当它被调用时,LightBox div中没有出现图像
< div id =“lightBoxOverlay”style =“width:1633px; height:1234px; display:block;”>< / div>
解决方法
与jQuery 1.9的冲突与
new behavior for the .after() method有关.您可以在LightBox中重写LightBox.prototype.build方法,以避免在断开连接的节点上使用.after()方法,LightBox将再次使用jQuery 1.9.
我的快速黑客攻击解决方案(有效)紧随其后.它可以通过更多链接进行清理,但我决定将其留待以后或者可能只是等待LightBox v2.51加速以包含标准化修复.
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; }); };