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">
jQuery.noConflict();
$(function(){
$("#gallery1").jFlip(600,300,{background:"transparent",cornersTop:false,scale:"fit"});
})
</script>
<p> </p>
<center>
<ul id="gallery1">
<?php foreach ( $images as $image ) : ?>
<li><img src="<?php echo $image->imageURL ?>" /></li>
<?php endforeach; ?>
</ul>
</center>
<?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.