Blog

Some of my thoughts on work and life
Latest Comments
15 Oct @ 03:38 AM
Jasper Frumau
Good to hear it all worked out!
9 Oct @ 04:00 AM
Guest
After submitting the form, there is a pdf file that is supposed to be written within the html2pdf/pdf directory? I don't see anything. I created the dir set permissions and resubmitted the form and still don't see the pdf. How is this supposed to work?
Get in Touch
NextGen Gallery Template Sample 5
1
Categories:
By Jasper ,
Last updated on Saturday 20 April 2013
Ultimate Fiji Vacations

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 reformatted 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;
		}
	?>
  • Marc Serra Fontfreda

    Thank you very much!