Lab 9 (Data Structures and XML): XML Pokemon Image Viewer

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css" type="text/css" />
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="script.js"></script>
  <title>Lab 9 (Data Structures and XML): A Better Image Slider</title>
</head>

<body>
  <div id="container">
    <div id="left">
      <img src="http://humbergameprogrammers.ca/images/lab9/arrow_left.png" alt="left arrow" class="larrow" />
    </div>
    <div id="viewport">
      <!-- Insert elements like this one into the viewport based on the XML -->
      <!--
      
      <div class="pokemon">
        <img src="http://humbergameprogrammers.ca/images/lab9/Pikachu.jpg" alt="Pikachu" />
        <p><cite><strong>Pikachu</strong> - <a target="_blank" href="http://www4.atwiki.jp/hitec/pages/337.html" title="Pokemon Gijinka Database">Pokemon Gijinka Database</a></cite></p>
      </div> 
      
      -->
    </div>
    <div id="right">
      <img src="http://humbergameprogrammers.ca/images/lab9/arrow_right.png" alt="right arrow" class="rarrow" />
    </div>
  </div>
</body>

</html>


$( window ).load( function() {

  // Use this number to keep track of which image we're look at.
  var currentIndex = 0;

//Set this null for now!

var images = null;
$.ajax({
  url: 'pokedexImages.xml',
  dataType: 'xml',
  method: 'get'
  })
  .done( function( xml ) {
    
    var pokeymans =$( xml ).children( 'pokedex ').children();
    pokeymans.each( function( i ) {
      
      var name = $( this ).children( 'name' ).text();
      var imageUrl = $( this ).children( 'image' ).attr( 'url' );
      var creditUrl = $( this ).children( 'credit').attr( 'url' );
      var credit = $(this ).children( 'credit' ).text();
      
      $( '#viewport' ).append(
         '<div class="pokemon hidden">' +
        '<img src="' + imageUrl + '" alt="' + name + '" />' + 
        '<p><cite><strong>' + name + '</strong> - <a target="_blank" href="' + 
  creditUrl + '" title="' + credit + '">' + credit + '</a></cite></p>' +
        '</div>' 
      );    
      
    } );
 images = $( '#viewport .pokemon' );
  images.first().fadeIn();
  
} );

  // Listen for click of the right arrow
  $( '#right img' ).on( 'click', nextImage

   
   );

  // Listen for click of the left arrow
  $( '#left img' ).on( 'click', function( event ) {

    images.eq( currentIndex ).hide();
    var prevIndex = currentIndex - 1;
    currentIndex = ( prevIndex < 0 ) ? images.length - 1 : prevIndex;
    images.eq( currentIndex ).fadeIn();

  } );
  
  function nextImage() {
    images.eq( currentIndex ).hide();
    currentIndex = ( currentIndex - 1 ) % images.length;
    images.eq( currentIndex ).fadeIn();
  }

} );

/* Styles go here */

#container {
  width: 722px;
}

#viewport {
  text-align: center;
  overflow: hidden;
  float: left;
  width: 600px;
  height: 600px;
  border: 1px dotted #86C440;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

#left, #right {
  position: relative;
  float: left;
  width: 60px;
  height: 600px;
}

#left img,
#right img {
  position: absolute;
  padding: 10px;
  top: 45%;
}

#left img {
  left: 0;
}
#right img {
  right: 0;
}

.hidden {
  display: none;
}

<?xml version="1.0" encoding="utf-8"?>
<pokedex>
	<pokemon id="1">
		<name>Pikachu</name>
		<image url="http://humbergameprogrammers.ca/images/lab9/Pikachu.jpg" />
		<credit url="http://www4.atwiki.jp/hitec/pages/337.html">Pokemon Gijinka Database</credit>
	</pokemon>
	<pokemon id="2">
		<name>Charizard</name>
		<image url="http://humbergameprogrammers.ca/images/lab9/Charizard.jpg" />
		<credit url="http://www4.atwiki.jp/hitec/pages/50.html">Pokemon Gijinka Database</credit>
	</pokemon>
	<pokemon id="3">
		<name>Cubone</name>
		<image url="http://humbergameprogrammers.ca/images/lab9/Cubone.jpg" />
		<credit url="http://www4.atwiki.jp/hitec/pages/139.html">Pokemon Gijinka Database</credit>
	</pokemon>
	<pokemon id="4">
		<name>Leafeon</name>
		<image url="http://humbergameprogrammers.ca/images/lab9/Leafeon.jpg" />
		<credit url="http://www4.atwiki.jp/hitec/pages/55.html">Pokemon Gijinka Database</credit>
	</pokemon>
	<pokemon id="5">
		<name>Magikarp</name>
		<image url="http://humbergameprogrammers.ca/images/lab9/Magikarp.jpg" />
		<credit url="http://www4.atwiki.jp/hitec/pages/167.html">Pokemon Gijinka Database</credit>
	</pokemon>
	<pokemon id="6">
		<name>Pidgeot</name>
		<image url="http://humbergameprogrammers.ca/images/lab9/Pidgeot.jpg" />
		<credit url="http://www4.atwiki.jp/hitec/pages/53.html">Pokemon Gijinka Database</credit>
	</pokemon>
</pokedex>