How do i show selected image on click of a link using jquery cycle in jquery mobile?
===

I am using jquery cycle in one of jquery mobile application.


I have added following code:  

      <script type="text/javascript" src="jquery.cycle.lite.js"></script>
    	<script type="text/javascript">
    		$(document).ready(function() {
    			$('.slideshow').cycle({
    			fx:     'fade', 
    			speed:  'fast', 
    			timeout: 0, 
    			next:   '#next2', 
    			prev:   '#prev2',
    			after:  onAfter
    		});
    		});
    		function onAfter() { 
      alert(this.src); 
    } 
    	</script>


                            

    <div data-role="content">
			<div class="content-primary">
				<div class="slideshow" style="height:420px;">
				<img src="images/slide-1.jpg" />
				<img src="images/slide-2.jpg" />
				<img src="images/slide-3.jpg" />
				<img src="images/slide-4.jpg" />
				</div>
				<a id="prev2" href="#">Prev</a> 
				<a id="next2" href="#">Next</a>
			</div><!--/content-primary -->

			<div class="content-secondary">

				<div data-role="collapsible" data-collapsed="true">

						<h3>More in this section</h3>

						<ul data-role="listview" data-divider-theme="d">

							<li data-role="list-divider">Slides</li>
								<li><a href="index.html">slide-1</a></li>
								<li><a href="index.html">slide-2</a></li>
						</ul>
				</div>
			</div>

		</div><!-- /content -->


The slider is working fine.


But what i am curious to know is that whether is it possible that when a user clicks on a particular link for e.g. slide-1 the first image should be loaded?


