Lightbox2：如何<a>在“ lb-prev”和“ lb-next”划分之間</a>添加“ EDIT” <a>？</a>

Question

我正在使用“ http://lokeshdhakar.com/projects/lightbox2/ ”中的lightbox2。 我可以根據需要進行所有工作，但是我想添加“編輯”功能，因此我可以打開一個頁面，該頁面允許我通過IPTC將數據添加到jpg圖像文件中。 我試圖在.js文件的“ lb-prev”和“ lb-next”錨之間放置“ <a> ”，然后修改了.css文件以包括“ lb-edit”並調整了寬度，但是當圖像顯示時，“ lb-next”在容器下面。 “ lb-prev”的css具有“ float：left”，而“ lb-next”的css具有“ float：right”，但是如果我在中間放一些東西，“ lb-next”會掉線。 我嘗試“ display：inline”無濟於事。 謝謝。 片段如下：

lightbox.js具有：

`<div class="lb-nav"><a class="lb-prev" href="" ></a><a class="lb-edit" href=""></a><a class="lb-next" href="" ></a></div>`

...和...

this.$lightbox.find('.lb-edit').on('click',function() {

  window.location.href="../../lb-edit.php"

});

lightbox.css具有：

.lb-prev, .lb-edit,.lb-next {
height: 100%;
cursor: pointer;
display: block;
}

`.lb-nav a.lb-prev {
 width: 33%;
 left: 0;
 float: left;
 background: url(../images/prev.png) left 48% no-repeat;
 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
 opacity: 0;
 -webkit-transition: opacity 0.6s;
 -moz-transition: opacity 0.6s;
 -o-transition: opacity 0.6s;
 transition: opacity 0.6s;
 }

 .lb-nav a.lb-prev:hover {
 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
 opacity: 1;
 }
 .lb-nav a.lb-edit {
 width: 34%;
 left: 0;
 margin-right:auto;margin-left:auto;
 background: url(../images/edit.png) left 48% no-repeat;
 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
 opacity: 0;
 -webkit-transition: opacity 0.6s;
 -moz-transition: opacity 0.6s;
 -o-transition: opacity 0.6s;
 transition: opacity 0.6s;
 }
.lb-nav a.lb-edit:hover {
 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
 opacity: 1;
 }  
 .lb-nav a.lb-next {
 display:inline;
 width: 33%;
 right: 0;
 float: right;
 background: url(../images/next.png) right 48% no-repeat;
 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
 opacity: 0;
 -webkit-transition: opacity 0.6s;
 -moz-transition: opacity 0.6s;
 -o-transition: opacity 0.6s;
 transition: opacity 0.6s;
 }

 .lb-nav a.lb-next:hover {
 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
 opacity: 1;
 }

Answer 1

關閉此...我更改了lb-prev，lb-next和lb-edit的順序，以便首先渲染兩個“結束”片段，然后將“ edit”部分放入中間。 天哪，但我喜歡這個東西！！！