3

jcarousel を追加して、動的テンプレートで構築された HTML サイトをナビゲートすることに成功しました。ただし、リンク先のページにいるときにアクティブに表示される画像リンクが必要なので、閲覧者はそれらがどこにあるかを知ることができます。また、新しいページに移動するたびに、最後の位置に留まる必要がある場合、jcarousel はスクロール位置の先頭に戻ります。ここでダウンロードした素晴らしいデモを見つけましたが、デモの画像ギャラリーから必要な要素を削除する方法がわかりません。 http://blog.themeforest.net/tutorials/how-to-integrate-the-jquery-galleria-and-jcarousel-plugins/ お役に立てれば幸いです。

4

1 に答える 1

0

このような何かがあなたを始めさせるはずです。

編集

より完全な例を次に示します。これで、開始値が URL から取得されます。

例えば。Web サイトの URL が www.mysite.com/page2.html の場合、JavaScript 経由でアクセスできる URL パラメーター (この場合は「startVal」) を追加できます。

したがって、URL は "www.mysite.com/page2.html?startVal=2" のようになります。startVal=2 は、カルーセル内のどのアイテムが選択された開始アイテムとして設定されるかを決定します。

<script type="text/javascript">

var $sel = null;
$(document).ready(function () {

    // This function helps pull out items from your URL. (in this case 'startVal') 
    $.urlParam = function (name) {
        var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
        if(results == null){ //if results is null then return "0"
            return 0;
        }
        return results[1] || 0;
    }

    //Get the value of startVal from the QueryString. (in the example below, it would return 2)
    //EXAMPLE: www.mysite.com/page2.html?startVal=2
    var startVal = parseInt($.urlParam('startVal'));

    $('#mycarousel').jcarousel({
        start: startVal //Use the value of startVal to determine which item the carousel should default to on page load.
    });

    //Get the image you wish to default as selected, again we do this based off the startVal we received from the URL
    $sel = $('#mycarousel li:nth-child(' + startVal + ')').find('img');
    $sel.css('border', 'solid 2px blue'); //Here we can format it however we want

    //This function assigns a click event to each item in the carousel and changes which one is selected. 
    $('#mycarousel img').click(function () {
        $sel.css('border', 'solid 0px white');
        $(this).css('border', 'solid 2px blue');
        $sel = $(this);
    });
});

</script>

編集

また、独自の検証を追加する必要があります。現在、「startVal」が null であるかどうか、または要求された開始インデックスが使用可能なアイテムの範囲内にあるかどうかは確認していません。

編集

そのため、サイトの URL ごとにクエリ文字列パラメーターを追加して、カルーセル内のどの項目が選択されているかを判断する必要があります。

例:

  • www.mysite.com/page1.html?startVal=1
  • www.mysite.com/page2.html?startVal=2
  • www.mysite.com/page3.html?startVal=3
  • www.mysite.com/page4.html?startVal=4

要求されたアイテムが実際に存在することを検証する必要があります。それ以外の場合、URL が項目番号 698 (www.mysite.com/page4.html?startVal=689) を要求すると、それは存在せず、エラーが発生する可能性があります。

これをさらに混乱させるつもりはありませんでしたが、これで明確になることを願っています。

于 2010-09-08T14:24:43.167 に答える