1

私はJavascriptとJQueryの経験がありませんが、このドキュメントでは両方を使用しました。

1つ目は、CSS3トランジションのIEをサポートすることで、CSS3ホバートランジションから取得されます。使用されるコードは

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.hoverTransition.js"></script>

次のものはスライドショーギャラリー用で、スライドショーギャラリーから取得され、コードは次のとおりです。

<script type="text/javascript" src="scripts/jquery-1.3.2.js"></script>
<script type="text/javascript" src="scripts/jquery.galleriffic.js"></script>
<script type="text/javascript" src="scripts/jquery.opacityrollover.js"></script>

ご覧のとおり、前者のCSS3トランジションはjquery 1.6.1にリンクしていますが、後のスライドショーギャラリーはjquery1.3.2にリンクしています。これらの両方のファイルを参照する必要がありますか？

一方のリンクともう一方のリンクも削除しようとしましたが、いずれかのリンクを削除すると、CSS3ホバートランジションもスライドショーグレイリーも機能しません。上記を頭の要素に入れると、うまくいきません。それらは、フッターの後、ボディ要素の前の下部にある場合にのみ機能します。

以下は私の頭のタグにあります。（スライドショーギャラリー用）

<!-- We only want the thunbnails to display when javascript is disabled -->
<script type="text/javascript">
document.write('<style>.noscript { display: none; }</style>');
</script>

そして、以下は一番下にあります。（スライドショーギャラリー用）

    <script type="text/javascript">
        jQuery(document).ready(function($) {
            // We only want these styles applied when javascript is enabled
            $('div.navigation').css({'width' : '300px', 'float' : 'left'});
            $('div.content').css('display', 'block');

            // Initially set opacity on thumbs and add
            // additional styling for hover effect on thumbs
            var onMouseOutOpacity = 0.67;
            $('#thumbs ul.thumbs li').opacityrollover({
                mouseOutOpacity:   onMouseOutOpacity,
                mouseOverOpacity:  1.0,
                fadeSpeed:         'fast',
                exemptionSelector: '.selected'
            });

            // Initialize Advanced Galleriffic Gallery
            var gallery = $('#thumbs').galleriffic({
                delay:                     5500,
                numThumbs:                 15,
                preloadAhead:              10,
                enableTopPager:            true,
                enableBottomPager:         true,
                maxPagesToShow:            7,
                imageContainerSel:         '#slideshow',
                controlsContainerSel:      '#controls',
                captionContainerSel:       '#caption',
                loadingContainerSel:       '#loading',
                renderSSControls:          true,
                renderNavControls:         true,
                playLinkText:              'Play',
                pauseLinkText:             'Pause',
                prevLinkText:              'Previous',
                nextLinkText:              'Next',
                nextPageLinkText:          'Next &rsaquo;',
                prevPageLinkText:          '&lsaquo; Prev',
                enableHistory:             false,
                autoStart:                 true,
                syncTransitions:           true,
                defaultTransitionDuration: 900,
                onSlideChange:             function(prevIndex, nextIndex) {
                    // 'this' refers to the gallery, which is an extension of $('#thumbs')
                    this.find('ul.thumbs').children()
                        .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
                        .eq(nextIndex).fadeTo('fast', 1.0);
                },
                onPageTransitionOut:       function(callback) {
                    this.fadeTo('fast', 0.0, callback);
                },
                onPageTransitionIn:        function() {
                    this.fadeTo('fast', 1.0);
                }
            });
        });
    </script>
4

1 に答える 1

2

2つの異なるバージョンのjQueryを同じページに配置することは複雑で望ましくありません。最初の目標は、これを完全に回避することです。ページには、新しいバージョンのjQueryのみを含める必要があります。

したがって、最初の仕事は、使用しているjQueryプラグインについて調査し、それらがすべてjQueryの一般的なバージョンで機能するかどうかを確認することです。

それらがすべて共通バージョンのjQueryで機能すると判断した場合は、プラグインの前にページにjQueryを含め、それらを使用するコードの前にプラグインを含めます。jQueryコードは、それを使用しようとするものの前にある限り、HEADセクションまたはBODYセクションに配置できます。プラグインコードはおそらくjQueryコードの後のどこにでも配置できますが、プラグインドキュメントを参照して確認する必要があります。

2つの異なるバージョンのjQueryが必要であると判断した場合は、それをどのように行うかを検討する必要があります。これがどのように行われるかについての関連する質問があります：同じページで複数のバージョンのjQueryを使用できますか？。

jQuery.noConflict()2つのバージョンのjQueryを使用する場合、 （notjQueryおよびnot ）を使用してjQueryの特定のバージョンを表す一意のシンボルを定義する必要があり、$そのプラグインを使用するすべてのコードでその一意のシンボルを使用する必要があります。

于 2012-08-26T23:58:52.553 に答える