www.webdeveloper.com
Results 1 to 2 of 2

Thread: Recalculating/building slider on resize (Easyslider 1.7)

Hybrid View

  1. #1
    Join Date
    May 2007
    Posts
    104

    Recalculating/building slider on resize (Easyslider 1.7)

    Hello,

    I'm trying to make a really slick gallery that uses easyslider (http://cssglobe.com/post/5780/easy-s...-jquery-slider) 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
    });
    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

  2. #2
    Join Date
    Jun 2013
    Posts
    1
    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>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles