1

私は現在、自分のウェブサイトを構築しており、オンラインポートフォリオに数晩苦労しています. 私はインターネットを過度に検索しましたが、自分の問題を言葉で表現する方法が正確にわからず、頭に浮かんだいくつかの回避策を試しました.

私の問題を表示するには、ウェブサイトのベータ版にアクセスしてください: http://dzisign.de/jquerytest/fade.html

ここで見つけたポートフォリオ セクションにギャラリーを追加しました: http://tympanus.net/Development/Stapel/

私はそのアニメーションとスタイルが好きですが、「第 3 レベル」を追加したいと思っています。デフォルトでは、スタックは画像​​をグリッドに分散します。読み込まれた画像にはリンクが含まれているため、クリックすると Web サイトに移動できます。しかし、代わりに、画像をクリックしたときに新しい要素をトリガーしたいと考えています。大きな画像とその横に情報領域がある div について考えてみます。残念ながら、ギャラリーの画像をボタンとして機能させることはできません。jquery 関数を呼び出す ID を割り当てようとしましたが、クリックが認識されません。今日、私は考えられる問題を見つけました。画像を含むグリッドは、常に画像の上にあるようです。したがって、グリッド領域全体に関数を追加すると (以下の「tp-grid」を参照)、ギャラリー内をクリックすると画像がトリガーされますが、単一の画像だけでは個別のボタンとして機能しません:/. 誰かが私にヒントをくれることを願っています。コードを主要な領域に分解しようとしています。

ギャラリーを含むポートフォリオ エリア:

<div id="pf-content" >

        <div class="container" style="position:absolute; z-index:10;">

            <section class="main">

                <div class="wrapper">

                    <div class="topbar">
                        <span id="close" class="back">&larr;</span>
                        <h1 style="color:#999">PORTFOLIO</h1><h2 id="name"></h2>
                    </div>

                    <ul id="tp-grid" class="tp-grid">

                        <!-- Matte Paintings -->
                        <li id="monja" data-pile="MATTE PAINTING">                             
                                <span class="tp-info"><span >Monjacity</span></span>
                                <img src="images/1/monjacity.jpg" /> 
                        </li>

                    </ul>

                </div>

            <div id="monja-large" style="display:none;z-index:11000;">
        <img src="../clients/VFX_DavidLuongWS/highlife_in_monjacity_v16_1k.jpg" width="1100" height="618" />
            </div>

            </section>

        </div>

    </div>

基本的に、「monja」として識別されるギャラリー画像をクリックして、id="monja-large" で div をトリガーしたいと考えています。したがって、私はこれを使用しようとしました：

        $( "#monja").click(function() {
        $( "#monja-large" ).toggle( selectedEffect, options, contentFade );
        return false;
    });

サイトのすべてのボタンにこのようなコード行を使用しました。構文は問題ないはずです ^_^。私が間違っていなければ、ウェブサイトにアクセスすると、完全な html コードがブラウザで表示されます。私はここでもう少し清潔に保ちたいだけで、混沌としすぎないようにしたい. 関数がトリガーされていないことがわかります。これは、jquery 用の Stapel.js プラグインから関数を呼び出す部分です。それが役に立つかどうかわからない：

        $(function() {

        var $grid = $( '#tp-grid' ),
            $name = $( '#name' ),
            $close = $( '#close' ),
            $loader = $( '<div class="loader"><i></i><i></i><i></i><i></i><i></i><i></i><span>Loading...</span></div>' ).insertBefore( $grid ),
            stapel = $grid.stapel( {
                onLoad : function() {
                    $loader.remove();
                },
                onBeforeOpen : function( pileName ) {
                    $name.html( pileName );
                },
                onAfterOpen : function( pileName ) {
                    $close.show();
                }
            } );

        $close.on( 'click', function() {
            $close.hide();
            $name.empty();
            stapel.closePile();
        } );

    } );

簡単に言えば、別のギャラリー画像にアクセスして、それらをクリックして関数を呼び出す方法を知っていますか? また、必死に tp-grid を押し戻し、画像を前面に引っ張って、ボタンとしてクリックできるようにしようとしましたが、成功しませんでした。

ここに投稿するのは初めてです。私のウェブサイトでソース コードを表示できない場合に備えて、さらに情報が必要な場合はお知らせください。千回ありがとう！

よろしく、 ジガ

4

1 に答える 1

0

プラグインが起動しようとしているデフォルトのクリック動作を防ぐ必要があります。

$("#monja").click(function(e) {
    e.preventDefault();
    alert('it works');
});

これがどのように機能するかの詳細については、Event Bubblingを確認してください。

于 2013-06-18T21:13:02.163 に答える