1

1 つの HTML ページで 2 つの Javascript 効果を使用したい

  1. スライダー。
  2. ファンシーボックス。

1 つの HTML ページで両方の JS ファイルを呼び出すと、1 つのみが機能します。これが私のコードです：

<head>

<!--other-->
<script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/cufon-replace.js"></script>
<script type="text/javascript" src="js/Myriad_Pro_300.font.js"></script>
<script type="text/javascript" src="js/Myriad_Pro_400.font.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<!--other-->

<!--slider-->
<link rel="stylesheet" type="text/css" href="css/slider.css" media="screen" />
<script type="text/javascript" src="js/sliderjs/jquery.core.js"></script>
<script type="text/javascript" src="js/sliderjs/jquery.superfish.js"></script>
<script type="text/javascript" src="js/sliderjs/jquery.jcarousel.pack.js"></script>
<script type="text/javascript" src="js/sliderjs/jquery.easing.js"></script>
<script type="text/javascript" src="js/sliderjs/jquery.scripts.js"></script>
<!--slider-->

 <!--Fancy Box-->
<!-- Add jQuery library -->

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

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



<script type="text/javascript">
    $(document).ready(function() {
        /*
         *  Button helper. Disable animations, hide close button, change title type and content
         */

        $('.fancybox-buttons').fancybox({
            openEffect  : 'none',
            closeEffect : 'none',

            prevEffect : 'none',
            nextEffect : 'none',

            closeBtn  : false,

            helpers : {
                title : {
                    type : 'inside'
                },
                buttons : {}
            },

            afterLoad : function() {
                this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
            }
        });

        /*
         *  Open manually
         */

        $("#fancybox-manual-a").click(function() {
            $.fancybox.open('images/gallary/1_b.jpg');
        });

        $("#fancybox-manual-b").click(function() {
            $.fancybox.open({
                href : 'iframe.html',
                type : 'iframe',
                padding : 5
            });
        });

        $("#fancybox-manual-c").click(function() {
            $.fancybox.open([
                {
                    href : 'images/gallary/1_b.jpg',
                    title : 'My title'
                }, {
                    href : 'images/gallary/2_b.jpg',
                    title : '2nd title'
                }, {
                    href : 'images/gallary/3_b.jpg'
                }
            ], {
                helpers : {
                    thumbs : {
                        width: 75,
                        height: 50
                    }
                }
            });
        });


    });
</script>

</head>

これらは両方ともJSです。JQuery 1.8.min はスライダーと競合していると思います。この JS をブロックするとスライダーが機能し、この JS をアクティブにするとファンシー ボックスが機能しません。

4

0 に答える 0