Creative Use Of jQuery Cycle In Fancy Curved Layout

This article is an effort to answer a layout question posted in CSS-Tricks’ forum. I decided to answer this because it’s also one of the layouts that I have not been accustomed to converting.

Micha posted a link to the layout that needs to be sliced. I checked it out and I really liked it. I’m not sure if Micha wanted the image to be animated but I decided to do just that by using the jQuery Cycle plugin.

Take a look at the final result if you’re interested.

I didn’t convert the said layout, instead I created a basic web site design layout in Photoshop with curves similar to the layout.

Photoshop Layout Design with Fancy Curves

The main thing that you should plan out is where to slice your layout. This is one of the reasons why I think it’s important for a web designer to know how to write HTML and CSS. Knowing HTML and CSS basics will help you to design a layout that can be easily sliced and converted to HTML. You can design a layout in Photoshop with a lot of different methods but the difference will show up when it’s time to slice the design.

Let’s slice the main background graphic.

Main Background Graphic

Then let’s slice up the images we need to cycle. I saved them as a .GIF but you can save them in .PNG if you like because we are after the transparency here.

Transparent image to be sliced

Now let’s see how easy it is to convert this into HTML and CSS

HTML Basic Markup

We only have the main container which will hold up the images and the content.

<body>
<div id="container">
	<div id="cycle">
		<img src="image1.gif" width="610" height="522" alt="description of image here" />
		<img src="image2.gif" width="610" height="522" alt="description of image here" />
		<img src="image3.gif" width="610" height="522" alt="description of image here" />
	</div>
	<div id="content">
		<h1>Welcome!</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lectus mauris, pretium sed viverra eu, luctus quis risus. Cras convallis euismod eros, eu varius magna condimentum scelerisque. Vivamus eu tellus justo. Nam urna nisl, aliquet vitae sollicitudin ut, feugiat non est.</p> 
		<p>Aliquam blandit tortor lectus. Cras at nisi consequat dolor suscipit venenatis eget ullamcorper eros. Vivamus nec purus nisi. Integer ut lorem risus, ac feugiat sem. Nam et massa enim, quis dictum purus. Proin tortor dui, laoreet at volutpat eu, pharetra elementum risus. </p>
	</div>
</div>
</body>

CSS Basic Styles

We apply a relative position to the container so we can absolutely position the images. Then we just float the content to the right and apply proper paddings on the side.

body {
	background:#eee2d2;
	font-size:12px;
	font-family:Arial;
}

p {
	line-height:18px;
}

#container {
	width:960px;
	height:697px;
	background:transparent url(containerbg.png) no-repeat;
	margin:0 auto;
	position:relative;
}

#cycle {
	width:610px;
	height:522px;
	float:left;
	position:absolute;
	top:99px;
}

#content {
	width:310px;
	float:right;
	padding:0 20px;
	position:relative;
	top:240px;
}

Calling and Initializing jQuery Cycle

Just put this inside the head section and you’ll be up and running.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery-cycle-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
   $('#cycle').cycle({ 
	    fx:    'fade', 
	    speed:  3000 
	 });
}); 
</script>

Conclusion

This is basically one quick way to deal with curves and I’m sure you can come up with a lot more creative and unique layouts. This article also shows how you can get creative with the jQuery Cycle plugin. I hope you get something out of this article and I would love to hear your thoughts. Thanks for checking this out.

jQuery Looped Slider Tutorial

Today we’re going to use Nathan Searles’ jQuery loopedSlider, a plugin made for jQuery that solves a simple problem, the looping of slide content. It was created to be easy to implement, smooth and most of all end the “content rewind” that most other content sliders suffer from.

This is going to be a quick and easy tutorial. You can just copy and paste the code and have yourself a looping slider in minutes. You can view a working demo and feel free to download the complete source files.

Markup

<!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" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>loopedSlider jQuery Plugin</title>
	
	<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="loopedslider.js" type="text/javascript" charset="utf-8"></script>
	
	<style type="text/css" media="screen">	

	</style>
</head>

<body>
<div id="loopedSlider">	
	<div class="container">
		<div class="slides">
			<div><img src="image-01.jpg" width="600" height="393" alt="First Image" /></div>
			<div><img src="image-02.jpg" width="600" height="393" alt="Second Image" /></div>
			<div><img src="image-03.jpg" width="600" height="393" alt="Third Image" /></div>
			<div><img src="image-04.jpg" width="600" height="393" alt="Fourth Image" /></div>
		</div>
	</div>
	<a href="#" class="previous">previous</a>
	<a href="#" class="next">next</a>
	<ul class="pagination">
		<li><a href="#">1</a></li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
		<li><a href="#">4</a></li>
	</ul>	
</div>
</body>
</html>

Styles (CSS)

/*
 * Required 
*/
.container { width:600px; height:393px; overflow:hidden; position:relative; cursor:pointer; }
.slides { position:absolute; top:0; left:0; }
.slides div { position:absolute; top:0; width:600px; display:none; }
/*
 * Optional
*/
#loopedSlider,#newsSlider { margin:0 auto; width:500px; position:relative; clear:both; }
ul.pagination { list-style:none; padding:0; margin:0; }
ul.pagination li  { float:left; }
ul.pagination li a { padding:2px 4px; }
ul.pagination li.active a { background:blue; color:white; }

Power Up The Slider

This time we’re going to initialize the plugin from the bottom section of our document in order to load our content first before the calling our plugin.

<script type="text/javascript" charset="utf-8">
	$(function(){
		$('#loopedSlider').loopedSlider();
	});
</script>
</body>
</html>

Autostart the slider:

<script type="text/javascript" charset="utf-8">
	$(function(){
		$('#loopedSlider').loopedSlider({
			autoStart: 3000
		});
	});
</script>
</body>
</html>

Initialize multiple sliders:

<script type="text/javascript" charset="utf-8">
	$(function(){
		$('#loopedSlider').loopedSlider({
			autoStart: 3000
		});
		$('#anotherSlider').loopedSlider({
			autoHeight: 400
		});
	});
</script>
</body>
</html>

View Demo for both autostart and multiple sliders

Conclusion

I really like the simplicity of this plugin and I think I’m going to use this in my future projects. How about you? Have you ever used jQuery loopedSlider before? What other jQuery sliders would you recommend? Thanks for reading.