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 recently have had a few comments about the background image changer.
This post is for those who wish to do this on their blog etc.
The code is under a creative commons license (you need to keep in the comment by blah… etc)
—
– In this demo I will be using “-your image url-” as “http://img.wherever.com/image.jpg” etc. and ” /*-your color-*/ ” as a hex color code (can get those here http://www.colorschemer.com/online.html) which are preceded by a # and are 6 digits, color names can work also. (get rid of /*- and the */ when inserting your value, repace it with the other string.

The code:

In your blogger edit layout tab there is another tab that says edit html.
Put this code right before the in the blog html add :

background-color: /*-your defalt color here-*/ !important;
background-position: /*-possible values here are top, bottom, and center, left, right-*/ !important;
background-image: url(/*-your background url-*/) !important;
/*background code changer by JPN3 Consulting, (http://jpn3.blogspot.com/, http://jpn3.50webs.com/) /*


Then, create a module called HTML/Javascript:

In that paste this code (with your modifications) (if your want to make a different background link, just copy from the <a> to the </a> and paste, you’ll have another link. if you want a line break inbetween the links, insert <br /> inbetween the </a> and <a> tags.

<a href=”#” onclick=”document.body.style.backgroundImage = ‘url(/*-your background image url-*/)’;document.body.style.backgroundColor = ‘/*-background color-*/;”> /*-link text-*/</a> | <br />

<href=”#” onclick=”document.body.style.backgroundImage = ‘url(/*-your background image url-*/)’;document.body.style.backgroundColor = ‘/*-background color-*/;”> /*-link text 2-*/</a><!– code by JPN3 Consulting (http://jpn3.50webs.com/)(http://jpn3.blogspot.com/) –>