Question

我正在使用Lightbox 2.51，我找不到解决方案将lb-dataContainer与关闭按钮和当前图像编号等移到顶部

enter image description here

我只找到旧版本的解决方案。

可以在此处找到代码：http://lokeshdhakar.com/projects/lightbox2/releases/lightbox2.51.zip

Answer 1

解决方案是使用数据容器更改外部容器：

Lightbox.prototype.build = function() {
  var $lightbox,
    _this = this;

  $("<div>", {id: 'lightboxOverlay'}).after
    (
          $('<div/>', {id: 'lightbox'}
          ).append(

          $('<div/>', {
            "class": 'lb-dataContainer'
          }).append($('<div/>', {
            "class": 'lb-data'
          }).append($('<div/>', {
            "class": 'lb-details'
          }).append($('<span/>', {
            "class": 'lb-caption'
          }), $('<span/>', {
            "class": 'lb-number'
          })), $('<div/>', {
            "class": 'lb-closeContainer'
          }).append($('<a/>', {
            "class": 'lb-close'
          }).append($('<img/>', {
            src: this.options.fileCloseImage
        })))
 )),

          $('<div/>', {"class": 'lb-outerContainer'}).append
          ( $('<div/>', {
                "class": 'lb-container'
              }).append($('<img/>', {
                "class": 'lb-image'
              }), $('<div/>', {
                "class": 'lb-nav'
              }).append($('<a/>', {
                "class": 'lb-prev'
              }), $('<a/>', {
                "class": 'lb-next'
              })), $('<div/>', {
                "class": 'lb-loader'
              }).append($('<a/>', {
                "class": 'lb-cancel'
              }).append($('<img/>', {
                src: this.options.fileLoadingImage
              }))))
          )

)
    ).appendTo($('body'));
  $('#lightboxOverlay').hide().on('click', function(e) {
    _this.end();
    return false;
  });

Answer 2

我的回答有点抽象，但我希望这对我的英语不好有所帮助和抱歉：）

你必须在lb-outerContainer之上创建一个div 找到这条线，我认为它在第85行。代码：

Lightbox.prototype.build = function() {
var $lightbox,
_this = this;
$("<div>", {
id: 'lightboxOverlay'
}).after
(
$('<div/>', {
id: 'lightbox'
}).append($('<div/>', {             //this is the div you have to append...
"class": 'lb-dataContainer'     
}).append($('<a/>', {
"class": 'lb-close',
"href":'#'
}).append($('<img/>', {
src: this.options.fileCloseImage
}))))
.append(
$('<div/>', {
"class": 'lb-outerContainer'    //this is the container
}).append($('<div/>', {
"class": 'lb-container'
}).append($('<img/>', {
"class": 'lb-image'
}), $('<div/>', {
"class": 'lb-nav'
}).append($('<a/>', {
"class": 'lb-prev'
}), $('<a/>', {
"class": 'lb-next'
})), $('<div/>', {
"class": 'lb-loader'
}).append($('<a/>', {
"class": 'lb-cancel'
}).append($('<img/>', {
src: this.options.fileLoadingImage
})))

然后把它放在你的CSS上

.lb-close{
float:right;
}

这将使你的浮动位于左上角。看看，你会明白的！

Answer 3

这是编辑lightbox-2.6.min.js文件的简单方法：

在lightbox-2.6.min.js文件中搜索以下代码，

FROM：

<div id='lightboxOverlay' class='lightboxOverlay'></div><div id='lightbox' class='lightbox'>    <div class='lb-outerContainer'><div class='lb-container'><img class='lb-image' src='' /><div class='lb-nav'><a class='lb-prev' href='' ></a><a class='lb-next' href='' ></a></div><div class='lb-loader'><a class='lb-cancel'></a></div></div></div><div class='lb-dataContainer'><div class='lb-data'><div class='lb-details'><span class='lb-caption'></span></div><div class='lb-closeContainer'><a class='lb-close'></a></div></div></div></div>

替换上述：

<div id='lightboxOverlay' class='lightboxOverlay'></div><div id='lightbox' class='lightbox'><div class='lb-dataContainer'><div class='lb-data'><div class='lb-details'><span class='lb-caption'></span></div><div class='lb-closeContainer'><a class='lb-close'></a></div></div></div><div class='lb-outerContainer'><div class='lb-container'><img class='lb-image' src='' /><div class='lb-nav'><a class='lb-prev' href='' ></a><a class='lb-next' href='' ></a></div><div class='lb-loader'><a class='lb-cancel'></a></div></div></div></div>

Answer 4

这是晚了，但是如果你想要最简单的方法到目前为止，只需使用以下4行CSS：

#lightbox {
  display: flex;
  flex-direction: column-reverse;    
}

flexbox会将容器上的显示顺序翻转为与DOM相反。

Answer 5

对于任何需要它的人来说，只有将关闭按钮移动到右上角的代码，将标题留在底部。网络上的标准用户界面。

使用以下代码在lightbox.js文件中构建灯箱：

Lightbox.prototype.build = function() {
  var $lightbox,
    _this = this;
  $("<div>", {
    id: 'lightboxOverlay'
  }).after($('<div/>', {
    id: 'lightbox'
  }).append($('<div/>', {
      "class": 'lb-outerContainer'
  }).append($('<div/>', {
      "class": 'lb-closeContainer'
  }).append($('<a/>', {
      "class": 'lb-close'
  }).append($('<img/>', {
      src: this.options.fileCloseImage
  })), $('<div/>', {
    "class": 'lb-container'
  }).append($('<img/>', {
    "class": 'lb-image'
  }), $('<div/>', {
    "class": 'lb-nav'
  }).append($('<a/>', {
    "class": 'lb-prev'
  }), $('<a/>', {
    "class": 'lb-next'
  })), $('<div/>', {
    "class": 'lb-loader'
  }).append($('<a/>', {
    "class": 'lb-cancel'
  }).append($('<img/>', {
    src: this.options.fileLoadingImage
  }))))), $('<div/>', {
    "class": 'lb-dataContainer'
  }).append($('<div/>', {
    "class": 'lb-data'
  }).append($('<div/>', {
    "class": 'lb-details'
  }).append($('<span/>', {
    "class": 'lb-caption'
  }), $('<span/>', {
    "class": 'lb-number'
  }))))))).appendTo($('body'));

这是关闭按钮的css：

.lb-closeContainer .lb-close {
float:right;
margin-top:-10px;
display:block;
outline-style:none;
text-decoration:none;
width:22px;
height:23px;
background:url(../images/layout/lightbox/close.png) no-repeat;
background-position: 0 0; 
_background-image:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/layout     
/lightbox/close.png', sizingMethod='scale');
}


.lb-closeContainer .lb-close:hover {
background:url(../images/layout/lightbox/close.png) no-repeat;
background-position: 0 100%;
_background-image:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/layout
/lightbox/close.png', sizingMethod='scale');    
}

Lightbox 2.51 - 如何将关闭按钮和图像编号移到顶部？

5 个答案: