jquery backstretch - 跳转到特定图像答案

【问题标题】：jquery backstretch - jump to a particular imagejquery backstretch - 跳转到特定图像
【发布时间】：2014-06-23 19:17:23
【问题描述】：

我使用 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);
};

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

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

【问题讨论】：

标签： jquery jquery-backstretch

【解决方案1】：

这是最有效的。我将后伸区域设置为默认隐藏。然后，一旦 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();
};

当然，这只是一个 sn-p。其余的代码（图像、下一个/上一个等）都围绕它工作。

【讨论】：