Question

我用灯箱脚本处理了近3个小时：http://webdesign.tutsplus.com/articles/super-simple-lightbox-with-css-and-jquery--webdesign-3528但是没有让它运行。灯箱打开，但我不能用＆＃34; x＆＃34;在上角或使用左侧和右侧的箭头。任何人都可以帮忙看看我的错误吗？

<script>

$(document).ready(function(){

var files = new Array();

    var i =0;
    $( "#test li" ).each(function() {
        files[i] = $("#test li" ).get(i).innerHTML;
        i++;
    });
    index = 0;
    $('.lightbox_trigger').click(function(e) {
        //prevent default action (hyperlink)

        index = 0;
        e.preventDefault();
        //Get clicked link href
        var image_href = $(this).attr("href");
        /*  
        If the lightbox window HTML already exists in document, 
        change the img src to to match the href of whatever link was clicked

        If the lightbox window HTML doesn't exists, create it and insert it.
        (This will only happen the first time around)
        */

        if ($('#lightbox').length > 0) { // #lightbox exists
            //place href as img src value
            $('#content').html('<a href="javascript:void(0);" id="left">Left</a>' +
                    '<iframe src="' + files[0] +'" />' +
                '<a href="javascript:void(0);" id="right">Right</a>');

            //show lightbox window - you could use .show('fast') for a transition
            $('#lightbox').show();
        }
        else { //#lightbox does not exist - create and insert (runs 1st time only)

            //create HTML markup for lightbox window
            var lightbox = 
            '<div id="lightbox">' +
                '<p>x</p>' +
                '<div id="content">' + //insert clicked link's href into img src
                '<a href="javascript:void(0);" id="left"><img src="http://musicum.eu/wp-content/themes/academy/images/left-arrow.png"></a>' +
                    '<iframe src="' + files[0] +'" />' +
                '<a href="javascript:void(0);" id="right"><img src="http://musicum.eu/wp-content/themes/academy/images/right-arrow.png"></a>' + 
                '</div>' +  
            '</div>';
            //insert lightbox HTML into page
            $('body').append(lightbox);
        }

    });

    $('#left').click(function() { //must use live, as the lightbox element is inserted into the DOM
    //  alert("left");
        if(index>0)
        {   
            index--;
            $('#content').html('<a href="javascript:void(0);" id="left"><img src="http://musicum.eu/wp-content/themes/academy/images/left-arrow.png"></a>' +
                    '<iframe src="' + files[index] +'" />' +
                '<a href="javascript:void(0);" id="right"><img src="http://musicum.eu/wp-content/themes/academy/images/right-arrow.png"></a>');         
        }
        arrowShowHide(index);
    });
    $('#right').click(function() { //must use live, as the lightbox element is inserted into the DOM
    //  alert("right");
        if(index < files.length - 1)
        {
            index++;
            $('#content').html('<a href="javascript:void(0);" id="left"><img src="http://musicum.eu/wp-content/themes/academy/images/left-arrow.png"></a>' +
                    '<iframe src="' + files[index] +'" />' +
                '<a href="javascript:void(0);" id="right"><img src="http://musicum.eu/wp-content/themes/academy/images/right-arrow.png"></a>');
        }
        arrowShowHide(index);
    });

    function arrowShowHide(index)
    {
        if(index >= files.length -1)
            document.getElementById("right").style.display = "none";
        else
            document.getElementById("right").style.display = "block";

        if(index <= 0)
            document.getElementById("left").style.display = "none";
        else
            document.getElementById("left").style.display = "block";
    }

    //Click anywhere on the page to get rid of lightbox window
    $('p').click(function() { //must use live, as the lightbox element is inserted into the DOM
        //alert("right");
        $('#lightbox').hide();
    });

});


</script>

非常感谢你。

Answer 1

您为灯箱div设置了100％宽度，占据整页宽度。因为<p>x</p>上的点击事件无法触发。

缩小#lightbox的宽度，并替换脚本中的以下代码部分，

        $("#backgroundPopup").show();
        if ($('#lightbox').length > 0) { // #lightbox exists
            //place href as img src value

和

        $("#backgroundPopup").click(function() {
            $("#backgroundPopup").hide();
            $('#lightbox').hide();
        });

然后更改#lightbox，

的css属性

    #lightbox {
        position:fixed; /* keeps the lightbox window in the current viewport */
        top:0; 
        left:25%; 
        height:100%; 
        text-align:center;
        z-index:1;  
    }

另外，将#backgroundPopup的不透明度更改为0.8或其他内容。

jQuery .hide和通过灯箱导航无法正常工作

1 个答案: