javascript - 尝试使用 js 创建一个“关闭”选项，代码有问题

Question

我正在尝试将http://fancyapps.com/fancybox/demo/中的图像查看机制实现到我的网站。

我期待着做这个网站对“不同效果”部分的第二宫图像所做的事情。（只是查看和关闭，没有滚动或下一步按钮）。

我尝试将来自该网站的 .css 和 html 代码放入我的代码中，并附加了必要的图像、.css 和 .js 文件，但它仍然无法正常工作。

html代码：

        <a class="fancybox-effects-b" href="demo/5_b.jpg" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit">
<img src="demo/5_b.jpg" alt="" />
</a>

js代码：

<script type="text/javascript">
    $(".fancybox-effects-b").fancybox({
                openEffect  : 'none',
                closeEffect : 'none',

                helpers : {
                    title : {
                        type : 'over'
                    }
                }
            });
</script>

谁能告诉我如何继续实施这个？我花了将近 2 个小时尝试这个，但似乎仍然无法弄清楚......

提前致谢，

编辑：

这是我的html代码：

<div class="content">
    <div class="heading">Photoshop</div>
    <div class="content2">
        <div id="featured" class="clearfix grid_12">
            <ul>
                <li>    <a class="fancybox-effects-b" href="images/sadMiddle.jpg"  target="_blank">
                <span>Middle of your heart</span><img  src="images/sadMiddle.jpg" alt="Middle" /></a></a>
            </li>
            <li>    <a href="images/sadLeft.jpg">
                    <span>Left the heart</span>
                    <img src="images/sadLeft.jpg" alt="Left" />
                </a>

            </li>
            <li>    <a href="images/sadRight.jpg">
                    <span>Right mind & heart</span>
                <img src="images/sadRight.jpg" alt="Right" />
                </a>    
            </li>
        </ul>
    </div>

（我现在只在第一张图片上测试它）

我添加的JS：

<!-- Add jQuery library -->
<
script type = "text/javascript"
src = "lib/jquery-1.9.0.min.js" > < /script>


    <!-- Add fancyBox main JS and CSS files -->
    <script type="
text / javascript " src="
source / jquery.fancybox.js"></script>
    <link rel="
stylesheet " type="
text / css " href="
source / jquery.fancybox.css" media="
screen " />

    <!-- Add Button helper (this is optional) -->
    <link rel="
stylesheet " type="
text / css " href="
source / helpers / jquery.fancybox - buttons.css ? v = 1.0.5 " />
    <script type="
text / javascript " src="
source / helpers / jquery.fancybox - buttons.js ? v = 1.0.5 "></script>

<script type="
text / javascript ">
   $(function() {
        $(".fancybox - effects - b ").fancybox({
                openEffect  : 'none',
                closeEffect : 'none',

                helpers : {
                    title : {
                        type : 'over'
                    }
                }
            });
   });
</script>

css 文件：

/*! fancyBox v2.1.4 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp
{
    padding: 0;
    margin: 0;
    border: 0;
    outline: none;
    vertical-align: top;
}

.fancybox-wrap {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 8020;
}

.fancybox-skin {
    position: relative;
    background: #f9f9f9;
    color: #444;
    text-shadow: none;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}

.fancybox-opened {
    z-index: 8030;
}

.fancybox-opened .fancybox-skin {
    -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
       -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.fancybox-outer, .fancybox-inner {
    position: relative;
}

.fancybox-inner {
    overflow: hidden;
}

.fancybox-type-iframe .fancybox-inner {
    -webkit-overflow-scrolling: touch;
}

.fancybox-error {
    color: #444;
    font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
    margin: 0;
    padding: 15px;
    white-space: nowrap;
}

.fancybox-image, .fancybox-iframe {
    display: block;
    width: 100%;
    height: 100%;
}

.fancybox-image {
    max-width: 100%;
    max-height: 100%;
}

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
    background-image: url(fancybox_sprite.png);
}

#fancybox-loading {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -22px;
    margin-left: -22px;
    background-position: 0 -108px;
    opacity: 0.8;
    cursor: pointer;
    z-index: 8060;
}

#fancybox-loading div {
    width: 44px;
    height: 44px;
    background: url('fancybox_loading.gif') center center no-repeat;
}

.fancybox-close {
    position: absolute;
    top: -18px;
    right: -18px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    z-index: 8040;
}

.fancybox-nav {
    position: absolute;
    top: 0;
    width: 40%;
    height: 100%;
    cursor: pointer;
    text-decoration: none;
    background: transparent url('blank.gif'); /* helps IE */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    z-index: 8040;
}

.fancybox-prev {
    left: 0;
}

.fancybox-next {
    right: 0;
}

.fancybox-nav span {
    position: absolute;
    top: 50%;
    width: 36px;
    height: 34px;
    margin-top: -18px;
    cursor: pointer;
    z-index: 8040;
    visibility: hidden;
}

.fancybox-prev span {
    left: 10px;
    background-position: 0 -36px;
}

.fancybox-next span {
    right: 10px;
    background-position: 0 -72px;
}

.fancybox-nav:hover span {
    visibility: visible;
}

.fancybox-tmp {
    position: absolute;
    top: -99999px;
    left: -99999px;
    visibility: hidden;
    max-width: 99999px;
    max-height: 99999px;
    overflow: visible !important;
}

/* Overlay helper */

.fancybox-lock {
    overflow: hidden;
}

.fancybox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    display: none;
    z-index: 8010;
    background: url('fancybox_overlay.png');
}

.fancybox-overlay-fixed {
    position: fixed;
    bottom: 0;
    right: 0;
}

.fancybox-lock .fancybox-overlay {
    overflow: auto;
    overflow-y: scroll;
}

/* Title helper */

.fancybox-title {
    visibility: hidden;
    font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
    position: relative;
    text-shadow: none;
    z-index: 8050;
}

.fancybox-opened .fancybox-title {
    visibility: visible;
}

.fancybox-title-float-wrap {
    position: absolute;
    bottom: 0;
    right: 50%;
    margin-bottom: -35px;
    z-index: 8050;
    text-align: center;
}

.fancybox-title-float-wrap .child {
    display: inline-block;
    margin-right: -100%;
    padding: 2px 20px;
    background: transparent; /* Fallback for web browsers that doesn't support RGBa */
    background: rgba(0, 0, 0, 0.8);
    -webkit-border-radius: 15px;
       -moz-border-radius: 15px;
            border-radius: 15px;
    text-shadow: 0 1px 2px #222;
    color: #FFF;
    font-weight: bold;
    line-height: 24px;
    white-space: nowrap;
}

.fancybox-title-outside-wrap {
    position: relative;
    margin-top: 10px;
    color: #fff;
}

.fancybox-title-inside-wrap {
    padding-top: 10px;
}

.fancybox-title-over-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    color: #fff;
    padding: 10px;
    background: #000;
    background: rgba(0, 0, 0, .8);
}

（我假设其中大多数都是无用的，除了包含“fancybox_sprite.png”的那个是关闭按钮的图像）。

编辑2：（我可以将javascript混合在一起吗？）

<script type="text/javascript" src="source/jquery.fancybox.js"></script>
<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.1.4" media="screen" />
<script type="text/javascript">
 $(document).ready(function () {
     $(".fancybox").fancybox({
         maxWidth: 800,
         maxHeight: 600,
         fitToView: false,
         autoResize: true,
         closeClick: false,
         openEffect: 'elastic',
         closeEffect: 'elastic'
     });
 });
 </script>

<script type="text/javascript" src="js/showhide.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.roundabout-1.0.min.js"></script> 
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

<script type="text/javascript" src="js/script.js"></script>
    <script type="text/javascript">     
        $(document).ready(function() { //Start up our Featured Project Carosuel
            $('#featured ul').roundabout({
                easing: 'easeOutInCirc',
                duration: 600
            });
        });
    </script>

score 1 · Accepted Answer

jQuery 库必须包含在 fancybox 之前

<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.1.4" media="screen" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="source/jquery.fancybox.js"></script>
<script type="text/javascript">
     $(document).ready(function () {
         $(".fancybox").fancybox({
             maxWidth: 800,
             maxHeight: 600,
             fitToView: false,
             autoResize: true,
             closeClick: false,
             openEffect: 'elastic',
             closeEffect: 'elastic'
         });
     });
 </script>

<script type="text/javascript" src="js/showhide.js"></script>
<script type="text/javascript" src="js/jquery.roundabout-1.0.min.js"></script> 
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript">     
    $(document).ready(function() { //Start up our Featured Project Carosuel
        $('#featured ul').roundabout({
            easing: 'easeOutInCirc',
            duration: 600
        });
    });
</script>

score 0 · Accepted Answer

如果您的脚本在标题中，那么您需要将它包含在 DOM ready handler

<script type="text/javascript">
   $(function() {
        // Your code here
   });
</script>

还要确保在包含 jquery 后包含插件。

score 0 · Accepted Answer

要么你把你的 JS 代码放在最后，要么用

$(document).ready(function(){
    //your code here
})

如果可能，请输入完整的 HTML，以便我能得到更好的主意。

score 0 · Accepted Answer

这是一个可以帮助您的工作示例。

 $(document).ready(function () {
     $(".fancybox").fancybox({
         maxWidth: 800,
         maxHeight: 600,
         fitToView: false,
         autoResize: true,
         closeClick: false,
         openEffect: 'elastic',
         closeEffect: 'elastic'
     });
 });

javascript - 尝试使用 js 创建一个“关闭”选项，代码有问题

4 回答 4

Related

Reference