jQuery gallery error using asp.net repeater_问答_开发者

I am using asp.net repeater to display the photos and am following htt开发者_运维技巧p://www.twospy.com/galleriffic/index.html However, I am getting the following javascript error:

  'jQuery' is undefined  jquery.galleriffic.js, line 10 character 2
  'index' is null or not an object  jquery.galleriffic.js, line 505 character 5
  'index' is null or not an object  jquery.galleriffic.js, line 505 character 5
  'index' is null or not an object  jquery.galleriffic.js, line 505 character 5
  'index' is null or not an object  jquery.galleriffic.js, line 505 character 5
  'index' is null or not an object  jquery.galleriffic.js, line 505 character 5
  'index' is null or not an object  jquery.galleriffic.js, line 505 character 5
  'index' is null or not an object  jquery.galleriffic.js, line 505 character 5
  'index' is null or not an object  jquery.galleriffic.js, line 505 character 5
  'index' is null or not an object  jquery.galleriffic.js, line 505 character 5
  'index' is null or not an object  jquery.galleriffic.js, line 505 character 5
  'index' is null or not an object  jquery.galleriffic.js, line 505 character 5
  'index' is null or not an object  jquery.galleriffic.js, line 505 character 5
  'index' is null or not an object  jquery.galleriffic.js, line 505 character 5
  'index' is null or not an object  jquery.galleriffic.js, line 505 character 5
  'index' is null or not an object  jquery.galleriffic.js, line 505 character 5
  'this.currentImage.index' is null or not an object  jquery.galleriffic.js, line 508 character 6
  'this.currentImage.index' is null or not an object  jquery.galleriffic.js, line 286 character 5

Below is the code for the aspx page:

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="galleriffic.aspx.vb" Inherits="galleriffic" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>



        <link rel="stylesheet" href="css/basic.css" type="text/css" />

        <link rel="stylesheet" href="css/galleriffic-5.css" type="text/css" />


        <!-- <link rel="stylesheet" href="css/white.css" type="text/css" /> -->

        <link rel="stylesheet" href="css/black.css" type="text/css" />


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

        <script type="text/javascript" src="js/jquery.history.js"></script>

        <script type="text/javascript" src="js/jquery.galleriffic.js"></script>

        <script type="text/javascript" src="js/jquery.opacityrollover.js"></script>

        <!-- We only want the thunbnails to display when javascript is disabled -->

        <script type="text/javascript">
            document.write('<style>.noscript { display: none; }</style>');

            jQuery(document).ready(function ($) {
                // We only want these styles applied when javascript is enabled
                $('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, div.navigation a.pageLink').opacityrollover({
                    mouseOutOpacity: onMouseOutOpacity,
                    mouseOverOpacity: 1.0,
                    fadeSpeed: 'fast',
                    exemptionSelector: '.selected'
                });

                // Initialize Advanced Galleriffic Gallery
                var gallery = $('#thumbs').galleriffic({
                    delay: 2500,
                    numThumbs: 10,
                    preloadAhead: 10,
                    enableTopPager: false,
                    enableBottomPager: false,
                    imageContainerSel: '#slideshow',
                    controlsContainerSel: '#controls',
                    captionContainerSel: '#caption',
                    loadingContainerSel: '#loading',
                    renderSSControls: true,
                    renderNavControls: true,
                    playLinkText: 'Play Slideshow',
                    pauseLinkText: 'Pause Slideshow',
                    prevLinkText: '&lsaquo; Previous Photo',
                    nextLinkText: 'Next Photo &rsaquo;',
                    nextPageLinkText: 'Next &rsaquo;',
                    prevPageLinkText: '&lsaquo; Prev',
                    enableHistory: true,
                    autoStart: false,
                    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);

                        // Update the photo index display
                        this.$captionContainer.find('div.photo-index')
                            .html('Photo ' + (nextIndex + 1) + ' of ' + this.data.length);
                    },
                    onPageTransitionOut: function (callback) {
                        this.fadeTo('fast', 0.0, callback);
                    },
                    onPageTransitionIn: function () {
                        var prevPageLink = this.find('a.prev').css('visibility', 'hidden');
                        var nextPageLink = this.find('a.next').css('visibility', 'hidden');

                        // Show appropriate next / prev page links
                        if (this.displayedPage > 0)
                            prevPageLink.css('visibility', 'visible');

                        var lastPage = this.getNumPages() - 1;
                        if (this.displayedPage < lastPage)
                            nextPageLink.css('visibility', 'visible');

                        this.fadeTo('fast', 1.0);
                    }
                });

                /**************** Event handlers for custom next / prev page links **********************/

                gallery.find('a.prev').click(function (e) {
                    gallery.previousPage();
                    e.preventDefault();
                });

                gallery.find('a.next').click(function (e) {
                    gallery.nextPage();
                    e.preventDefault();
                });

                /****************************************************************************************/

                /**** Functions to support integration of galleriffic with the jquery.history plugin ****/

                // PageLoad function
                // This function is called when:
                // 1. after calling $.historyInit();
                // 2. after calling $.historyLoad();
                // 3. after pushing "Go Back" button of a browser
                function pageload(hash) {
                    // alert("pageload: " + hash);
                    // hash doesn't contain the first # character.
                    if (hash) {
                        $.galleriffic.gotoImage(hash);
                    } else {
                        gallery.gotoIndex(0);
                    }
                }

                // Initialize history plugin.
                // The callback is called at once by present location.hash. 
                $.historyInit(pageload, "advanced.html");

                // set onlick event for buttons using the jQuery 1.3 live method
                $("a[rel='history']").live('click', function (e) {
                    if (e.button != 0) return true;

                    var hash = this.href;
                    hash = hash.replace(/^.*#/, '');

                    // moves to a new page. 
                    // pageload is called at once. 
                    // hash don't contain "#", "?"
                    $.historyLoad(hash);

                    return false;
                });

                /****************************************************************************************/
            });
        </script>

</head>
<body>
    <form id="form1" runat="server">
       <div id="page">
            <div id="container">
                <h1><a href="index.htm">Galleriffic</a></h1>
                <h2>Alternate layout using custom previous/next page controls</h2>

                <!-- Start Advanced Gallery Html Containers -->             
                <div class="navigation-container">
                    <div id="Div1" class="navigation">
                        <a class="pageLink prev" style="visibility: hidden;" href="#" title="Previous Page"></a>

                        <ul class="thumbs noscript">
                         <asp:Repeater ID="RepeaterGallery" runat="server">
                            <ItemTemplate>
                                <li>
                                    <a class="thumb" name="leaf" href='<%# "uploads/" & Container.DataItem("photo_file_name")%>' title='<%# Container.DataItem("photo_title")%>'>
                                    <img src='<%# "uploads/" & Container.DataItem("photo_thumbnail_file_name")%>'  alt="Title #0" />
                                </a>
                                    <div class="caption">
                                    <div class="image-title"><%# Container.DataItem("photo_title")%></div>
                                    <div class="image-desc"><%# Container.DataItem("photo_desc")%></div>
                                    <div class="download">
                                        <a href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_b.jpg">Download Original</a>
                                    </div>
                                </div>
                                </li>
                            </ItemTemplate>
                        </asp:Repeater>

                        </ul>
                        <a class="pageLink next" style="visibility: hidden;" href="#" title="Next Page"></a>
                    </div>
                </div>
                <div class="content">
                    <div class="slideshow-container">
                        <div id="Div2" class="controls"></div>
                        <div id="Div3" class="loader"></div>
                        <div id="Div4" class="slideshow"></div>
                    </div>
                    <div id="Div5" class="caption-container">
                        <div class="photo-index"></div>
                    </div>
                </div>
                <!-- End Gallery Html Containers -->
                <div style="clear: both;"></div>
            </div>
        </div>

    </form>
</body>
</html>

Any idea what could be causing this? any help would be much appreciated.

Thanks

From the message I understand that can not find the jQuery file

Check this line

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

make sure that the jquery file exist and load into.

jQuery gallery error using asp.net repeater

精彩评论

关注公众号

热门标签

图文推荐

jQuery gallery error using asp.net repeater

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：