title: jQuery gallery error using asp.net repeater
body: <p>I am using asp.net repeater to display the photos and am following <a href="http://www.twospy.com/galleriffic/index.html" rel="nofollow">http://www.twospy.com/galleriffic/index.html</a>
  However, I am getting the following javascript error:</p>
  
  <pre><code>  '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
  </code></pre>
  
  <p>Below is the code for the aspx page:</p>
  
  <pre><code>    &lt;%@ Page Language="VB" AutoEventWireup="false" CodeFile="galleriffic.aspx.vb" Inherits="galleriffic" %&gt;
  
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head runat="server"&gt;
      &lt;title&gt;&lt;/title&gt;
  
  
  
          &lt;link rel="stylesheet" href="css/basic.css" type="text/css" /&gt;
  
          &lt;link rel="stylesheet" href="css/galleriffic-5.css" type="text/css" /&gt;
  
  
          &lt;!-- &lt;link rel="stylesheet" href="css/white.css" type="text/css" /&gt; --&gt;
  
          &lt;link rel="stylesheet" href="css/black.css" type="text/css" /&gt;
  
  
          &lt;script type="text/javascript" src="js/jquery-1.3.2.js"&gt;&lt;/script&gt;
  
          &lt;script type="text/javascript" src="js/jquery.history.js"&gt;&lt;/script&gt;
  
          &lt;script type="text/javascript" src="js/jquery.galleriffic.js"&gt;&lt;/script&gt;
  
          &lt;script type="text/javascript" src="js/jquery.opacityrollover.js"&gt;&lt;/script&gt;
  
          &lt;!-- We only want the thunbnails to display when javascript is disabled --&gt;
  
          &lt;script type="text/javascript"&gt;
              document.write('&lt;style&gt;.noscript { display: none; }&lt;/style&gt;');
  
              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: '&amp;lsaquo; Previous Photo',
                      nextLinkText: 'Next Photo &amp;rsaquo;',
                      nextPageLinkText: 'Next &amp;rsaquo;',
                      prevPageLinkText: '&amp;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 &gt; 0)
                              prevPageLink.css('visibility', 'visible');
  
                          var lastPage = this.getNumPages() - 1;
                          if (this.displayedPage &lt; 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;
                  });
  
                  /****************************************************************************************/
              });
          &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
         &lt;div id="page"&gt;
              &lt;div id="container"&gt;
                  &lt;h1&gt;&lt;a href="index.htm"&gt;Galleriffic&lt;/a&gt;&lt;/h1&gt;
                  &lt;h2&gt;Alternate layout using custom previous/next page controls&lt;/h2&gt;
  
                  &lt;!-- Start Advanced Gallery Html Containers --&gt;             
                  &lt;div class="navigation-container"&gt;
                      &lt;div id="Div1" class="navigation"&gt;
                          &lt;a class="pageLink prev" style="visibility: hidden;" href="#" title="Previous Page"&gt;&lt;/a&gt;
  
                          &lt;ul class="thumbs noscript"&gt;
                           &lt;asp:Repeater ID="RepeaterGallery" runat="server"&gt;
                              &lt;ItemTemplate&gt;
                                  &lt;li&gt;
                                      &lt;a class="thumb" name="leaf" href='&lt;%# "uploads/" &amp; Container.DataItem("photo_file_name")%&gt;' title='&lt;%# Container.DataItem("photo_title")%&gt;'&gt;
                                      &lt;img src='&lt;%# "uploads/" &amp; Container.DataItem("photo_thumbnail_file_name")%&gt;'  alt="Title #0" /&gt;
                                  &lt;/a&gt;
                                      &lt;div class="caption"&gt;
                                      &lt;div class="image-title"&gt;&lt;%# Container.DataItem("photo_title")%&gt;&lt;/div&gt;
                                      &lt;div class="image-desc"&gt;&lt;%# Container.DataItem("photo_desc")%&gt;&lt;/div&gt;
                                      &lt;div class="download"&gt;
                                          &lt;a href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_b.jpg"&gt;Download Original&lt;/a&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;/li&gt;
                              &lt;/ItemTemplate&gt;
                          &lt;/asp:Repeater&gt;
  
                          &lt;/ul&gt;
                          &lt;a class="pageLink next" style="visibility: hidden;" href="#" title="Next Page"&gt;&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="content"&gt;
                      &lt;div class="slideshow-container"&gt;
                          &lt;div id="Div2" class="controls"&gt;&lt;/div&gt;
                          &lt;div id="Div3" class="loader"&gt;&lt;/div&gt;
                          &lt;div id="Div4" class="slideshow"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div id="Div5" class="caption-container"&gt;
                          &lt;div class="photo-index"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;!-- End Gallery Html Containers --&gt;
                  &lt;div style="clear: both;"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any idea what could be causing this? any help would be much appreciated.</p>
  
  <p>Thanks</p>