Question

我是一名平面设计专业的学生，我正在创建一个投资组合网站。我想要一个灯箱作为展示我作品的一种方式。除了一个问题，我终于完成了所有工作。

每当我加载页面时，灯箱也会加载。我不想要这个。我希望灯箱仅在人们点击我工作的缩略图时显示。

我关注了Tutsplus的this教程，因为我对jQuery并不熟悉。我在剧本中唯一改变的是灯箱在点击时淡入并淡出。这是我正在使用的代码

</script><script type="text/javascript">
//<![CDATA[
    jQuery(document).ready(function($) {
    $('.lightbox_trigger').click(function(e) {
        //prevent default action (hyperlink)
        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
            var maxheightvalue = $("#lightbox").height() -60;
    $("#lightbox img").css("max-height", maxheightvalue + "px");
            $('#lightbox').fadeIn(400);
            $('#content').html('<img src="' + image_href + '" />');
            //show lightbox window - you could use .show('fast') for a transition

        }
        else { //#lightbox does not exist - create and insert (runs 1st time only)
            //create HTML markup for lightbox window
            var lightbox =
            '<div id="lightbox" style="display:none">' +
                '<p>Click to close<\/p>' +
                '<div id="content">' + //insert clicked link's href into img src
                    '<img src="' + image_href +'" />' +
                '<\/div>' +
            '<\/div>';
            //insert lightbox HTML into page
            $('body').append(lightbox);
        }
    });
    //Click anywhere on the page to get rid of lightbox window
    $('#lightbox').live('click', function() { //must use live, as the lightbox element is inserted into the DOM
        $('#lightbox').fadeOut(300);
    });
    });
    //]]>
    </script>

我很确定这是一个真正的混乱，但到目前为止它除了那个小东西之外还有效。但如果有人能够清理它（如果可能的话），我将非常感激。

Answer 1

您可以尝试使用此示例

$(document).ready(function(){
    $("#some").on("click", function(){
        $("#gallery").lightbox();
    });
});

以上是为你的画廊或所需的ID加载灯箱。

http://api.jquery.com/on/

打开页面时会显示jQuery Lightbox

1 个答案: