Why to add two links to JQuery in this case

Question

I have zero experience in Javascript and JQuery but I have used both in this document.

The first one is to give support to IE for CSS3 transitions and is taken from CSS3 Hover Transition. The code used is

<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>

The seond one is for a slideshow gallery and is taken from slideshow gallery and the code is

<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>

As can be seen the former CSS3 Transitions links to jquery 1.6.1 while the later slideshow gallery links to jquery 1.3.2. Do I have to refer to both these files?

I tried removing one link and the other as well but if either of the link is removed, neither the CSS3 Hover Transitions work nor the Slideshow Glaeery work. Alos if I place the above in my head element, they dont work. They only work If I have them at the bottom after the footer and before the body element.

The following is in my head tag. (for the Slideshow Gallery)

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

And the following is at the bottom. (for the Slideshow Gallery)

    <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>

Answer 1

It is complicated and undesirable to put two different versions of jQuery in the same page. Your first goal is to avoid this entirely - you'd rather only have the newer version of jQuery in the page.

So, your first order of business is to do some research on the jQuery plug-ins you're using and see if they will all work with a common version of jQuery.

If you determine that they will all work with a common version of jQuery, then just include jQuery in your page before the plugins and include the plugins before your code that uses them. The jQuery code can go in the HEAD section or in the BODY section as long as it's before anything that tries to use it. The plug-in code can probably go anywhere after the jQuery code, but you'd have to consult the plug-in doc to make sure.

If you determine that you have to have two different versions of jQuery, then you need to work out how you go about doing that. Here's a related question on how that is done: Can I use multiple versions of jQuery on the same page?.

When using two versions of jQuery, you end up having to define a unique symbol that represents a particular version of jQuery using jQuery.noConflict() (not jQuery and not $) and then ALL code that uses that plug-in has to use that unique symbol.