There is however, something else that made this extra hard. I wanted to integrate it with the Jquery Fancybox plugin. To do required some extra code that didn’t make things simpler.

The basic code outline for using Fancybox for your images is this:

<a href="the url to the normal sized version of the image" title="The name of the image” class="zoom">
<img src="the url to thumbnail sizes version of the image" />
</a>

This presents some problems with integrating this into Wordpress. Here how I changed it to work with Wordpress posts.

<?php $postslist = get_posts('numberposts=3&order=ASC&orderby=title'); 
	foreach ($postslist as $post) : 
	setup_postdata($post); ?> 
	<div class="project">
		<a class="zoom" 
                      rel="group"
                      title="<?php the_title(); ?>"
                      href="wp-content/themes/starkers/style/images/<?php the_title(); ?>.png">
		<?php the_content(); ?>
	        </a>
	<h4><?php the_title(); ?></h4> 
	</div>			
<?php endforeach; ?>

The first 4 lines are the php that grab the posts. (Note I set it to show the 3 latest posts.)
In the 5th line I enclose each post in a div with an id of “project”.
In the 6th line, there are the basic Fancybox classes that make it work in this particular image.
On the 7th line, I set the name of the image to the title of the post
On the 8th line, I set the url of the normal sized version of the image, in this case it was an image in the theme’s image folder. Notice how I used “the_title();” in the url to make it dynamic for each post.
On the 9th line I just set it to grab the content of the post
10th line-closing out the link
On the 11th line I grab the title of the post
And then close the div and end the foreach statement.

There is one thing you have to do manually to make this work. Set a unique category for the posts to be used here. In this case I used the category “1″

Also, the body of the post must only have the small version of the image in it.

Pretty cool, heh?

I’ve always liked computers, websites, and have recently started getting into PHP after learning xHTML and CSS.

Throughout this process, I’ve discovered lots of great resources and learned lots of great things.

Some of these are there is always something to learn or do. This stuff fascinates me.

If you are interested in learning more about (x)HTML (to get your feet wet ), visit my favorite tutorial for getting started in (x)HTML (and no, it isn’t HTML for dummies) — http://htmldog.com. There, just thumb through the tutorials, do the exercises (if you wish).

Once you’ve done that, I’d recommend looking further at W3Schools and Tizag.com, both are more indepth, but they can help you find out how to do something and supplement what you’ve already done.

Then, consider reading the nettuts.com (great all-around tutorial website) and CSS Newbie (css help and interesting tutorials) and AlistApart.com (slightly more technical, but great archives, pioneering techniques).

Phew! Some fun stuff to look at for learning javascript, go to W3Schools’s tutorial and Tizag Tutorials. Then, look at jquery.com or another javascript framework, like Prototype Javascript. A good resource for jquery is http://jqueryfordesigners.com/.

And, some good PHP tutorials can be found in this article, I’ll get to more in depth ones later. — Nettuts PHP from Scratch.

If you still want links look at this article (which probably includes the kitchen sink ) – blog.themeforest.net.

If you have any questions, feel free to leave a comment, and I’ll consider writing a tutorial or just emailing you if you need help.

When things quiet down around here, I’ll start writing my own tutorials here.

Good luck!