Question

当我点击图片时，我无法获得精美的盒子。我是新手使用它，无法理解错误。我还没有使用过很多JavaScript。调用jQuery函数有什么问题吗？

        <script>
            $(".fancybox")
            .attr('rel', 'gallery')
            .fancybox({
                type: 'iframe',
                autoSize : false,
                beforeLoad : function() {         
                    if ($(this.element).attr('id') == 'item1') {
                        this.width  = 500;
                        this.height = 200;
                    } else {
                        this.width  = 200;
                        this.height = 500;
                    }
                }
            });
        </script>
    </head>
    <body>
        <div class="pure-u-1 pure-u-md-1-2">
            <div class="l-box">
                <h3 class="information-head">Meet Our Partners</h3>

                <hr class="header-after">
                <div class="members"> <p > The Hardworking Group Members!</p>
                </div>

                <h4  style="font-size: x-large; padding-left: 40px;">  Harvard University </h4>  
                <a id="item1" class="fancybox" href="http://fiddle.jshell.net/YtwCt/show/"><img src="css/harvard.png" onclick="fancybox()" style="width: 310px;height: 310px;"></a>                 
            </div>
        </div>
    </body>
</html>

Answer 1

在jquery中使用ready方法

示例：

$(document).ready(function(){
     $(".fancybox")
        .attr('rel', 'gallery')
        .fancybox({
            type: 'iframe',
            autoSize : false,
            beforeLoad : function() {         
                if ($(this.element).attr('id') == 'item1') {
                    this.width  = 500;
                    this.height = 200;
                } else {
                    this.width  = 200;
                    this.height = 500;
                }
            }
        });
});

问题与fancybox

1 个答案: