jQuery Updated Slider Gallery
So I love the concept of a Slider Gallery, but jqueryfordesigners.com slider gallery uses jquery-1.2.6 and is not comptable with jquery-1.4 or higher. This blog page shows you exactly how to build one with a working download and example.
I did not make it exaclty the same as jqueryfordesigners.com slider gallery, but if enough people Contact Me, I will change the sliding bar to have a custom graphic. I just figured the consept is the most important part of this exorcise.
Code Example:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JQuery Updated Slider Gallery Example</title>
<style type="text/css">
<!--
/*___ Reset ___*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, sup
{margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
/*___ Base ___*/
body, html{height:100%;}
body{margin:0;padding:0;font-family:arial, sans-serif;color:#646c6f;background:url(images/background.png)}
a img{border:none;}
/*___ Framework ___*/
#wrapper{width:585px;margin:0 auto;padding:35px 0 50px;}
.box{width:525px;padding:30px;float:left;background:#fff;-moz-border-radius:3px;border-radius:3px;}
h1{text-transform:capitalize;color:#afafaf;font-size:20px;margin-bottom:5px;} /*___ Green Button ___*/
a.green-button{background:transparent url(images/button-green-first.png) no-repeat scroll left bottom;color:#fff;float:left;font-size:15px!important;height:24px;padding:0 0 0 12px!important;text-decoration:none;}
a.green-button span{background:transparent url(images/button-green-end.png) no-repeat scroll right bottom;cursor:pointer;display:block;float:left;line-height:24px;padding-right:12px!important;}
a.green-button:hover{background-position:left top;}
a.green-button:hover span{background-position:right top;}
/* Ask An Expert */
.ask-header{height:136px;width:559px;position:relative;overflow:auto;margin:0 0 15px -17px;float:left;*overflow-y:hidden;}/* Height is controled in in Updated Slider Gallery in JS */
.ask-header .slider{padding:0 7px 0 7px;float:left;}/* Width is controled in Updated Slider Gallery in JS */
.ask-header .slider-container{width:136px;float:left;}
.ask-img{text-align:center;}
*.ask-container{text-align:center;}
.ask-header a.green-button{display:table;margin:5px auto;float:none;font-size:13px!important;*display:inline;*zoom:1;}
.ask-header a.green-button span{float:none;}
.ask-header a.green-button span label{position:relative;top:1px;cursor:pointer;}
-->
</style>
<script type="text/javascript" src="js/jquery-1.5.min.js"></script>
<script language="javascript">
$(document).ready(function() {
// Updated Slider Gallery
// Adds width per each slider-container
var slideContainers = $(".slider-container").length;
$(".slider").css({ "width": slideContainers * 136 });
// Controls margin placement of comment-container
if ((slideContainers < 5)) {
$(".ask-header").css("height", "120px");
}
else {
$(".ask-header").css("height", "136px");
}
});
</script>
</head>
<body>
<div id="wrapper">
<h1>Ask An Expert</h1>
<div class="box ask-an-expert">
<div class="ask-header">
<div class="slider">
<div class="slider-container">
<div class="ask-img">
<a href="#"><img src="images/physician.png" width="80" height="80" alt="physician" /></a>
</div><!-- /ask-img -->
<div class="ask-container">
<a href="#" class="green-button"><span><label>Ask a Physician</label></span></a>
</div><!-- / ask-container -->
</div><!-- /slider-container -->
<div class="slider-container">
<div class="ask-img">
<a href="#"><img src="images/nurse.png" width="80" height="80" alt="physician" /></a>
</div><!-- /ask-img -->
<div class="ask-container">
<a href="#" class="green-button"><span><label>Ask a Nurse</label></span></a>
</div><!-- / ask-container -->
</div><!-- /slider-container -->
<div class="slider-container">
<div class="ask-img">
<a href="#"><img src="images/therapist.png" width="80" height="80" alt="physician" /></a>
</div><!-- /ask-img -->
<div class="ask-container">
<a href="#" class="green-button"><span><label>Ask a Therapist</label></span></a>
</div><!-- / ask-container -->
</div><!-- /slider-container -->
<div class="slider-container">
<div class="ask-img">
<a href="#"><img src="images/nutritionist.png" width="80" height="80" alt="physician" /></a>
</div><!-- /ask-img -->
<div class="ask-container">
<a href="#" class="green-button"><span><label>Ask a Nutritionist</label></span></a>
</div><!-- / ask-container -->
</div><!-- /slider-container -->
<div class="slider-container">
<div class="ask-img">
<a href="#"><img src="images/expert.png" width="80" height="80" alt="physician" /></a>
</div><!-- /ask-img -->
<div class="ask-container">
<a href="#" class="green-button"><span><label>Ask a Expert</label></span></a>
</div><!-- / ask-container -->
</div><!-- /slider-container -->
</div><!-- /slider -->
</div><!-- /ask-header -->
</div><!-- /box -->
</div><!-- /wrapper -->
</body>
</html>
Explanation:
To begin, I am assuming that if you are reading this you have some decent understanding of CSS and Javascript, if you don’t you are welcome to contact me. To start off, I needed a slider that would give me a horizontal slider that would widen dynamically if more Divs were supplied. What I did not want is for that horizontal slider to give me a vertical slider "overflow style." Also, if you have seen some of my other blogs, I have added a liquid anchor button that expands based on the text placed within. Therefore, I’m not going to comment on "green-button." Lastly, I have made this code to be compliant with Safari, Firefox, IE7, IE8, and IE9. If you see "*" in the styles, it is a holly hack that is directed for IE7.
I’m not going to go into every container in the CSS and the HTML. I’m only going to talk about the important parts that make this thing work. To start off there is a parent Div container called "ask-header" with one child Div called "slider." Inside of "slider" are children Divs called "slider-container." The parent Div, ".ask-header," which has set the overflow to auto and in IE7 set the overflow-y to be hidden (this turns off the vertical slider).
The "slider" Div has no width assigned and it is there only there to hold the "slider-container" which has a "width:136px;." Once you place more than four Divs of "slider-container" inside the parent Div will break, and that is where the jQuery kicks in.
First we are going to make a variable called slideContainers: "var slideContainers = $(".slider-container").length;." This is saying every time the browser sees "slideContainers," it is going to look for the Divs with the class of ".slider-container" and look at how many there are of those Divs. Next ("$(".slider").css({ "width": slideContainers * 136 });") I want it to look at the parent Div called ".slider" and change its width based on how many "slideContainers" are times 136, which is the width of ".slider-container." This effectively makes "slider" have the magic width it needs dynamically to provide the horizontal slider.
The last section is not very consequential, you can keep it if you want. It just controls the height of the parent Div "ask-header." It compensates for the height of the appearing horizontal scroller which appears once you reach five children, "slideContainers < 5."