WordPress template with jQuery flippage

Recently I've been working on creating a template for WordPress for my brother in law's company. My brother in law is photographer so I had also had to implement albums/galleries using "jQuery jFlip". So I decided to use the "NextGEN Gallery" plugin for WordPress.

The benefit of NextGEN Gallery is that it allows you to add custom gallery templates to your WordPress template/theme by having in your theme-folder a nggallery folder and files named gallery-{template_name}.php.

To enable jQuery jFlip with NextGEN Gallery I had to do the following modifications:

Add to $TEMPLATE_PATH/header.php the following lines in the head section:

<!--[if IE]><script src="<?php bloginfo('template_url'); ?>/js/excanvasX.js" type="text/javascript"></script><![endif]-->
<script src="<?php bloginfo('template_url'); ?>/js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_url'); ?>/js/jquery.jflip-0.4.min.js" type="text/javascript"></script>

Make sure you put jquery-1.6.1.min.js and jquery-jflip-0.4.min.js and excanvasX.js (for IE support) in your template, or deep link to the developer sites.

And now create a NextGEN template $TEMPLATE_PATH/nggallery/gallery-flippage.php:

<?php if (!defined ('ABSPATH')) die ('No direct access allowed'); ?><?php if (!empty ($gallery)) : ?>
<script type="text/javascript">
<ul id="gallery1">
   <?php foreach ( $images as $image ) : ?>
     <li><img src="<?php echo $image->imageURL ?>" /></li>
    <?php endforeach; ?>
<?php endif; ?>

Please note the 'jQuery.noConflict()'... please make sure it's there other wise it will drive you crazy :-(

Now make sure the NextGen gallery plugin is active and make a page in WordPress with the following content:


[nggallery id=5 template=flippage]

 That's all :-)

And the results can be checked here.