Tag: WordPress

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

<?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-&gt;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;
 }
 ?>