to determine which image is being currently displayed on vertical image viewer

Question

i am displaying images from inside a div to a vertical scroller on html page. How can I determine which image is being currently displayed.

My div is like this :

<div id="mainPlayer" class="imgcontainer scrcontentsection">
    <img id="1" src="http://sukhiimg.net/potrait/p1.png" class="cls"  width="653" height="600" alt="1" /><br />
    <img id="2" src="http://sukhiimg.net/potrait/p2.png" class="cls"  width="653" height="600" alt="2" />
    <img id="3" src="http://sukhiimg.net/potrait/p3.png" class="cls" width="653" height="600" alt="3" /><br />
    <img id="4" src="http://sukhiimg.net/potrait/p4.png" class="cls"  width="653" height="600" alt="Sample picture for scroll box: Franz Josef Glacier, New Zealand" />
</div>

And my CSS is like this :

scrcontentsection {
    max-height:528px;
    overflow-y:auto;
    overflow-x:auto;
    max-width:653px;
}
.imgcontainer{
    height:600px;
    width:auto;
}
.option2{
    min-height:531px !important; 
    height:auto !important;
}

And there are multiple images inside which are being displayed on a vertical image scroller and problem is how to determine which image being currently displayed on the scroller. And how can i display a specific image on scroller area, if user can enter a image no (like 1,2,3,...) in text box and he want to jump on that specific image..

Answer 1

You can accomplish this by using jQuery and a little math. You will need to use the scroll() function on your scrolling element to detect that scrolling has taken place. Within that, you want to detect the scroll position. If you divide the scroll position by the height of the image, and round up to the next whole number, it will give you a number your can use for the current image being viewed. Here is the jquery I used:

 $('#mainPlayer').scroll(function (event) {
    var imageHeight = 200;
    var imageNumber = Math.ceil($('#mainPlayer').scrollTop() / imageHeight);
    $('#updateImageNumber').text(imageNumber);
});

I also set it up in a jsfiddle so you can see everything I did. I moved a little css around so you can see what I did a little better. Hope this helps.

http://jsfiddle.net/bradschvan/tft5s6y0/1/