Question

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

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

有更快/更好的方法吗？

Answer 1

这里的主要功能是什么。我设置默认隐藏的后伸区域。然后，一旦backstretch加载了我指定的图像，它就会再次可见。

CSS：

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

Backstretch代码：

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();
};

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

jquery backstretch - 跳转到特定图像

1 个答案: