Skip to content

Instantly share code, notes, and snippets.

@mikebosco

mikebosco/easySlider1.7.js

Created December 8, 2011 20:23
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mikebosco/1448395 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mikebosco/1448395 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
easySlider1.7.js
/*
* Easy Slider 1.7 - jQuery plugin
* written by Alen Grakalic
* http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding
*
* Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* Built for jQuery library
* http://jquery.com
*
*/
/*
* markup example for $("#slider").easySlider();
*
* <div id="slider">
* <ul>
* <li><img src="images/01.jpg" alt="" /></li>
* <li><img src="images/02.jpg" alt="" /></li>
* <li><img src="images/03.jpg" alt="" /></li>
* <li><img src="images/04.jpg" alt="" /></li>
* <li><img src="images/05.jpg" alt="" /></li>
* </ul>
* </div>
*
*/
(function ($) {
$.fn.easySlider = function (options) {
// default configuration properties
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next',
controlsShow: true,
controlsBefore: '',
controlsAfter: '',
controlsFade: true,
firstId: 'firstBtn',
firstText: 'First',
firstShow: false,
lastId: 'lastBtn',
lastText: 'Last',
lastShow: false,
vertical: false,
speed: 800,
auto: false,
pause: 2000,
continuous: false,
numeric: false,
numericId: 'controls'
};
var options = $.extend(defaults, options);
this.each(function () {
var obj = $(this);
var s = $("li", obj).length;
var w = $("li", obj).width();
var h = $("li", obj).height();
var clickable = true;
obj.width(w);
obj.height(h);
obj.css("overflow", "hidden");
var ts = s - 1;
var t = 0;
$("ul", obj).css('width', s * w);
if (options.continuous) {
$("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left", "-" + w + "px"));
$("ul", obj).append($("ul li:nth-child(2)", obj).clone());
$("ul", obj).css('width', (s + 1) * w);
};
if (!options.vertical) $("li", obj).css('float', 'left');
if (options.controlsShow) {
var html = options.controlsBefore;
if (options.numeric) {
html += '<ol id="' + options.numericId + '"></ol>';
} else {
};
html += options.controlsAfter;
$(obj).after(html);
};
if (options.numeric) {
for (var i = 0; i < s; i++) {
$(document.createElement("li"))
.attr('id', options.numericId + (i + 1))
.html('<a rel=' + i + ' href=\"javascript:void(0);\">' + (i + 1) + '</a>')
.appendTo($("#" + options.numericId))
.click(function () {
animate($("a", $(this)).attr('rel'), true);
});
};
} else {
$("a", "#" + options.nextId).click(function () {
animate("next", true);
});
$("a", "#" + options.prevId).click(function () {
animate("prev", true);
});
$("a", "#" + options.firstId).click(function () {
animate("first", true);
});
$("a", "#" + options.lastId).click(function () {
animate("last", true);
});
};
function setCurrent(i) {
i = parseInt(i) + 1;
$("li", "#" + options.numericId).removeClass("current");
$("li#" + options.numericId + i).addClass("current");
};
function adjust() {
if (t > ts) t = 0;
if (t < 0) t = ts;
if (!options.vertical) {
$("ul", obj).css("margin-left", (t * w * -1));
} else {
$("ul", obj).css("margin-left", (t * h * -1));
}
clickable = true;
if (options.numeric) setCurrent(t);
};
function animate(dir, clicked) {
if (clickable) {
clickable = false;
var ot = t;
switch (dir) {
case "next":
t = (ot >= ts) ? (options.continuous ? t + 1 : ts) : t + 1;
break;
case "prev":
t = (t <= 0) ? (options.continuous ? t - 1 : 0) : t - 1;
break;
case "first":
t = 0;
break;
case "last":
t = ts;
break;
default:
t = dir;
break;
};
var diff = Math.abs(ot - t);
var speed = diff * options.speed;
if (!options.vertical) {
p = (t * w * -1);
$("ul", obj).animate(
{ marginLeft: p },
{ queue: false, duration: speed, complete: adjust }
);
} else {
p = (t * h * -1);
$("ul", obj).animate(
{ marginTop: p },
{ queue: false, duration: speed, complete: adjust }
);
};
if (!options.continuous && options.controlsFade) {
if (t == ts) {
$("a", "#" + options.nextId).hide();
$("a", "#" + options.lastId).hide();
} else {
$("a", "#" + options.nextId).show();
$("a", "#" + options.lastId).show();
};
if (t == 0) {
$("a", "#" + options.prevId).hide();
$("a", "#" + options.firstId).hide();
} else {
$("a", "#" + options.prevId).show();
$("a", "#" + options.firstId).show();
};
};
if (clicked) clearTimeout(timeout);
if (options.auto && dir == "next" && !clicked) {
;
timeout = setTimeout(function () {
animate("next", false);
}, diff * options.speed + options.pause);
};
};
};
// init
var timeout;
if (options.auto) {
;
timeout = setTimeout(function () {
animate("next", false);
}, options.pause);
};
if (options.numeric) setCurrent(0);
if (!options.continuous && options.controlsFade) {
$("a", "#" + options.prevId).hide();
$("a", "#" + options.firstId).hide();
};
});
};
})(jQuery);
Raw
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Psychology</title>
<!--[if IE]><![endif]-->
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1"><![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Psychology" />
<meta name="keywords" content="Psychology" />
<meta name="copyright" content="2011 University Bound" />
<meta name="author" content="Transhuman Creative" />
<meta name="Rating" content="General" />
<meta name="Robots" content="INDEX,FOLLOW" />
<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" />
<meta name="Revisit-after" content="15 Days" />
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="css/master.css">
<link rel="stylesheet" href="css/style.css?v=1.0">
</head>
<body>
<div class="wrap">
<div id="header" class="ir">Unlock the Mysteries of the Mind.</div>
<div id="main">
<div class="copy">
<h2>Learn Psychology Online</h2>
<p>Interested in a career in psychology or counseling? It’s time to think about the education you’ll need to qualify for the job you want. </p>
<p>Psychology professionals work in a number of different fields, studying and analyzing the mind and human behavior. The work can be interesting and challenging—but these careers can be out of reach without the right education.</p>
<p>Pursuing a degree online could help you begin or advance your career in psychology or counseling, at your convenience. Register now to receive free course information and get started!</p>
<p class="copyright">Copyright &copy; 2011 University Bound. <a href="http://www.university-bound.com/terms/use.aspx">Terms</a> | <a href="http://www.university-bound.com/terms/privacy.aspx">Privacy</a>
</div>
<div class="form">
<p style=" margin-left: .75em;">Register now to receive <strong>FREE</strong> course information</strong>.</p>
<form method="GET" action="index2.html">
<div id="slider"style="position:absolute">
<ul>
<li>
<label>First Name</label>
<div class="txt-group">
<input type="text" name="NameFirst" />
</div>
<label>Last Name</label>
<div class="txt-group">
<input type="text" name="NameLast" />
</div>
<label>Email</label>
<div class="txt-group">
<input type="text" name="EmailAddress" />
</div>
<label>Street Address</label>
<div class="txt-group">
<input type="text" name="AddressLine1" />
</div>
<label>ZIP Code</label>
<div class="txt-group">
<input type="text" name="AddressZip" maxlength="5" />
</div>
<span class= "nextBtn" id="nextBtn"><a href="javascript:void(0);">Next</a></span>
</li>
<li>
<label>City</label>
<div class="txt-group">
<input type="text" name="AddressCity"/>
</div>
<label>State</label>
<div class="txt-group">
<select id="AddressState" class="validate[required]" name="AddressState">
<option value="0"></option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
<label>Phone Number</label>
<div class="txt-group">
<input type="text" name="HomePhone" maxlength="12"/>
</div>
<label>Education Completed</label>
<div class="txt-group">
<select name="EDUComplete">
<option value="0"></option>
<option value="GED">GED</option>
<option value="HS">High School Diploma</option>
<option value="SCL">Some College</option>
<option value="ADG">Associate's Degree</option>
<option value="BDG">Bachelor's Degree</option>
<option value="MDG">Master's Degree</option>
<option value="DOC">Doctorate</option>
</select>
</div>
<label>HS Grad Year</label>
<div class="txt-group">
<select name="HSGradYear" class="required"/>
<option value="0"></option>
<option value='2011'>2011</option>
<option value='2010'>2010</option>
<option value='2009'>2009</option>
<option value='2008'>2008</option>
<option value='2007'>2007</option>
<option value='2006'>2006</option>
<option value='2005'>2005</option>
<option value='2004'>2004</option>
<option value='2003'>2003</option>
<option value='2002'>2002</option>
<option value='2001'>2001</option>
<option value='2000'>2000</option>
<option value='1999'>1999</option>
<option value='1998'>1998</option>
<option value='1997'>1997</option>
<option value='1996'>1996</option>
<option value='1995'>1995</option>
<option value='1994'>1994</option>
<option value='1993'>1993</option>
<option value='1992'>1992</option>
<option value='1991'>1991</option>
<option value='1990'>1990</option>
<option value='1989'>1989</option>
<option value='1988'>1988</option>
<option value='1987'>1987</option>
<option value='1986'>1986</option>
<option value='1985'>1985</option>
<option value='1984'>1984</option>
<option value='1983'>1983</option>
<option value='1982'>1982</option>
<option value='1981'>1981</option>
<option value='1980'>1980</option>
<option value='1979'>1979</option>
<option value='1978'>1978</option>
<option value='1977'>1977</option>
<option value='1976'>1976</option>
<option value='1975'>1975</option>
<option value='1974'>1974</option>
<option value='1973'>1973</option>
<option value='1972'>1972</option>
<option value='1971'>1971</option>
<option value='1970'>1970</option>
</select>
</div>
<label>Military</label>
<div class="txt-group">
<select name="MilitaryStatus">
<option value="0"></option>
<option value="No">No</option>
<option value="yes">Yes</option>
</select>
</div>
<button class="submit" type="submit"></button>
</li>
</ul>
</div>
<input type="hidden" name="AreaOfInterest" value="Psychology" />
</form>
</div>
</div><!-- END #main -->
</div><!-- END #wrap -->
<script type="text/javascript" src="/JScript/Drew-Loader.js"></script>
<!-- Adbuyer.com Landing Pixel for UniBound ,Remarketing - Abandoner-->
<script type="text/javascript">
var SWJsHost = (("https:" == document.location.protocol) ? "https://" : "http://");
document.write(unescape("%3Cscript src='" + SWJsHost + "pixel.adbuyer.com/landing?id=7835' type='text/javascript'%3E%3C/script%3E"));
</script>
<noscript>
<img height='1' width='1' alt='' src='http://pixel.adbuyer.com/landing?id=7835&noscript=1'/>
</noscript>
<!-- Analytics -->
<script>
var _gaq = [['_setAccount', 'UA-16135990-13'], ['_trackPageview']];
(function (d, t) {
var g = d.createElement(t), s = d.getElementsByTagName(t)[0];
g.async = true; g.src = '//www.google-analytics.com/ga.js'; s.parentNode.insertBefore(g, s);
})(document, 'script');
</script>
<!-- /Analytics -->
<script type="text/javascript">
$('Document').ready(function () {
if (urlParams["AddressZip"] != undefined) {
$('input[name=AddressZip]').siblings("label").hide();
$('input[name=AddressZip]').val(urlParams["AddressZip"]);
}
});
</script>
<script type="text/javascript">
if (urlParams['vguid'] === "A3705DD6-2119-45D3-A667-9A5D58FA583F") {
document.write("<iframe width='1' height='1' frameborder='0' src='http://affiliate.adiclicks.com/rd/ipx.php?sid=5475&transid="+ Math.random() * Math.random() + " '></iframe>");
}
</script>
<!--easySlider-->
<script type="text/javascript" src="js/easySlider1.7.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#slider').easySlider({
continuous: true
});
});
</script>
<!--end easySlider-->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment