title: jQuery image roundabout only to link front image
body: <p>I have been working on an image roundabout plugin provided in the following link <a href="http://fredhq.com/projects/roundabout/" rel="nofollow">http://fredhq.com/projects/roundabout/</a> and all is working fine apart from the fact that whichever link I click on; be it the front or the back, the roundabout does slide round to the front, but then takes you to the link for the image that you have just clicked... therefore rendering the roundabout pretty much useless. </p>
  
  <p>I have only just start learning jQuery not too long ago and am quite inexperienced and feel I may be missing something simple here. I only want the image at the front of the roundabout to link to its necessary page. When i click on any other images behind the front one, I only want the roundabout to swing that image to the front, but then enable the link on click when that image is at the front</p>
  
  <p>Below is what I have so far</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;section id="carousel"&gt;
  &lt;ol class="next"&gt;
      &lt;li&gt;&lt;a href="http://bandonthewall.org/"&gt;&lt;img src="assets/images/carousel-item-1.png"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="http://google.com"&gt;&lt;img src="assets/images/carousel-item-2.png"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="http://bandonthewall.org/"&gt;&lt;img src="assets/images/carousel-item-3.png"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="http://google.com"&gt;&lt;img src="assets/images/carousel-item-4.png"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="http://bandonthewall.org/"&gt;&lt;img src="assets/images/carousel-item-5.png"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="http://google.com"&gt;&lt;img src="assets/images/carousel-item-6.png"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="http://bandonthewall.org/"&gt;&lt;img src="assets/images/carousel-item-7.png"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="http://google.com"&gt;&lt;img src="assets/images/carousel-item-8.png"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="http://bandonthewall.org/"&gt;&lt;img src="assets/images/carousel-item-9.png"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="http://google.com"&gt;&lt;img src="assets/images/carousel-item-10.png"&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="http://bandonthewall.org/"&gt;&lt;img src="assets/images/carousel-item-11.png"&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ol&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p><strong>JQUERY</strong></p>
  
  <pre><code>$(document).ready(function() {
        $('ol').roundabout({
           btnNext: ".next",
          enableDrag: true,
        });
  
     $('a').click(function(e){
          link = $(this).attr("href");
          location.href=link;
      });  });
  </code></pre>
  
  <p>I would really appreciate help with this</p>
  
  <p>Thanks</p>