Re: Moving Boxes example. How to start from first? How to loop? - CSS-Tricks

September 11, 2009 at 12:42 am #63795

Participant

If you look on line 26 of the slider.js file, You will find a line that says

.css(‘left’, "-350px");

This line tells the images to move over so that the 3rd image is lined up in the center. I changed it to be 225px. You can see when you run the script how it affects the script. You can play with the number to move the images. I would start out by setting the number to 0px. This will align the images up to the left of the window. So image 1 will be first. However, I think it looks a lot better if the images get bigger in the middle rather than the end.

Second

If you look on line 102, you will see this code

growBigger("#panel_3")

This code says to make the panel with the id of panel_3 grow bigger.I changed it to ("#panel_1")

then on line 103 you will find

var curPanel = 3;

I changed this to read var curPanel = 1;

The complete changed code is below. Mess with these values to achieve the affect you are looking for. Don’t remove any code or the code will stop working. Try instead to set the value to 0 or false.

Code:

$(function() {
	var totalPanels			= $(“.scrollContainer”).children().size();
	var regWidth			= $(“.panel”).css(“width”);

	var regImgWidth			= $(“.panel img”).css(“width”);

	var regTitleSize		= $(“.panel h2”).css(“font-size”);

	var regParSize			= $(“.panel p”).css(“font-size”);
	var movingDistance	    = 300;
	var curWidth			= 350;

	var curImgWidth			= 326;

	var curTitleSize		= “20px”;

	var curParSize			= “15px”;
	var $panels				= $(‘#slider .scrollContainer > div’);

	var $container			= $(‘#slider .scrollContainer’);
	$panels.css({‘float’ : ‘left’,’position’ : ‘relative’});
	$(“#slider”).data(“currentlyMoving”, false);
	$container

		.css(‘width’, ($panels[0].offsetWidth * $panels.length) + 100 )

		.css(‘left’, “225px”);
	var scroll = $(‘#slider .scroll’).css(‘overflow’, ‘hidden’);
	function returnToNormal(element) {

		$(element)

			.animate({ width: regWidth })

			.find(“img”)

			.animate({ width: regImgWidth })

		    .end()

			.find(“h2”)

			.animate({ fontSize: regTitleSize })

			.end()

			.find(“p”)

			.animate({ fontSize: regParSize });

	};
	function growBigger(element) {

		$(element)

			.animate({ width: curWidth })

			.find(“img”)

			.animate({ width: curImgWidth })

		    .end()

			.find(“h2”)

			.animate({ fontSize: curTitleSize })

			.end()

			.find(“p”)

			.animate({ fontSize: curParSize });

	}
	//direction true = right, false = left

	function change(direction) {
	    //if not at the first or last panel

		if((direction && !(curPanel < totalPanels)) || (!direction && (curPanel <= 1))) { return false; }	
        
        //if not currently moving
        if (($("#slider").data("currentlyMoving") == false)) {
            
			$("#slider").data("currentlyMoving", true);
			
			var next         = direction ? curPanel + 1 : curPanel - 1;
			var leftValue    = $(".scrollContainer").css("left");
			var movement	 = direction ? parseFloat(leftValue, 10) - movingDistance : parseFloat(leftValue, 10) + movingDistance;
		
			$(".scrollContainer")
				.stop()
				.animate({
					"left": movement
				}, function() {
					$("#slider").data("currentlyMoving", false);
				});
			
			returnToNormal("#panel_"+curPanel);
			growBigger("#panel_"+next);
			
			curPanel = next;
			
			//remove all previous bound functions
			$("#panel_"+(curPanel+1)).unbind();	
			
			//go forward
			$("#panel_"+(curPanel+1)).click(function(){ change(true); });
			
            //remove all previous bound functions															
			$("#panel_"+(curPanel-1)).unbind();
			
			//go back
			$("#panel_"+(curPanel-1)).click(function(){ change(false); }); 
			
			//remove all previous bound functions
			$("#panel_"+curPanel).unbind();
		}
	}
	
	// Set up "Current" panel and next and prev
	growBigger("#panel_1");	
	var curPanel = 1;
	
	$("#panel_"+(curPanel+1)).click(function(){ change(true); });
	$("#panel_"+(curPanel-1)).click(function(){ change(false); });
	
	//when the left/right arrows are clicked
	$(".right").click(function(){ change(true); });	
	$(".left").click(function(){ change(false); });
	
	$(window).keydown(function(event){
	  switch (event.keyCode) {
			case 13: //enter
				$(".right").click();
				break;
			case 32: //space
				$(".right").click();
				break;
	    case 37: //left arrow
				$(".left").click();
				break;
			case 39: //right arrow
				$(".right").click();
				break;
	  }
	});
	
});