javascript - 打开页面时显示 jQuery Lightbox

Question

我是一名平面设计专业的学生，​​我正在制作一个作品集网站。我想要一个灯箱来展示我的作品。我终于让一切正常，除了一个问题。

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

我关注了this来自 Tutsplus 的教程，因为我对 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/