Creative Use Of jQuery Cycle In Fancy Curved Layout

02 July 2009 ~ 8 Comments

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.

8 Responses to “Creative Use Of jQuery Cycle In Fancy Curved Layout”

  1. Elena 2 July 2009 at 10:33 am Permalink

    This is really cool. One question though. Do you have to upload the JQuery library to the website or is the link sufficient enough?

  2. Raymond Selda 2 July 2009 at 10:40 am Permalink

    Hi Elena,

    Thanks. You don’t need to upload jQuery to your server. Google will gladly serve it up for you :-) But you need to upload the jQuery Cycle plugin to your server.

  3. Elena 2 July 2009 at 11:36 am Permalink

    Thank you Raymond. I have this huge fear of Javascript. So, I always like to know what exactly a document is supposed to contain. I simply loved this tutorial.

  4. jaras 3 July 2009 at 12:37 pm Permalink

    Thanks for the information

  5. Utopie - Liverpool 3 July 2009 at 11:47 pm Permalink

    Final result looks interesting… interesting technique, thanks…

  6. Micha 8 July 2009 at 10:58 am Permalink

    Hello it’s me!!! the curve layout trouble girl :D thanks for the article i just recently finished the work but i’ve been having some trouble with the live view. maybe you wanna check the whole post here http://css-tricks.com/forums/viewtopic.php?f=2&t=3278.

    It’s kinda weird (and it the problem is no the curves ironic huh :S) it would be great that you stop by and give me some tips please. In the meantime i’m gonna try your method so a better layout.

  7. Alex Holsgrove 7 September 2009 at 4:01 pm Permalink

    You could have saved yourself the trouble of having to cut out the main images by simply making a curved header and footer image with a gif or png transparency, and overlaying them over the main content area.

    Just add a margin to the top and bottom of the main content area, and use a position absolute for th header / footer to sit them above the content.

    That way, you can easily change the main image and not have to worry about cutting out a transparent region each time.

    Hope that makes sense!

  8. gor 27 September 2009 at 8:32 am Permalink

    I am having trouble cos my slide show is stopping at the end and not continue running. what is the problem?


Leave a Reply