0

我使用 Backstretch jquery 作为页面上的幻灯片。我希望能够链接到页面上的单个图像（例如，来自博客文章，甚至来自缩略图视图）。

例如，我希望能够访问 mysite.com/projects/firstproject#3 - 并让它正常加载页面，但从图像 3 开始而不是从开头开始。

这是我的基本回溯代码：

var[images] = [ '/images/project1/1.jpg',
                '/images/project1/2.jpg',
                '/images/project1/3.jpg'
                '/images/project1/4.jpg'
                '/images/project1/5.jpg'
                ]

$(images).each(function() {
   $('<img/>')[0].src = this; 
});

var index = 0;

$.backstretch(images, {speed: 500});
$('body').data('backstretch').pause();

var identifier = window.location.hash.substring(1) - 1; 
  //this grabs the anchor at the end, and grabs it as "3" instead of "#3"
  //and I need to subtract 1, as backstretch expects the first image id to be 0. 

if (identifier > -1 )
    $('body').data('backstretch').show(identifier);
};

这有效，但效果不佳。它显示第一个图像，将其余图像加载到后面，然后在完成后移动到所选图像。在包含一堆图像的页面中，这可能是一个相当大的延迟。

有没有更快/更好的方法来做到这一点？

4

1 回答 1

0

这是最有效的方法。我将后伸区域设置为默认隐藏。然后，一旦 backstretch 加载了我指定的图像，它就会再次可见。

CSS：

<style>
    .backstretch {visibility:hidden;opacity:0}
    .backstretch.vis {visibility:visible;opacity:1}
</style>

回弹代码：

var identifier = window.location.hash.substring(1) - 1;

if (identifier > 0) {
    $('body').backstretch(images, {speed: 500});
    $('body').data('backstretch').show(identifier);
    $('body').data('backstretch').pause();

    $(window).on("backstretch.after", function (e, identifier, index) {
        $('.backstretch').addClass('vis');
    });
} else {    
    $('body').backstretch(images, {speed: 500});
    $('.backstretch').addClass('vis');
    $('body').data('backstretch').pause();
};

当然，这只是一个片段。围绕它的所有其余代码（图像、下一个/上一个等）都可以使其工作。

于 2014-06-27T17:05:10.857 回答