Well here as promised at a WordPress.org support forum post and requested by Marc Serra the code to make a NextGen Gallery similar to sample 5 and as shown at www.ultimatefijivacations.com.
!This Code is not re-formatted for general use and might not be complete. Will try to rework the code some other time.
I created a folder with three essential files:
- gallery-resort-php
- style.css with styles including the ones for the gallery
- single-resort.php
Here the code for gallery-resort.php with the gallery code:
<?php/** Template Page for the adjusted gallery carousel Follow variables are useable : $gallery : Contain all about the gallery $images : Contain all images, path, title $pagination : Contain the pagination content $current : Contain the selected image $prev/$next : Contain link to the next/previous gallery page You can check the content when you insert the tag <!--?php var_dump($variable) ?--> If you would like to show the timestamp of the image ,you can use <!--?php echo $exif['created_timestamp'] ?--> **/ ?> <!--?php if (!defined ('ABSPATH')) die ('No direct access allowed'); ?--><!--?php if (!empty ($gallery)) : ?--></pre> <div class="ngg-galleryoverview"> <div id="resortpic"> <div id="picborder"> <div class="pic"><img title="<?php echo $current->alttext ?>" src="<?php echo $current->url; ?>" alt="<?php echo $current->alttext ?>" /> <div id="resort-info"></div> </div> </div> </div> <div id="ngglist"> <ul class="ngg-gallery-list"> <ul class="ngg-gallery-list"> <li class="ngg-prev"><a class="prev" href="<?php echo $prev ?>"><img src="<?php echo CHILDTEMPLATEIMAGES . '/resort-slider-previous.jpg' ; ?>" alt="" /></a></li> </ul> </ul> <ul class="ngg-gallery-list"> <ul class="ngg-gallery-list"> <li id="ngg-image-<?php echo $image->pid ?>" class="ngg-thumbnail-list <?php if ($image->pid == $current->pid) echo 'selected' ?>"> <a title="<?php echo $image->description ?>" href="<?php echo $image->pidlink ?>"> <img title="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" alt="<?php echo $image->alttext ?>" />size ?> /> </a></li> </ul> </ul> <ul class="ngg-gallery-list"> <ul class="ngg-gallery-list"> <li class="ngg-next"><a class="next" href="<?php echo $next ?>"><img src="<?php echo CHILDTEMPLATEIMAGES . '/resort-slider-next.jpg' ; ?>" alt="" /></a></li> </ul> </ul> </div> <div id="nggpanel"><!--?php if ($prev) : ?--> <a href="<?php echo $prev ?>"><img class="previmage" src="<?php echo CHILDTEMPLATEIMAGES . '/gallprev.gif' ; ?>" alt="" />PREVIOUS</a> <!--?php endif; ?--> | <!-- NEXT LINK --> <!--?php if ($next) : ?--> <a href="<?php echo $next ?>">NEXT</a> <img class="previmage" src="<?php echo CHILDTEMPLATEIMAGES . '/gallnext.gif' ; ?>" alt="" /> <!--?php endif; ?--></div> </div> <pre> <!--?php endif; ?-->
And here the gallery page CSS code
/* ################################## RESORT PAGE ################################## */ #resort-info { position:absolute; bottom:0; background:url('images/resort-desc-bar.png'); background-repeat:repeat-x; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; left:0; width:700px; height:44px; } #pic-caption{ } #pic-title { } .pic { position:relative; color:#69c5ff; } .ngg-gallery-list li img { width:110px; height:80px; } li.ngg-next, .ngg-next a.next, li.ngg-next a.next img { height:80px; width:15px; padding:0; } .ngg-gallery-list li.ngg-prev, .ngg-next a.prev, li.ngg-prev a.prev img { height:80px; width:15px; padding:0; } li.ngg-next a, li.ngg-prev a { padding:0; } #content ul, #content ol { padding:0 0 0 20px; } .ngg-gallery-list { margin: 10px 0 0 0; }
On single-resort.php I added the code to load the gallery:
<?php /* NG Gallery Custom Field Rotating Images */ $gallery = get_post_meta($post->ID, 'Gallery ID Number', true); $gal = $gallery; //$gal = 1; //REMOVE THIS JUST FOR TESTING if( !empty($gal) ) { $nggtemplate = "template=resort images=5"; $gal = apply_filters('the_content', '[nggallery id='.$gal.' ' . $nggtemplate. ']' ); echo $gal; } ?>
Thank you very much!