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

これが主に機能するものです。バックストレッチ領域をデフォルトで非表示に設定しました。そして、バックストレッチが指定した画像をロードすると、再び表示されます。

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 に答える