3

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..

Martin Prikryl
  • 188,800
  • 56
  • 490
  • 992
sukhi
  • 904
  • 7
  • 11
  • Please, provide a working example, in order to understand what behaviour you desire. Anyway, is not possible to recognize what your are showing with only html and css, you should use jQuery. – Luca Detomi Apr 09 '14 at 08:02
  • i want to create image viewer like this site: http://www.slideshare.net/Coury1951694/asauniversalfileformatouttherepdfisconsi48?qid=0499df81-cf6e-4227-853b-f3453f0ac91b&v=qf1&b=&from_search=1 I ned full functionality of this viewer, almost equivalent. Jquery, javascript, css, html all can be used, kindly suggest. Thnx in advance. – sukhi Apr 09 '14 at 09:03

1 Answers1

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/

Brad Schvaneveldt
  • 51
  • 2