WordPress template with jQuery flippage | Just my blog

/dev/random

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.




  • Social

  • By continuing to use the site, you agree to the use of cookies. more information

    The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible and enable advertising to provide you free content. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

    Close