title: jQuery img src replace not working
body: <p>I'm pretty new to jQuery so I'm probably doing something really wrong but the next and buck link buttons I made fail to trip the $('#largeImage img').attr('src', picture_list[ active_index ] ) script I placed into their .click functions.  Instead the result is that the #largeImage div ends up being hidden again.  I've tried everything from adding a .preventDefault() to the script to ensure that the links (which have no target) aren't trying to randomly go elsewhere.  I've also output most my  variables to ensure that they are in fact being set properly within the html code.  From all that I've read about the .attr function this script should be working.
  PHP source:</p>
  
  <pre><code>function gallery()  //displays only the first l2 photos in the database.  fix it when i   figure a workaround for printing all of the thumbnails.
  {
  try
  {
      $album_id = $_GET['id'] ;
      $db = honneyconnect( ) ;
      if( mysqli_connect_error() )
      {
          throw new Exception( "Could not connect to the database") ;
      }
      $query = 'select * from albums where album_id="'.$album_id.'"' ;
      $albums = $db-&gt;query( $query) ;
      $album_name = $albums-&gt;fetch_row();
      $default_pic = $album_name[1].'/'.$album_name[2] ;
      $albums-&gt;free();
      $query = 'select * from photos where album_id="'.$album_id.'"' ;
      $photos = $db-&gt;query( $query ) ;
      if( !$photos )
      {
          throw new Exception( "Query returned zero results." ) ;
      }
      else
      {
          $number_of_photos = $photos-&gt;num_rows ;
          echo "&lt;script type='text/javascript'&gt; array_size = ".$number_of_photos."  ;&lt;/script&gt;" ; //figure out the size of the javascript array of photo sources 
          echo "&lt;script type='text/javascript'&gt; var picture_list = new Array( array_size ) ;&lt;/script&gt;" ; //define the array
          echo "&lt;div id='largeImage'&gt;&lt;a class='back' href=''&gt;&lt;&lt;&lt;/a&gt;&lt;img src='".$default_pic."' &gt;&lt;a class='next' href=''&gt;&gt;&gt;&lt;/a&gt;&lt;/div&gt;";
          echo "&lt;div id='gallery'&gt;" ;
          echo "&lt;div id='thumbpanel'&gt;" ;
  
          if( $number_of_photos &gt; 12 )
          {
              $stop = 12 ;
          }
          else
          {
              $stop = $number_of_photos ;
          }
          for( $i = 0; $i &lt; 12 ; $i++ )
          {
              $row = $photos-&gt;fetch_row() ;
              if( !$row )
              {
                  $i = 12 ;
              }
              else
              {
                  $file_path = $album_name[1]."/".$row[2] ; //provides the path for the image source
                  echo "&lt;img value='".$i."' src='".$file_path."'&gt;" ; //assigns the value for use in the jQuery scripts
                  echo "&lt;script type='text/javascript'&gt; picture_list[ ".$i." ] = '".$file_path."'&lt;/script&gt;" ;  //sends the values to the jQuery script
              }
          }
          echo "&lt;/div&gt;&lt;/div&gt;" ;
      }
          $photos-&gt;free();
          $db-&gt;close();
  }
  catch( Exception $error )
  {
      echo $error ;
  }
  }
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  @import "honeysstyle.css";
  &lt;/style&gt;
  &lt;script type="text/javascript" src="jquery-1.10.2.min.js" &gt;&lt;/script&gt;
  &lt;script&gt;
  
   $(document).ready(function(){
  var array_size = 0 ;
  var active_index ;
  $('#largeImage').hide() ;
  $('#gallery img').click(function(){
  $('#largeImage').attr('src',$(this).attr('src').replace('gallery','large'));
  $('#largeImage').show() ;
  active_index = parseInt( $(this).attr('value') ) ;
  
  });
  $('.next').click(function(){
  active_index = active_index + 1 ;
  if( active_index &gt;= array_size )
  {
      $(this).hide() ;
  }
  if( active_index &gt; 0 )
  {
      $('.back').show() ;
  }
  var source_image = $('#largeImage').attr('src') ;
  $('#largeImage').attr('src').replace( source_image, picture_list[ active_index ] ) ;
  
  
  });
  $('.back').click(function(){
  active_index = active_index - 1 ;
  if( active_index &lt;= 0 )
  {
      $(this).hide() ;
  }
  if( active_index &lt; array_size )
  {
      $('.next').show() ;
  }
  var source_image = $('#largeImage').attr('src') ;
  $('#largeImage').attr('src').replace( source_image, picture_list[ active_index ] ) ;
  
  }) ;
  $('.close').click(function{
  $('#largeImage').hide() ;
  }) ;
  
  
  
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;?php
  require( 'function.php' );
  
   draw_masthead();
  gallery();
  
  
  
  ?&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>The following is the html result page</p>
  
  <pre><code> &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  @import "honeysstyle.css";
  &lt;/style&gt;
  &lt;script type="text/javascript" src="jquery-1.10.2.min.js" &gt;&lt;/script&gt;
  &lt;script&gt;
  
   $(document).ready(function(){
  var array_size = 0 ;
  var active_index ;
  var source_image ;
  $('#largeImage').hide() ;
  $('#gallery img').click(function(){
      $('#largeImage img').attr('src',$(this).attr('src').replace('gallery','large'));
      $('#largeImage').show() ;
      active_index = parseInt( $(this).attr('value') ) ;
  
  
  });
  $('.next a').click(function( event ){
      event.preventDefault() ;
      active_index = active_index + 1 ;
      source_image = $('#largeImage img').attr('src') ;
      $('#largeImage img').attr('src', picture_list[ active_index ] ) ;
  
  
  });
  $('.back a').click(function( event ){
      event.preventDefault() ;
      active_index = active_index - 1 ;
      source_image = $('#largeImage img').attr('src') ;
      $('#largeImage img').attr('src', picture_list[ active_index ] ) ;
  
  }) ;
  
  
  
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  
  
  
  &lt;div id="container"&gt;
  &lt;div class="photobanner"&gt;
      &lt;img class="first" src="honeys/Image1.jpg" alt=""&gt;
      &lt;img src="honeys/Image2.jpg" alt=""&gt;
      &lt;img src="honeys/Image3.jpg" alt=""&gt;
      &lt;img src="honeys/Image4.jpg" alt=""&gt;
      &lt;img src="honeys/Image5.jpg" alt=""&gt;
      &lt;img src="honeys/Image1.jpg" alt=""&gt;
      &lt;img src="honeys/Image2.jpg" alt=""&gt;
      &lt;img src="honeys/Image3.jpg" alt=""&gt;
      &lt;img src="honeys/Image4.jpg" alt=""&gt;
  &lt;/div&gt;
  &lt;/div&gt;&lt;div id="titlebar"&gt;HELL'S CANYON HONEYS ROLLER DERBY&lt;/div&gt;
  &lt;div id="nav"&gt;
  &lt;ul&gt;
  &lt;li&gt;
      &lt;a href="index.php"&gt;Home&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
      &lt;a href="news.php"&gt;News&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
      &lt;a href="#"&gt;Events&lt;/a&gt;
      &lt;ul class="eventnav"&gt;
          &lt;li&gt;&lt;a href="community.php"&gt;Community&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="bouts.php"&gt;Bouts&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;
      &lt;a href="#"&gt;The Team&lt;/a&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="roster.php"&gt;Roster&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="albums.php"&gt;Albums&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;
      &lt;a href="sponsors.php"&gt;Sponsors&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
      &lt;a href="social.php"&gt;Contact Us&lt;/a&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
      &lt;div id="controlpanel"&gt;
      &lt;ul&gt;
      &lt;li&gt;
          &lt;a href="rosteredit.php"&gt;Edit Roster&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="albums.php"&gt;Edit Albums&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="editevents.php"&gt;Edit Events&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="editnews.php"&gt;Edit News&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="editsponsors.php"&gt;Edit Sponsors&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="editcontact.php"&gt;Edit Contact Info&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;a href="clearsession.php"&gt;Log Out&lt;/a&gt;
      &lt;/li&gt;
      &lt;/ul&gt;
      &lt;/div&gt;&lt;script type='text/javascript'&gt; array_size = 4  ;&lt;/script&gt;&lt;script    type='text/javascript'&gt; var picture_list = new Array( array_size ) ;&lt;/script&gt;&lt;div id='largeImage'&gt;&lt;a class='back' href=''&gt;&lt;&lt;&lt;/a&gt;&lt;img src='rosterpics/Image3.jpg' &gt;&lt;a class='next' href=''&gt;&gt;&gt;&lt;/a&gt;&lt;/div&gt;&lt;div id='gallery'&gt;&lt;div id='thumbpanel'&gt;&lt;img value='0' src='rosterpics/image2.jpg'&gt;&lt;script type='text/javascript'&gt; picture_list[ 0 ] = 'rosterpics/image2.jpg'&lt;/script&gt;&lt;img value='1' src='rosterpics/Image3.jpg'&gt;&lt;script type='text/javascript'&gt; picture_list[ 1 ] = 'rosterpics/Image3.jpg'&lt;/script&gt;&lt;img value='2' src='rosterpics/Image4.jpg'&gt;&lt;script type='text/javascript'&gt; picture_list[ 2 ] = 'rosterpics/Image4.jpg'&lt;/script&gt;&lt;img value='3' src='rosterpics/Image5.jpg'&gt;&lt;script type='text/javascript'&gt; picture_list[ 3 ] = 'rosterpics/Image5.jpg'&lt;/script&gt;&lt;/div&gt;&lt;/div&gt;&lt;br&gt;
  
   &lt;script type='text/javascript'&gt;
  
  document.write( picture_list[1] ) ;
  document.write( picture_list[2] ) ;
  document.write( picture_list[0] ) ;
  
  
  &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Just looking to get the next and back buttons to work as intended.  Thank you in advanced for any help.  Please don't hesitate to call me on my stupid mistakes as I know I'm screwing up somewhere I'm just not sure where.</p>