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">
  jQuery.noConflict();
  $(function(){
    $("#gallery1").jFlip(600,300,{background:"transparent",cornersTop:false,scale:"fit"});
   })
</script>
<p>&nbsp;</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.