Hello,
I’m trying to make a really slick gallery that uses easyslider ([url]http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider
[CODE]
$(document).ready(function() {
var screenWidth = $(window).width();
var screenHeight = $(window).height();
$(‘#slider li’).height(screenHeight);
$(‘#slider li’).width(screenWidth);
}
//then call easyslider setup
//easyslider setup
$(“#slider”).easySlider({
auto: false,
continuous: true
});
This works a treat, the problem is, if my browser is set at say 1700px wide, i load the page, the slider gets set at that width… if i now make my browser smaller, the slider no longer fits, the same thing the other way but it’s small and has ugly gaps.
What i’m trying to work out, is a way of recalling easyslider on resize. I’ve tried a couple of attemps at first making it scale while resizing, scaling the ul, li and various bits to the correct values (this fails, the slider starts shifting weird values):
[CODE]
$(window).resize(function() {
var screenHeight = $(window).height();
var screenWidth = $(window).width();
if(screenHeight > 700){
$(‘#slider li’).height(screenHeight);
$(‘#slider’).height(screenHeight);
}
$(‘#slider li’).width(screenWidth);
$(‘#slider’).width(screenWidth);
var sliderUlwidth = screenWidth*6;
$(‘#slider ul’).width(sliderUlwidth);
$(‘#slider ul li’).first().css(“margin-left”, math.abs(screenWidth));
});
Then, simply recalling easyslider on resize (again fails, this seems to give it multiple values to slide on and it skips around back and forth):
[CODE]
$(window).resize(function() {
//easyslider setup
$(“#slider”).easySlider({
auto: false,
continuous: true
});
});
Neither of these worked, what i need to do i believe is “destroy” easyslider, so the slider is just plain old html, then scale it, then recall easyslider setup. I’m just not sure how to accomplish that? maybe someone has an idea, or a completely different thought on the matter?
Thanks