通過鏈接打開現有的jQuery燈箱畫廊

Question

我有一個現有的jQuery colorbox畫廊，當我單擊在准備好文檔的文檔中初始化的4張圖像中的任何一張時，它可以正常工作：

$(document).ready(function () {
    if ($('.gallery-thumbnail').length > 0) {
        $('.gallery-thumbnail').colorbox({ rel: 'gallery-thumbnail', transition: 'fade' });
    }
});

我在頁面中也有一個鏈接，我也想打開這個相同的圖像庫。 我以為我會很可愛，嘗試復制一個用戶，使用$('.gallery-image').first().find('a').click();單擊其中一個圖像$('.gallery-image').first().find('a').click(); 當我在Chrome嵌入式控制台中鍵入它並按Enter ，它可以完美運行並打開圖片庫，但是當從代碼運行它時，它只是將畫廊打開並帶有橙色旋轉的GIF載入框。 之后，我嘗試在HTML錨上直接使用onclick處理程序，該處理程序的代碼$('.gallery-thumbnail').colorbox({rel: 'gallery-thumb', transition: 'fade' }); 這導致了與以前相同的無盡加載GIF。 為了確保我不會發瘋，我將OnClick事件處理程序掛接到運行以下代碼的函數上：

function showColorbox() {
    $('.gallery-thumbnail').each(function () {
        $(this).addClass('test');
    });
    $('.test').colorbox({rel: 'gallery-thumb', transition: 'fade' });
}

不幸的是，我仍然會遇到無休止的加載顏色框，但我驗證了我的圖像錨點都具有“測試”類。 在整個過程中-我還驗證了控制台中沒有JS錯誤。 任何幫助將不勝感激。

Answer 1

對此有一個常見問題解答條目： http : //www.jacklmoore.com/colorbox/faq/#faq-click

創建一個單獨的鏈接來打開畫廊

假設您已將Colorbox分配給文檔中的一組鏈接，但是您還希望有一個“打開畫廊”鏈接，用於打開該組中的第一項。 單擊“打開畫廊”時，您要阻止默認操作，然后觸發該第一個設置項目上的click事件。

var $gallery = $("a[rel=gallery]").colorbox();
$("a#openGallery").click(function(e){
    e.preventDefault();
    $gallery.eq(0).click();
});