Question

我的照片库存在问题。

我需要更新一个全局变量......看起来很容易，但它不起作用......任何想法在这里有什么问题？可能是超大型工作onload并且一旦页面加载就无法更新。？

我的初始全局变量在页面顶部声明
每个缩略图都有一个全屏选择类
我的点击功能抓取锚点的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'},
                                                ]

自定义图像库的超大插件

1 个答案: