TXP, PrettyPhoto and Innerfade | Coding | the bombsite

You may have noticed that I am using a few image effects around the site these days. I’ve been using them a lot with some of the WP ports I’ve been doing lately which is how I came across PrettyPhoto and Innerfade.

PrettyPhoto can produce a light-box for your images. It can also handle a variety of video sources. You can see it in action with “Vimeo” here.

Innerfade can be used to produce a gallery as well as “fade” effects.

They are both very easy to set up using a separate script file to make the calls to each main script.

First thing to do was to upload all the script, css and image files then create a form to call them all to the page. jQuery is also required but as Txp comes complete with jQuery it is just a case of adding the call to the rest. Here’s a form template that I have called javascript:-

javascript form template

<script type="text/javascript" src="<txp:site_url />textpattern/jquery.js"></script>
<txp:if_section name="default,themes">
<script type="text/javascript" src="<txp:site_url />site-design/js/innerfade.js"></script>
<script type="text/javascript" src="<txp:site_url />site-design/js/prettyPhoto.js"></script>
<script type="text/javascript" src="<txp:site_url />site-design/js/scripts.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="<txp:site_url />site-design/prettyPhoto.css" />
</txp:if_section>

Note the <txp:if_section name="default,themes"></txp:if_section> tags. They ensure that these files are only called where they are required. The call to the jQuery script sits outside these tags because I use it for other things around the site.

The “javascript” form template is called to the page template just before the closing </body> tag with the usual <txp:output_form /> tag.

The scripts.js file is where I tell Innerfade and PrettyPhoto which elements to aim themselves at. This is what it contains:-

scripts.js file

jQuery(document).ready(function () {
	jQuery('.portfolio img').mouseover(function() {
		jQuery(this).stop().fadeTo(300, 0.5);
	});
	jQuery('.portfolio img').mouseout(function() {
		jQuery(this).stop().fadeTo(400, 1.0);
	});
});

// PrettyPhoto (lightbox)
jQuery(document).ready(function($){
	$("a[rel^='prettyPhoto']").prettyPhoto();
});

// Innerfade setup
jQuery(document).ready( function(){
	jQuery('.gallery').innerfade({
		animationtype: 'fade',
		speed: 'normal',
		timeout: 6000,
		type: 'random_start',
		containerheight: 'auto'
	});

});

The top block is telling jQuery to produce a fade-effect on images within a container with the class="portfolio" attribute. This is used for both the article_list and individual_article views in the “Themes” section.

The second block tells PrettyPhoto to do it’s thing on any <a> tag that has the rel="prettyPhoto" attribute. This is used for the individual_article view in the “Themes” section.

The third block tells Innerfade to look for images within a block that has a class="gallery" attribute. This block also sets up the parameters used by Innerfade. For animationtype you can use “fade” or “slide”, for speed you can have “slow”, “normal” or “fast”, timeout is the time in milliseconds between transitions and type is the type of slideshow you want and can be set to “sequence”, “random” or “random_start”. This is used for the gallery on the front-page.

That is pretty much all there is to it for the scripting but now you need to create your form templates. For the front-page gallery I have 2 forms – one for the HTML block and the article call, the other is the form used by the <txp:article_custom /> tag:-

HTML and Article Call form template

<div id="slider">
<div class="gallery">
<txp:article_custom section="themes" limit="9999" form="slider_article" />
</div>
</div>

Article Form Template

<div id="slider-image">
<txp:permlink><txp:article_image /></txp:permlink>
</div>

Then I just call the “HTML and Article Call” form template to the page template with the usual <txp:output_form /> tag. Simple enough methinks.

For the article_list view in the “Themes” section I am simply using the <txp:article_image /> tag. In individual_article view I am using one of the new image tags available in the SVN version of Txp. If you don’t use SVN you will be able to use the new tags when 4.3.0 is released otherwise you could use Mary’s upm_image plugin instead. Anyway here is the important bit:-

p(portfolio). <txp:image_list id="123"><txp:thumbnail link="1" link_rel="prettyPhoto" class="thumb" /></txp:image_list>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<txp:image_list id="234"><txp:thumbnail link="1" link_rel="prettyPhoto" class="thumb" /></txp:image_list>

This code is not a form. It is at the top of the article body for each “Theme” article (with different images of course).

That is it. I find these scripts very easy to install and get working plus I have a variety of options with regard to display such as fading or sliding, speed, lightbox with or without rounded corners, dark or light lightbox etc etc.

Why don’t you give them a go yourself?