title: Image Gallery Thumbnails Slider
body: <p>Here I am trying to create an Image Gallery:
  <a href="http://jsfiddle.net/L7yKp/1/" rel="nofollow">http://jsfiddle.net/L7yKp/1/</a></p>
  
  <pre><code>var xml = "&lt;rss version='2.0'&gt;&lt;channel&gt; &lt;image&gt;http://www.nikon.com/swf/img/thumbnail_ophthalmic_lenses.png&lt;/image&gt; &lt;image&gt;http://www.nikon.com/swf/img/thumbnail_ophthalmic_lenses.png&lt;/image&gt; &lt;image&gt;http://www.nikon.com/swf/img/thumbnail_ophthalmic_lenses.png&lt;/image&gt; &lt;limage&gt;http://images1.videolan.org/images/largeVLC.png&lt;/limage&gt; &lt;limage&gt;http://images1.videolan.org/images/largeVLC.png&lt;/limage&gt; &lt;limage&gt;http://images1.videolan.org/images/largeVLC.png&lt;/limage&gt;   &lt;/channel&gt;&lt;/rss&gt;",
  
  xmlDoc = $.parseXML( xml ),
  $xml = $( xmlDoc ),
  $image= $xml.find( "image" );
  $limage = $xml.find("limage");
  
  $( "#thumbs" ).append( $image.map(function(){
          return $('&lt;img&gt;', {className: 'thumbnails', src:$(this).text()})[0];
      }));
  
          $( "#panel" ).append( $limage.map(function(){
          return $('&lt;img&gt;', {className: 'largeimages', src:$(this).text()})[0];
      })
  );
  </code></pre>
  
  <p>​I have to show larger images on click of the thumbnail image. So on click of each thumbnail the corresponding larger image is to be displayed. I need some help.</p>