Do scrollTo make the div scroll completely?

I have a div with only horizontal overflow. With a link outside the div, I'm trying to scroll the div to a specific image (think of a horizontal gallery scrolling to the right).

I used the following javascript. It works great on a webpage.

However, the DIV containing the gallery is larger than most images. Hence, the browser window will only scroll until the requested div appears on the right and is now completely on the screen, rather than one pixel. However, I would like the div to scroll all the way so that the image completely hugs the left edge of the container.

I hope I have some sense, I am not very experienced, but I could not find the answer to my question on the Internet.

$(document).ready(function(){
$('#gimg1').click(function() {
   $.scrollTo($('#gimg1link'), 1000);
});
$('#gimg2').click(function() {
   $.scrollTo($('#gimg2link'), 1000);
});
$('#gimg3').click(function() {
   $.scrollTo($('#gimg3link'), 1000);
});
$('#gimg4').click(function() {
   $.scrollTo($('#gimg4link'), 1000);
});
});
      

<div id="gallery">

           <img class="galleryimage" id="gimg1" src="lb1.jpg">

         

           <img class="galleryimage" id="gimg2" src="lb2.jpg">



           <img class="galleryimage" id="gimg3" src="lb3.jpg">

         
       
           <img class="galleryimage" id="gimg4" src="lb4.jpg">


         
    </div>

<a href="#gimg1" id="gimg1link">Image 1</a>
<a href="#gimg2" id="gimg2link">Image 2</a>
<a href="#gimg3" id="gimg3link">Image 3</a>
<a href="#gimg4" id="gimg4link">Image 4</a>
      

Run code


+3


source to share


2 answers


Based on this answer, I have adapted the code to suit your needs. It uses the thumbnail index to find the matching image left

and sets scrollLeft

the viewport to that value.

$('#nav li').click(function(){
    var clickedIndex = $(this).index();
    var targetElement = $('#viewport ul li').eq(clickedIndex);
    var elementPosition = targetElement.position();
    $('#viewport').animate({scrollLeft: elementPosition.left},500);
});

      



Working fiddle: http://jsfiddle.net/Lqvqtwtb/

+1


source


You are using the image and link selector in your jquery in the wrong order.

$('#gimg1').click(function() {
   $.scrollTo($('#gimg1link'), 1000);
});

      

This snippet means "when you click the image #gimg1

, highlight the link position #gimg1link

." You want it the other way around: when you click on the link, highlight the image.

Reversing these selectors gives you a working slider: jsFiddle

The last image will always be to the right of the screen because it ends and cannot be scrolled any further. The rest of the images will scroll to the left as long as this allows you to increase the width of the document.




Also, you can optimize your javascript without copying the same code, but simply making it more general:

$(document).ready(function(){
    $('a[id^=gimg]').click(function() {  // when a link with an ID starting with "gimg" is clicked
        var linkID = $(this).attr('id'); // get the whole id from this link
        var imgID = linkID.replace('link', ''); // get the img ID it relates to by removing the 'link' part
        $scrollTo( $('#' + imgID), 1000); // scroll to the image this link belongs to
    });
});

      

Now it doesn't matter how many links and images you add, as long as they all use the same naming convention.

+2


source







All Articles