2010 July | WebSight Designs

Archive for July, 2010

WordPress Ends PHP 4 and MySQL 4 Support

Tuesday, July 27th, 2010

WordPress announces that as of version 3.2, WordPress will no longer support PHP 4 and MySQL 4.

Tags: blog, cms, content management, web design, wordpress
Posted in Updates | No Comments »

Hiring an Orlando SEO Company

Tuesday, July 27th, 2010

Are you considering hiring an Orlando SEO Company? Hiring an SEO company is an important decision and should be considered carefully. Using a company that lacks the proper expertise could make your search engine rankings even worse.

SmallBusinessComputing.com has a great article on How To Hire a Good SEO Expert where you can learn more.

Get a quote today to see what we can do to improve your SEO.

Posted in Updates | No Comments »

jQuery iTunes-like Content Slider Revisited

Monday, July 26th, 2010

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

In our previous tutorial, we showed you how to create an iTunes-like content slider. Today we will show you how to modify the content slider so clicking on one of the thumbnails loads the image in the main area.

View The Demo

We start with the following HTML markup:

<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">
	<a id="1" class="thumblink" onclick="return false;" href="#"><img src="images/slider/1.jpg" alt="" /></a>
	<a id="2" class="thumblink" onclick="return false;" href="#"><img src="images/slider/2.jpg" alt="" /></a>
	<a id="3" class="thumblink" onclick="return false;" href="#"><img src="images/slider/3.jpg" alt="" /></a>
	<a id="4" class="thumblink" onclick="return false;" href="#"><img src="images/slider/4.jpg" alt="" /></a>
	<a id="5" class="thumblink" onclick="return false;" href="#"><img src="images/slider/5.jpg" alt="" /></a>
	<a id="6" class="thumblink" onclick="return false;" href="#"><img src="images/slider/6.jpg" alt="" /></a>
</div>

And here’s the CSS styles:

#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 jQuery script:

$(document).ready(function() {
	$("a#1").click(function() { show(0); return false; });
	$("a#2").click(function() { show(1); return false; });
	$("a#3").click(function() { show(2); return false; });
	$("a#4").click(function() { show(3); return false; });
	$("a#5").click(function() { show(4); return false; });
	$("a#6").click(function() { show(5); return false; });
	var images = $("#gallery img");
	var thumbs = $("#thumbs img");
	var thumblinks = $("#thumbs a");
	var index = thumbs.length-1;
	var thumbsHeight = 100;
	thumblinks.slice(thumblinks.length-3,thumblinks.length).clone().attr('id', function() { var id = $(this).id; return 'b' + this.id}).prependTo("#thumbs");
	$("a#b4").click(function() { show(3); return false; });
	$("a#b5").click(function() { show(4); return false; });
	$("a#b6").click(function() { show(5); return false; });
	for (i=0; i
 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);
	}
});