自定義圖片庫的超大插件

Question

我的相冊有問題。

我需要更新一個全局變量...看起來很容易，但是它不起作用...知道這里有什么問題嗎？ 可能是超大文件在加載時可以工作，並且一旦頁面加載后就無法更新。

• 我的初始全局變量在頁面頂部聲明
• 每個縮略圖都有一類全屏可供選擇
• 我的點擊功能獲取錨的href並更新變量
• 在幻燈片圖像數組中調用該變量

這是我的代碼：

$path = '../images/bg-gallery.jpg'; //set initial image

<div><a class="full-screen" href="../images/gallery-imgs/photo-gallery/01.jpg"><img src="../images/gallery-imgs/photo-gallery/01.jpg" /></a></div>

$('.full-screen').click(function(e){
    e.preventDefault();
    $path = $(this).attr('href');
        return $path;   //update image path variable based on which thumbnail clicked
});

這是聲明圖像路徑的位置：

        jQuery(function($){

            $.supersized({

                // Functionality
                slide_interval          :   10000,      // Length between transitions
                transition              :   1,          // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
                transition_speed        :   700,        // Speed of transition

                // Components                           
                slide_links             :   'blank',    // Individual links for each slide (Options: false, 'num', 'name', 'blank')
                slides                  :   [{image : $path}]

            });
        });

Answer 1

我沒有嘗試更新變量，而是進入文檔，看到它們具有可以使用的API（ api.goTo($slide); ）。

• 我向每個縮略圖鏈接添加了rel =“幻燈片數量”
• 我更新了超大功能選項中的幻燈片以使其與拇指一致
• 編寫了一個快速功能來停止鏈接上的默認操作，獲取幻燈片編號並將其放置在goto api中。

奇跡般有效！ :)

這是我的最終代碼：

<div><a class="full-screen" rel="1" href="../images/bg-gallery.jpg"><img src="../images/bg-gallery.jpg" /></a></div>

$('.full-screen').click(function(e){
    e.preventDefault();
    var $slide = $(this).attr('rel');
        api.goTo($slide);
});

slides                  :   [
                                                {image : '../images/bg-gallery.jpg'}, 
                                                {image : '../images/gallery-imgs/photo-gallery/01.jpg'},
                                                {image : '../images/gallery-imgs/photo-gallery/02.jpg'},
                                                {image : '../images/gallery-imgs/photo-gallery/03.jpg'},
                                                {image : '../images/gallery-imgs/photo-gallery/04.jpg'},
                                                {image : '../images/gallery-imgs/photo-gallery/05.jpg'},
                                                {image : '../images/gallery-imgs/photo-gallery/06.jpg'},
                                                {image : '../images/gallery-imgs/photo-gallery/07.jpg'},
                                                {image : '../images/gallery-imgs/photo-gallery/08.jpg'},
                                                {image : '../images/gallery-imgs/photo-gallery/09.jpg'},
                                                {image : '../images/gallery-imgs/photo-gallery/10.jpg'},
                                                {image : '../images/gallery-imgs/photo-gallery/11.jpg'},
                                                {image : '../images/gallery-imgs/photo-gallery/12.jpg'},
                                                {image : '../images/gallery-imgs/photo-gallery/13.jpg'},
                                                {image : '../images/gallery-imgs/photo-gallery/14.jpg'},
                                                {image : '../images/gallery-imgs/photo-gallery/15.jpg'},
                                                ]