1

ナビゲーションリストを使用してスライドショーの画像を切り替えるjqueryスライドショーがあります。どのように機能するかは、強調表示されているナビゲーション リスト (「.active」) にカーソルを合わせると、関連する画像がそれに切り替わります。ナビゲーション リスト内にリンクがあり、クリックして別のページに移動することもできます。

人がナビゲーションリストをタップするとアクティブになり、画像のスライドショーが切り替わり、もう一度タップするとそのリンクにたどり着くように、タブレットでこれが機能する必要があります。現在起こっていることは、タップするとすぐにアクティブになり、クリックスルーするということです。

jqueryはこちら

$(".main_image .desc").show(); //Show Banner
$(".main_image .block").animate({ opacity: 0.8 }, 1 ); //Set Opacity

//Click and Hover events for thumbnail list
$(".image_thumb ul li:first").addClass('active'); 
$(".image_thumb ul li").hover(function(e){ 
    //Set Variables
    e.preventDefault();

    var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
    var imgTitle = $(this).find('a.imgloc').attr("href"); //Get Main Image URL
    var imgDesc = $(this).find('.block').html();    //Get HTML of block
    var imgDescHeight = $(".main_image").find('.block').height();   //Calculate height of block 
    if ($(this).is(".active")) {  //If it's already active, then...
        return false; // Don't click through
    } else {
        //Animate the Teaser                
        $(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250, function() {
        $(".main_image .block").html(imgDesc).animate({ opacity: 0.8,   marginBottom: "0" }, 250 );
        $(".main_image img").attr({ src: imgTitle , alt: imgAlt});
        });
    }

    $(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists
        $(this).addClass('active');  //add class of 'active' on this list only
        return false;
    });

そして、これがナビゲーションリストのhtmlです

<div class="image_thumb">
    <ul>
        <li id="one">

            <h2><a href="styleguide.html">Text Text Text</a></h2>
            <p><a href="styleguide.html">Text Text Text</a></p>

            <a class="imgloc" href="content/images/home/01.jpg"></a>

            <div class="block">
                 <p>Text Text Text</p>
            </div>

        </li>
    </ul>
</div>

これがどのように機能するかの例です: ocgoodwill.org

誰かがそれを助けることができれば、それは素晴らしいことです!

- 編集 -

また、ユーザーが要素の 1 つをタップしてから別の要素をタップした場合、最初の要素をリセットして、もう一度タップしたときに自動的にクリックスルーされないようにする必要があることも付け加えておきます。

4

2 に答える 2

6

更新: 最近、このスクリプトを再び使用することに頼った後、フラグをまったく必要とせずに、はるかに簡単に実行できることに気付きました。

私のウェブサイトで改訂されたコードを参照してください。

元の答え:

今日、まったく同じ問題がありました。私はデータ属性を使用してそれを解決し、タッチスタートイベントにライブバインドしました（これは基本的なタッチデバイスチェックですが、これをより完全にすることができます）。必要に応じて「clickable_element」を置き換えて、次のコードを使用してみてください。

$('clickable_element').live("touchstart",function(e){
    if ($(this).data('clicked_once')) {
        // element has been tapped (hovered), reset 'clicked_once' data flag and return true
        $(this).data('clicked_once', false);
        return true;
    } else {
        // element has not been tapped (hovered) yet, set 'clicked_once' data flag to true
        e.preventDefault();
        $(this).trigger("mouseenter"); //optional: trigger the hover state, as preventDefault(); breaks this.
        $(this).data('clicked_once', true);
    }
});

これにより、タブレットが最初のタップでリンクをアクティブ化するのを停止し、2 回目のタップでリンクをアクティブ化します。

編集: 他の要素の 1 つがクリックされたときに「リセット」する必要がある複数のリンク要素の場合は、データ属性を親コンテナーにアタッチしてみてください。

HTML:

<div id="parent-element">
    <a href="" id="1">Link 1</a>
    <a href="" id="2">Link 2</a>
    <a href="" id="3">Link 3</a>
</div>

jQuery:

$('#parent-element a').live("touchstart",function(e){
    var $link_id = $(this).attr('id');
    if ($(this).parent().data('clicked') == $link_id) {
        // element has been tapped (hovered), reset 'clicked' data flag on parent element and return true (activates link)
        $(this).parent().data('clicked', null);
        return true;
    } else {
        // element has not been tapped (hovered) yet, set 'clicked' data flag on parent element to id of clicked link, and prevent click
        e.preventDefault(); // return false; on the end of this else statement would do the same
        $(this).trigger("mouseenter"); //optional: trigger the hover state, as preventDefault(); breaks this. I do suggest adding a class with addClass, as this is much more reliable.
        $(this).parent().data('clicked', $link_id);
    }
});
于 2012-07-12T10:12:11.820 に答える
2

元の投稿に返信できればいいのですが、「clicked_once」状態をリセットするには、元のコードからこのビットを使用できるはずです

$(".image_thumb ul li").removeClass('clicked_once');

(またはそれに似たもの) c_kick のコードの else ステートメントの先頭にあります。

于 2012-07-12T18:35:19.007 に答える