Display NextGen Custom Post Types under Larger Image WordPress
Hi All,
This is my site: http://goo.gl/Wh4D9 on this page I am using the nextgen gallery and the next gen custom field plugin as well, as you can see next to the thumbnails i've got the custom fields to appear, the issue is that i want the custom field which is a link to apper only when a thumbail is clicked and the link appears below the main image, like in the image http://imageshack.us/photo/my-images/40/caramanah.jpg/
<?php
/**
Template Page for the 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)) : ?>
<div class="ngg-galleryoverview">
<ul class="ngg-gallery-list">
<div class="pic">
<img title="<?php echo $current->alttext ?>" alt="<?php echo $current->alttext ?>" src="<?php echo $current->url; ?>" />
<div id="caption-link">
//my custom field
<?php echo nggcf_get_gallery_field($gallery->ID, "Download-Link"); ?>
</div>
</div>
<!-- Thumbnail list -->
<?php foreach ( $images as $image ) : ?>
<?php if ( $image->hidden ) continue; ?>
<li id="ngg-image-<?php echo $image->pid ?>" class="ngg-thumbnail-list <?php if ($image->pid == $current->pid) echo 'selected' ?>" >
<a href="<?php echo $image->pidlink ?>" title="<?php echo $image->description ?>" >
<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
</a>
<p class="floor-text"><?php echo $image->alttext ?><br />
<?php echo $image->description ?></p>
</li>
<?php endforeach; ?>
</ul>
</div>
</div>
<?php endif; ?>
Answers (3)
Jerson Baguio answers:
Try this one.
<li id="ngg-image-<?php echo $image->pid ?>" class="ngg-thumbnail-list <?php if ($image->pid == $current->pid) echo 'selected' ?>" >
<a href="<?php echo $image->pidlink ?>" title="<?php echo $image->description ?>" onclick="$(this).parent().next('p').show();">
<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
</a>
<p class="floor-text"><?php echo $image->alttext ?><br />
<?php echo $image->description ?></p>
</li>
Take note: i added onclick attribute on the above code:
onclick="$(this).parent().next('p').show();"
make sure also you add a display:none on style of your link so that it will hide by default.
like this
<p style="color:red;display:none;"><a href="http://www.yahoo.com/">http://www.yahoo.com</a></p>
Albert Shala comments:
Oops sorry I didn't see the reply link, none the less, this didn't work for me. I basically want to have the Download Floor Plan appear as it does (see previously attached pic), I have gotten custom post type to show up, but it shows up for the page, not for each individual image, which is what i want it to be.
Jerson Baguio comments:
Can you give me a test account for me able to access your admin part. For easier debugging
thanks
Mila Frerichs answers:
is there a link for each thumbnail or is it only one link for both?
if it is one link for both you only need some javascript.
do you use jquery or another js libary? that would make things easier.
if there should be different links for different floor which I guess you need a bit more code for that.
Christianto answers:
Hi Albert,
Please try my solution..
Add a link with class "floor-download-link" to your thumbnail list style it to display:none, and echo your next gallery custom field name on href attribute for example 'download-link, so the thumbnail list code will become:
<!-- Thumbnail list -->
<?php foreach ( $images as $image ) : ?>
<?php if ( $image->hidden ) continue; ?>
<li id="ngg-image-<?php echo $image->pid ?>" class="ngg-thumbnail-list <?php if ($image->pid == $current->pid) echo 'selected' ?>" >
<a href="<?php echo $image->pidlink ?>" title="<?php echo $image->description ?>" >
<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
</a>
<p class="floor-text">
<?php echo $image->alttext ?>
<br />
<?php echo $image->description ?>
</p>
<a class="floor-download-link" href="<?php echo $image->ngg_custom_fields["download-link"]; ?>" style="display:none">Download Floor Plan</a>
</li>
<?php endforeach; ?>
Put the placeholder for the link, I see in your site the placeholder will be..
<div id="bottom-img">
<p style="float:right;">
</p>
</div>
After that add this javascript to the template, since you use jquery
<script type="text/javascript">
jQuery(document).ready(function($){
var link = $('.ngg-thumbnail-list.selected .floor-download-link').clone();
link.css('display','');
$('#bottom-img p').empty().append(link);
});
</script>
Let me know if it works..
Thanks
Christianto