/    Sign up×
Community /Pin to ProfileBookmark

Recalculating/building slider on resize (Easyslider 1.7)

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[/url]) to display a slideshow. I’m resizing the slides/container to the full viewport size on load like so:

[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
});
[/CODE]

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));
});[/CODE]

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
});
});[/CODE]

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

to post a comment
JavaScript

1 Comments(s)

Copy linkTweet thisAlerts:
@gnoricJun 17.2013 — Hi.. My not really good solution as I ran into the same problem:

  • 1. create a var that backs up the html before the slider is called.

  • 2. on resize, remove old html

  • 3. add backup while changing it's ID. (I have a counter, i, so after 3 resizes my id is #slider3)

  • 4. adjust the sizes.

  • 5. call the slider.


  • here is the not fully working code I used. It`s still a mess, but whatever:

    [CODE]
    <script>
    var height = 0;
    jQuery(document).ready(function($){

    var backup = $('.section-newsslider #slider').html();
    var is_playing = false;
    var i = "";

    function newsslider_adjustment(i){

    if (is_playing) {
    $('.section-newsslider #slider').remove();
    $('.section-newsslider .content-pad').html('<div id="slider'+i+'" class="easyslider">'+backup+'</div>');
    }
    var full_width = jQuery(window).width();
    var item_width = jQuery('.section-newsslider #slider'+i).width();

    $("#newsslider").hover(function(){
    $("#newsslider .content-pad > span").fadeIn("slow");
    },
    function(){
    $("#newsslider .content-pad > span").fadeOut();
    });

    if (full_width < 1002) {
    jQuery('#slider'+i+' > ul > li').each(function(){
    $(this).width(item_width);
    });
    }else{
    jQuery('#slider'+i+' > ul > li').each(function(){
    $(this).width(1002);
    });
    }


    $('#newsslider ul > li').each(function($height){
    if (height < $(this).height())
    height = $(this).height();
    });

    $('#newsslider ul > li').each(function(){
    if (height != $(this).height())
    $(this).height(height);
    });


    $("#slider"+i).easySlider({
    auto: true,
    continuous: true,
    nextId: "slider1next",
    prevId: "slider1prev",
    prevText: '',
    nextText: '',
    controlsFade: true,
    speed: <?php echo $duration; ?>,
    pause: <?php echo $animation; ?>,
    });
    is_playing = true;
    $('#newsslider .content-pad > span').each(function($height){
    $(this).css('top', (height)/2);
    });
    }
    jQuery(window).resize(function () {
    newsslider_adjustment(i);
    i++;
    alert(i);
    });

    newsslider_adjustment(i);
    i=1;

    });
    </script>
    [/CODE]
    ×

    Success!

    Help @copes spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 5.16,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...