PDA

View Full Version : slider customization

boeing747fp
04-13-2010, 10:52 PM
i need to make this scroller so that it does not move when you click inside the container, just when the left/right arrows are clicked only... not sure how to do this?

html file
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">

<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">

<title>Test</title>

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="utf-8">

<script src="js/jquery-1.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/slider.js" type="text/javascript" charset="utf-8"></script>
</head>


<body>

<body bgcolor="#ffffff">

<div id="wrapper">

<img src="lcheader1.jpg" alt="" />

<div id="slider">

<img class="scrollButtons left" src="images/leftarrow.png" />

<div style="overflow: hidden;" class="scroll">

<div class="scrollContainer">

<div class="panel" id="panel_1">
<div class="inside">
<img src="http://www.freewebs.com/todaysmagizene/funny-puffle-comic.jpg" alt="picture"/>
<h2>Puffle Comic</h2>
<p><a href="http://www.freewebs.com/todaysmagizene/funny-puffle-comic.jpg">CLICK HERE TO DOWNLOAD COMIC</a></p>
</div>
</div>

<div class="panel" id="panel_2">
<div class="inside">
<img src="http://4.bp.blogspot.com/_9QAhUnvdeFY/ScB0_BZBWeI/AAAAAAAALBg/f-vr-1Rr2eM/s400/Funny-Comics001.jpg" alt="picture" />
<h2>Funny Comic</h2>
<p><a href="http://4.bp.blogspot.com/_9QAhUnvdeFY/ScB0_BZBWeI/AAAAAAAALBg/f-vr-1Rr2eM/s400/Funny-Comics001.jpg">CLICK HERE TO DOWNLOAD COMIC</a></p>
</div>
</div>

<div class="panel" id="panel_3">
<div class="inside">
<img src="http://www.adherents.com/lit/comics/image/Gambit_with_Rogue_1.jpg" alt="picture"/>
<h2>XMEN Comic</h2>
<p><a href="http://www.adherents.com/lit/comics/image/Gambit_with_Rogue_1.jpg">CLICK HERE TO DOWNLOAD COMIC</a></p>
</div>
</div>

<div class="panel" id="panel_4">
<div class="inside">
<img src="http://images.fanpop.com/images/image_uploads/Snoopy-Comic-Strip-peanuts-256343_725_519.gif" alt="picture"/>
<h2>Snoopy Comic</h2>
<p><a href="http://images.fanpop.com/images/image_uploads/Snoopy-Comic-Strip-peanuts-256343_725_519.gif">CLICK HERE TO DOWNLOAD COMIC</a></p>
</div>
</div>

<div class="panel" id="panel_5">
<div class="inside">
<img src="http://strips.bitstrips.com/af9e74f07510e77d343e291723af31fd.png" alt="picture"/>
<h2>Strip Bits</h2>
<p><a href="http://strips.bitstrips.com/af9e74f07510e77d343e291723af31fd.png">CLICK HERE TO DOWNLOAD COMIC</a></p>
</div>
</div>

<div class="panel" id="panel_6">
<div class="inside">
<img src="http://strips.bitstrips.com/af9e74f07510e77d343e291723af31fd.png" alt="picture"/>
<h2>Strip Bits</h2>
<p><a href="http://strips.bitstrips.com/af9e74f07510e77d343e291723af31fd.png">CLICK HERE TO DOWNLOAD COMIC</a></p>
</div>
</div>

</div>

<div id="left-shadow"></div>
<div id="right-shadow"></div>

</div>

<img class="scrollButtons right" src="images/rightarrow.png" />

</div>

</div>

</body>

</html>

slider.js
$(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', "-350px");

//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_3");
var curPanel = 3;

$("#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;
}
});

});