Блог

Я использую jquery Backstretch в качестве слайд-шоу на странице. Я хотел бы иметь возможность ссылаться на отдельные изображения на странице (например, из сообщения в блоге или даже из просмотра миниатюр).

Например, я хотел бы иметь возможность перейти mysite.com/projects/firstproject#3 — и пусть он загрузит страницу как обычно, но начнет с изображения 3, а не с самого начала.

Вот мой базовый код backstretch:

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

Это работает, но работает не очень хорошо. Он показывает первое изображение, загружает остальные в конце, а затем, когда оно завершено, переходит к выбранному изображению. На странице с кучей изображений это может быть довольно большой задержкой.

Есть ли более быстрый / лучший способ сделать это?

Вот что в основном работает. Я установил область backstretch скрытой по умолчанию. И затем, как только 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();
};
  

Это, конечно, всего лишь фрагмент. Вокруг этого есть весь остальной код (изображения, next / prev и т. Д.), Чтобы заставить его работать.