Links: WordPress - Galleriffic - NextGen GalleryDownload nextgen-gallery/view/gallery.php
I've been using the following code on louisebaker.com.au. If you know how to create a wp theme this could help:
Basically what you have to do is to rewrite the output of the NextGen plugin.
create a page template in your theme (eg photo.php) and put galleriffic's code in:
<div id="gallery" class="">
<div id="controls" class="controls"></div>
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
</div>
don't forget to add the css & javascript links.
Then you need to edit wp-content/plugins/nextgen-gallery/view/gallery.php
find the <!-- Thumbnails --> section. This is where is the output code and replace it by
<div id="thumbs" class="navigation">
<ul class="thumbs noscript">
<!-- Thumbnails -->
<?php foreach ($images as $image) : ?>
<li>
<!--<div id="ngg-image-<?php echo $image->pid ?>" class="ngg-gallery-thumbnail-box" <?php echo $gallery->imagewidth ?> >
<div class="ngg-gallery-thumbnail" >-->
<a class="thumb" href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >
<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" width="78" height="78"<?php // echo $image->size ?> />
</a>
<!--</div>
</div>
<?php if ( $gallery->columns > 0 && ++$i % $gallery->columns == 0 ) { ?>
<br style="clear: both" />
<?php } ?>-->
</li>
All you need now is to call a gallery in a page [nggallery id=4]
thanks so much for sharing
ReplyDeleteNot that php savvy, so need a little more help
Can you give a full example of the photo.php file?
I was using similar instructions by Josh Mather http://joshmather.com/2010/04/19/using-the-nextgen-gallery-with-any-jquery-gallery-plugin/
Not getting either method to work yet
was using wp_enqueue_script in header to enable galleriffic and jquery
Is this the correct strategy with your method as well?
was adding this in post [nggallery id=1 template=photo] Do I need to call to nggallery custom template with your method?
Here is a basic example for a photo.php template.
ReplyDeleteTry to add manually your .js files without wp_enqueue_script. It looks to be a problem of relative/absolute path.
<?php
/*
Template Name: Photo Gallery
*/
get_header();
?>
<div id="container">
<div id="leftnav">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<div class="entry">
<?php the_content(); ?>
</div>
</div>
<?php endwhile; else: ?>
<?php endif; ?>
</div>
<div id="gallery">
<div id="controls" class="controls"></div>
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
<!--<div id="caption" class="embox"></div>-->
</div>
</div><!--end container-->
<?php get_footer(); ?>
Hi Ann did you manage to get it working? I am also in the same position as yourself. I tried the instructions on joshmather.com which have Huge holes in it. I am also having trouble with the above version of instructions.
ReplyDeleteDoes anyone have a link to instructions anywhere else on the web to how this can be done in a more detailed fashion?
Because of frequently updates, the best way should be not to overwrite nexgen's default output.
ReplyDeleteThis can be done by creating your personnal output template in your theme directory in the nggallery folder :
../yourtheme/nggallery/gallery-tpl1.php
then use the shortcode :
[ nggallery id=1 template=tpl1 ]
and you're done.