自定义图片库的超大插件

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'},
                                                ]