1

我目前正在建立我的网站，我正在为我的在线作品集苦苦挣扎几个晚上。我过度搜索互联网，但我并不完全知道如何将我的问题用文字表达，并尝试了几种我想到的解决方法。

要查看我的问题，请访问此处的网站测试版：http: //dzisign.de/jquerytest/fade.html

我在此处找到的投资组合部分添加了一个画廊：http: //tympanus.net/Development/Stapel/

我喜欢它的动画和风格，但我想添加一个“第三级”。默认情况下，堆栈将图像分布到网格上。加载的图像包含一个链接，因此您可以单击它们以定向到网站。但相反，我想在单击图像时触发一个新元素。考虑一个具有更大图像的 div 和旁边的信息区域。不幸的是，我无法让图库图像用作按钮。我试图分配 id 来调用 jquery 函数，但没有识别出点击。今天我发现了一个可能的问题。包含图像的网格似乎总是在图像之上。因此，当我向整个网格区域添加功能时（请参阅下面的“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 代码。我只想在这里更干净一点，不要太混乱。您将看到该功能没有被触发。这是从 Stapel.js 插件为 jquery 调用函数的部分。不确定这是否有用：

        $(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 向后推并将图像拉到前面，以使它们可以作为按钮点击……但没有成功。

这是第一次在这里发帖，如果您需要更多信息，请告诉我，以防您无法在我的网站上查看源代码。谢谢你一千遍！

最好的问候， Dziga

4

1 回答 1

0

You need to prevent the default click behavior the plugin is trying to fire.

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

For more info as to how this works, check out Event Bubbling.

于 2013-06-18T21:13:02.163 回答