Add a class to the image closest to the center of

Question

On this page: [link-removed] I have a list of images and when you hover over each one it displays some info on the right, instead of triggering it on hover, how would i automatically trigger the image closest to the center of the screen so you can scroll down and the middle image will always the the selected image.

Thanks.

Answer 1

$(window).scroll(function(){

    $($(".portfolio img").sort(function(a,b){
      return Math.abs(1 - (($(window).scrollTop()+$(window).height()/2-$(a).height()/2) / $(a).position().top)) - 
             Math.abs(1 - (($(window).scrollTop()+$(window).height()/2-$(b).height()/2) / $(b).position().top))
    })[0]).mouseover()

})

man that took forever.... basically I'm sorting the returned node list based on the element's position relative to the current scroll position and then call mouseover on the top result.

and an alternative approach (different position that it highlights it)

$(window).scroll(function(){

    $($(".portfolio img").sort(function(a,b){
      return Math.abs(1 - (($(window).scrollTop()+$(window).height()/2-$(a).height()) / $(a).position().top)) - 
             Math.abs(1 - (($(window).scrollTop()+$(window).height()/2-$(b).height()) / $(b).position().top))
    })[0]).mouseover()

})

Explanation

Here's an explanation of the process of this function. In brief it determines which element is closest to the current scroll position by a sort. It divides the scroll position by the element's physical position, and if the scroll position is equal to the element position, the result (scroll position divided by element position) will be 1. if you subtract that from 1, the desired number will be 0 instead of one. All the other elements will be either greater than 0 or less than 0. If we then get the absolute value of this (make all the numbers positive), we will have a set of positive numbers with the closest one to 0 being the closest to the scroll position. (e.g. a set of -4, -2, 1, 5, 7 will become 4, 2, 1, 5, 7. This can then be sorted to 1, 2, 4, 5, 7. Thus -4 is closer to 0 than +5 and gets sorted higher). Then we just sort it and the one closest to 0 is the one we want.

thus we get this formula

|1 - (scrollX / elementX)|

then we sort it

Array.sort(function(a,b){return a - b}); // simple sort method

and we care only about the first element (one closest to 0), which is the first item in the sorted array as denoted by [0].

Lastly we call the mouseover event for that element.

Brief Explanation :P

Sorry for the overly complicated explanation. I guess if I could summarize it, I would say it takes the x value of the scroll position and divides it by the x values of the elements. a result of 1 would mean they are equal, so the one with a value closest to that is the one we want.

Meaning of the /2 and such

All we are doing here is setting an offset. if we leave it at the scroll position, it will be relative to the top of the screen, but we want it relative to the middle. Thus we calculate based on the window scrollX + 1/2 of the window height ($(window).scrollTop()+$(window).height()/2). Then we do the same for the element so that we do this relative to the middle of the element rather than the top of it (-$(a).height()/2). That part's all preference as to where it actually goes to the next element.

Sorry for the convoluted explanation... it is really hard to explain even to myself

Answer 2

Have you considered to use a carousel component?

Have a look at this http://www.professorcloud.com/mainsite/carousel.htm