Javascript 打开页面时会显示jQuery Lightbox

Javascript 打开页面时会显示jQuery Lightbox,javascript,jquery,html,css,lightbox,Javascript,Jquery,Html,Css,Lightbox,我是一名平面设计专业的学生,我正在制作一个投资组合网站。我想要一个灯箱来展示我的作品。除了一个问题外,我终于让所有的东西都运转起来了 每当我加载页面时,lightbox也会加载。我不要这个。我希望lightbox只在人们点击我作品的缩略图时显示 我学习了Tutsplus的教程,因为我对jQuery不太熟悉。我在脚本中更改的唯一一件事是,当单击时,灯箱会淡入淡出。 这是我正在使用的代码 </script><script type="text/javascript"> //&

我是一名平面设计专业的学生,我正在制作一个投资组合网站。我想要一个灯箱来展示我的作品。除了一个问题外,我终于让所有的东西都运转起来了

每当我加载页面时,lightbox也会加载。我不要这个。我希望lightbox只在人们点击我作品的缩略图时显示

我学习了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>

我敢肯定这真的是一团糟,但到目前为止,除了一件小事,一切都很顺利。如果可能的话,如果有人能把它清理干净,我将非常感激。

您可以尝试使用这个例子

$(document).ready(function(){
    $("#some").on("click", function(){
        $("#gallery").lightbox();
    });
});
以上是为您的画廊或所需ID加载灯箱