2010 June | WebSight Designs

Archive for June, 2010

SSL Certificates In Use Today Aren't All Valid

Tuesday, June 29th, 2010

E-Security Planet reports that SSL Certificates In Use Today Aren’t All Valid.

Posted in Updates | No Comments »

Table Sorting with jQuery tablesorter

Thursday, June 24th, 2010

jQuery tablersorter is a jQuery plugin that allows sorting columns in a table by their header.
(more…)

Posted in jQuery Tutorials, Tutorials, Web Design Tutorials | No Comments »

jQuery iTunes-like Content Slider

Wednesday, June 23rd, 2010

Update: Also check out the updated version of this script: Clickable jQuery iTunes-like Content Slider w/ Looping.

NetTuts has a great iTunes-like Content Slider tutorial that explains how to make a content slider in jQuery.

We’ve made a few modifications to their example:

Thumbnails are made by showing a smaller version of the same image using CSS, so an additional thumbnail graphic does not need to be created and so the user only has to load the graphic once.
Rounded corners were added using a PNG graphic overlay on top of the content slider.
We made a second version of the jQuery code to reverse the order of the content in the slider.

First we added the rounded corners and left the order in which it displays the content alone:
View The Demo

Then we created another version with the order in which it displays the content reversed:
View The Demo

Both examples use the following HTML markup & CSS:

<div id="gallery">
	<img src="images/slider/1.jpg" alt="" />
	<img src="images/slider/2.jpg" alt="" />
	<img src="images/slider/3.jpg" alt="" />
	<img src="images/slider/4.jpg" alt="" />
	<img src="images/slider/5.jpg" alt="" />
	<img src="images/slider/6.jpg" alt="" /></div>
 
 
<div id="thumbs">
	<img src="images/slider/1.jpg" alt="" />
	<img src="images/slider/2.jpg" alt="" />
	<img src="images/slider/3.jpg" alt="" />
	<img src="images/slider/4.jpg" alt="" />
	<img src="images/slider/5.jpg" alt="" />
	<img src="images/slider/6.jpg" alt="" /></div>

#gallery, #thumbs {
	float: left;
}
#gallery-overlay {
	background: transparent url('../images/home-slider-overlay.png');
	position: absolute;
	display: block;
	width: 800px;
	height: 300px;
	z-index: 200;
}
#gallery {
	width: 600px;
	height: 300px;
	overflow: hidden;
}
#gallery img {
	position: absolute;
	display: block;
}
#thumbs {
	width: 200px;
	height: 300px;
	overflow: hidden;
}
#thumbs img {
	width: 200px;
	height: 100px;
}
.clear {
	clear: both;
}

The upwards moving thumbnails example uses the following jQuery script:

$(document).ready(function() {
	var index = 0;
	var images = $("#gallery img");
	var thumbs = $("#thumbs img");
	var thumbsHeight = 100;
	thumbs.slice(0,3).clone().appendTo("#thumbs");
	for (i=0; i
&lt;(thumbs.length-1)){index+=1 ; }
		else {index=0}
		show (index);
	}
	function show(num) {
		images.fadeOut(400);
		$(".image-"+num).stop().fadeIn(400);
		var scrollPos = (num+1)*thumbsHeight;
		$("#thumbs").stop().animate({scrollTop: scrollPos}, 400);
	}
});

The downwards moving thumbnails example uses the following jQuery script:

$(document).ready(function() {
	var images = $("#gallery img");
	var thumbs = $("#thumbs img");
	var index = thumbs.length-1;
	var thumbsHeight = 100;
	thumbs.slice(thumbs.length-3,thumbs.length).clone().prependTo("#thumbs");
	for (i=0; i
&lt; thumbs.length &amp;&amp; index &gt; 0) {index -= 1 ; }
		else { index = thumbs.length-1 }
		show ( index );
	}
	function show(num) {
		images.fadeOut(400);
		$(".image-"+num).stop().fadeIn(400);
		var scrollPos = ( (num-1) * thumbsHeight ) + 100;
		$("#thumbs").stop().animate({scrollTop: scrollPos}, 400);
	}
});