jQuery lightGallery切換縮略圖

對jQuery lightGallery印象非常深刻，使用起來非常愉快。根據lightGallery網站上的第一個示例，帶動畫縮略圖的圖庫（http://sachinchoolur.github.io/lightGallery/examples.html）我已將導航箭頭移至兩側，但隱藏了縮略圖。jQuery lightGallery切換縮略圖

#lg-gallery .thumb-cont .thumb-info { 
    display: none; 
} 
#lg-action { 
    position: static; 
} 
#lg-action a#lg-prev, 
#lg-action a#lg-next { 
    margin-top: -14px !important; 
    position: absolute; 
    top: 50%; 
    z-index: 9999999; 
    font-size: 18px; 
} 
#lg-action a#lg-prev { 
    left: 18px; 
} 
#lg-action a#lg-next { 
    right: 18px; 
}

我提出在窗口的右上角旁邊的畫廊關閉按鈕，在打開的拇指按鈕，如下所示。

#lg-action a.cl-thumb { 
    position: absolute; 
    top: 18px; 
    right: 50px; 
    z-index: 9999999; 
}

那麼，如何使用拇指按鈕連接拇指的開/關切換？我想我需要看onOpen回調，但我不知道如何使用它，也許這樣的事情。

onOpen: function() { 
    $("#lg-action a.cl-thumb").on("click", function(e) { 
     e.preventDefault(); 
     if ($("#lg-gallery").hasClass("open")) { 
      $("#lg-gallery .thumb-cont").slideDown(); 
      $("#lg-gallery").removeClass('open'); 
     } 
     return false; 
    }); 
}

這（顯然）不起作用。

來源

2015-05-08 steveunit

通過在onOpen回調中添加一個函數來解決這個問題。當第一次點擊拇指按鈕時，我添加了一個名爲「open-toggle」的類（並將所需的CSS設置爲）＃lg-gallery.open。第二次點擊從＃lg-gallery中刪除'open-toggle'和'open'類並重新設置css。

onOpen: function() { 
    $("#lg-action a.cl-thumb").on("click", function() { 
     $gallery = $("#lg-gallery"); 
     if ($gallery.hasClass("open-toggle")) { 
      $gallery.removeClass('open-toggle open'); 
      $("#lg-gallery .lg-slide").css("padding-bottom", "0"); 
     } 
     else { 
      $gallery.addClass("open-toggle"); 
      $("#lg-gallery.open .lg-slide").css("padding-bottom", "120px"); 
     } 
    }); 
}

編輯

我發現圖像不出去的方式，如果你撥動拇指吧，但他們離開的方式對網站上的例子。我打開了螢火蟲，發現該網站示例頁面有一個名爲base.css文件，其中包含以下行：

* { 
    box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 

}

我加入這行到我的CSS和動畫填充底部，使得圖像沒」當拇指被切換時，不會跳到大小。

onOpen: function() { 
    $("#lg-action a.cl-thumb").on("click", function() { 
     $gallery = $("#lg-gallery"); 
     if ($gallery.hasClass("open-toggle")) { 
      $("#lg-gallery .lg-slide").animate({ 
       "padding-bottom": 0 
      }, 500);  
      $gallery.removeClass('open-toggle open'); 
     } 
     else { 
      $("#lg-gallery.open .lg-slide").animate({ 
       "padding-bottom": 120 
      }, 500); 
      $gallery.addClass("open-toggle"); 
     } 
    }); 
}

無論如何，也許這將指向某人在正確的方向。

來源

2015-05-09 20:02:07 steveunit

jQuery lightGallery切換縮略圖

回答

相關問題