Jquery image slider window resize scaling issue
- by eb_Dev
Hi,
I have created image gallery slider, the images of which scale with the window size. My problem is I can't seem to create the right formula to ensure that the slider is at the right position when the window is scaled.
If I am at the first image and the slider 'left' offset is 0 then the scaling works fine and my offset is correct, however when I am on image two and my slider is offset by say -1500 and then the window is resized, the slider is then at the wrong offset.
Taking this into account I figured I could just add / subtract the new window size difference from the slider offset and therefore have everything in the right position. I was wrong. It works for the first two images but then If I am at the end of my slider on the last image I get a nice big gap between the end of the last image and the border of the page.
Can someone please show my where I am going wrong please? I've spent days on this :(
The relevant code is as follows:
$(window).bind('resize', function(event, delta) {
/* Resize work images - resizes all to document width */
resizeWorkImages('div.page.work div#work ul');
/* Position slider controls */
positionSliderControls();
/* Get the difference between the old window width and the new */
var windowDiff = (gLastWindowWidth - $(window).width()) * -1;
/* Apply difference to slider left position */
var newSliderLeftPos = stripPx($('div.page.work div#work ul').css('left')) - windowDiff;
/* Apply to slider */
$('div.page.work div#work ul').css('left',newSliderLeftPos+'px')
/* Update gSlider settings */
gSlider.update();
/* Record new window width */
gLastWindowWidth = $(window).width();
});
Thanks,
eb_dev
