0

初ポスターはこちら。スライド パネル ギャラリーもあるスクロール Web サイトを作成しました。ここに問題があります。ユーザーがサムネイルをクリックすると、対応する大き​​な画像が「アニメーション」コマンドを使用してスライドアップします。ユーザーは、大きな画像をもう一度クリックしてサムネイル ビューに戻り、さらに移動する必要があります。

問題: これはあまり直感的ではないことがわかりました。人々は、規定された/推奨される順序ではなく、クリックしたい場所をクリックすることを好みます。大きな画像ビューでは、ユーザーが「ホーム」または他のセクションをクリックしても、クリックすると所定の位置にスクロールしますが、大きなギャラリー画像の後ろには表示されません。

ユーザーが画像をクリックしたとき、または下部に表示されている他のメニュー セクションのいずれかをクリックしたときに大きな画像ビューを閉じるコードを見つけて、クリックされた関連セクションまでスクロールする必要があります。これらのセクションはすべて「goToByScroll」スクリプトを使用します。ギャラリーの最初のサムネイル ビューも、「goTobyScroll」スクリプトを使用してスライド表示されます。

jquery サイトのヘルプ フォーラムからのこの回答によると、# イメージと # ラッパーは、クリック時に閉じる必要があるものです。

読んでくれてありがとう。

更新: (更新が遅れたことをお詫びします。アマチュア コーダーとして、このようなことは威圧的である可能性があります。単なる切り貼り以上のものを実際に実行するために他の人に依存しています:-)時間と手間をかけてくれた両方の投稿者に感謝します。検索経由でアクセスする人のために、この場合に実際に機能したコードを次に示します。

$('#top').live('click',function(){ $this = $('#wrapper > img'); $('#description').empty().hide();

                $('#thumbsWrapper').css('z-index','100')
                .stop()
                .animate({'height':'100%'},speed,function(){
                    var $theWrapper = $('#wrapper > img');
                    $('#panel').css('height','0px');
                    $theWrapper.css('z-index','0');
                    /* 
                    remove the large image element
                    and the navigation buttons
                     */
                    $this.remove();
                    $('#prev').hide();
                    $('#next').hide();
                });

});

また、SO の運営/モデレートに携わるすべての人に感謝します。

4

2 に答える 2

1

このコードをgoToByScroll（）関数内に配置します

$('#wrapper img').trigger('click')

$（'＃wrapper img'）は、何かが表示されている場合にのみ表示されます。ただし、メイン画像にクラスを追加して、より具体的にします。何かのようなもの

$('#wrapper img.big_preview').trigger('click')
于 2012-07-09T09:14:03.643 に答える
0

ハンドラーを作成し、それを画像と言及した他の領域に割り当てます。

var isOpen = false;
...

$('container').delegate('.my-image', 'click' function(e)){
   isOpen ? closeIt() : openIt();
   $(this).trigger('name', {});
}.delegate('other-area', 'click', function(){
   isOpen ? closeIt() : openIt();
   $(this).trigger('name', {});
})

ブール値を使用して、状態が開いているか閉じているかを判断します。必要に応じてクラス名を使用することもできます。jQuery では、toggle() 関数を使用するオプションもあります。

于 2012-07-09T09:15:43.403 に答える