CODEWITHSUNDEEP
jqueryscrollto
Ledgemonkey
Ledgemonkey

Reputation: 7481

how do i scroll to an image in a gallery clicking on a link using jquery - scrollTo

i want to be able to scroll around a gallery of images by clicking on a link, so clicking on the "kellie" link will scroll to her picture in the gallery ?

this is as far as i've got:

html:

<ul class="link">

<li><a href="images/kellie_200.jpg" >kellie</a></li>
<li><a href="images/beau_200.jpg"   >beau</a></li>
<li><a href="images/glenda_200.jpg" >glenda</a></li>
<li><a href="images/mofat_200.jpg"  >mofat</a></li>
<li><a href="images/fader_200.jpg"  >fader</a></li>
<li><a href="images/johnny_200.jpg" >johnny</a></li>


</ul>


<div id="gallery">

<ul>


<li><img src="images/kellie_200.jpg" width="200" height="200" /></li>
<li><img src="images/beau_200.jpg" width="200" height="200" /></li>
<li><img src="images/glenda_200.jpg" width="200" height="200" /></li>
<li><img src="images/mofat_200.jpg" width="200" height="200" /></li>
<li><img src="images/fader_200.jpg"  width="200" height="200" /></li>
<li><img src="images/johnny_200.jpg" width="200" height="200" /></li>


</ul>


 script:

 $(document).ready(function(){

 $('.link').click(function(){

 var $th= $(this);

 var id= $th.attr('href');


 /*alert(id);*/


  $ ('#gallery') .scrollTo(' ??????? ',800);


  return false;


  });

  });

Upvotes: 0

Views: 1974

Answers (1)

sadmicrowave
sadmicrowave

Reputation: 40952

You can use the selector of the div you want to scroll to like this:

$(document).ready(function(){
    $('.link').click(function(){
       var relation = $(this).attr('href');
       $('#gallery').scrollTo( $("img[src='" + relation + "']"), 800);
     });
});

alternatively, if you don't want to use the div selector of the element you can use absolute positioning like so:

$('.link').click(function(){
   var relation = $(this).attr('href');
   var iTop = $("img[src='" + relation + "']").offset().top;
   var iLeft = $("img[src='" + relation + "']").offset().left;
   $('#gallery').scrollTo({top: iTop+'px', left: iLeft+'px'}, 800);
});

Whichever you use you probably also want to use the e.preventDefault function so the link doesn't try to execute the href path you have. Use it like this:

$('.link').click(function( e ){
   e.preventDefault();
   //do your scrollTop function
});

Upvotes: 1

Related Questions