attachment.php & flexslider—linking thumbnail to specific image WordPress
- SOLVED
Hi Everyone!
I am nearly there but need the help of the community to bring me home! I am linking from a "gallery overview" page (thumbnail grid) to a single, full-size image page (attachment.php) containing a slideshow. The user should then be able to use flexslider to scroll through the additional attached images. So far, this is all working correctly—in principle.
The problem is that clicking on any thumbnail brings the user to the FIRST image in the gallery, rather than the actual image represented by the thumbnail. My attachment.php code is as follows:
<div id="slider" class="slider">
<ul class="slides-init">
<?php
global $post;
$args = array(
'post_type' => 'attachment',
'numberposts' => -1,
'post_status' => null,
'post_parent' => $post->post_parent,
'order_by' => 'menu_order',
'order' => 'ASC'
);
$attachments = get_posts($args);
if ($attachments) {
foreach ($attachments as $attachment) {
echo '<li>';
echo wp_get_attachment_image($attachment->ID, 'large');
echo '</li>';
}
}
?>
</ul>
</div>
Any help would be greatly appreciated. Also, the test site can be found below (simply click on one of the thumbnails to see what I mean):
[[LINK href="http://www.adamprince.us/clients/mcnairevans/projects/confessions-for-a-son/"]]http://www.adamprince.us/clients/mcnairevans/projects/confessions-for-a-son/[[/LINK]]
Many thanks!!!
Answers (3)
timDesain Nanang answers:
for gallery view, you can use native wp gallery.
and
your attachment.php (or image.php) code for looping should be like this:
<?php while ( have_posts() ) : the_post(); ?>
<?php
$curr_id = get_the_ID(); // get the current attachment id
$start_id = 0;
$i = 0;
?>
<div id="slider" class="slider">
<ul class="slides-init">
<?php
global $post;
$args = array(
'post_type' => 'attachment',
'numberposts' => -1,
'post_status' => null,
'post_parent' => $post->post_parent,
'order_by' => 'menu_order',
'order' => 'ASC'
);
$attachments = get_posts($args);
if ($attachments) {
foreach ($attachments as $attachment) {
$att_id = $attachment->ID;
if($att_id==$curr_id) $start_id = $i; //comparing
$i++;
echo '<li>';
echo wp_get_attachment_image($att_id, 'large');
echo '</li>';
}
}
?>
</ul>
</div>
<?php endwhile; ?>
<script type="text/javascript">
var startAtNum = <?php echo $start_id;?>;
</script>
and you need add startAt property in flexslider (https://github.com/woothemes/FlexSlider/wiki/FlexSlider-Properties)
jQuery("#slider").addClass("flexslider");
jQuery("#slider ul.slides-init").addClass("slides");
jQuery('#slider').flexslider({
slideshow: false,
controlNav: false,
startAt: startAtNum, //addition
animation: "slide",
start: function(slider) {
slider.find('.current-slide').text(slider.currentSlide + 1);
slider.find('.total-slides').text(slider.count);
},
after: function(slider) {
slider.find('.current-slide').text(slider.currentSlide + 1);
slider.find('.total-slides').text(slider.count);
}
});
Kyle answers:
You'll need to pass a parameter in a query string to the attachment in the link with the index of the image clicked.
So for each image you should add something like ?img=1 then ?img=2 to the links to the attachment pages. You can do this add_query_arg(); and a counter like i++; or just manually of course.
Then on the attachment page, you need something to pull the argument and pass it to the flexslider with JS.
Kyle comments:
The script on the attachment would look something like this:
<script>
function getQueryParams(qs) {
qs = qs.split("+").join(" ");
var params = {},
tokens,
re = /[?&]?([^=]+)=([^&]*)/g;
while (tokens = re.exec(qs)) {
params[decodeURIComponent(tokens[1])]
= decodeURIComponent(tokens[2]);
}
return params;
}
var $_GET = getQueryParams(document.location.search);
var slideAt = (($_GET['img']) ? $_GET['img'] : 0);
$(".flexslider").flexslider({
startAt: slideAt
});
<script>
Kyle comments:
*correction, based on your html there this:
$(".flexslider").flexslider({
should be
$("#slider").flexslider({
Kyle comments:
If you are using the plugin, then you'll have to modify the existing arguments:
flexslider.vars.startAt= slideAt
Adam comments:
Thanks for the response Kyle!
I understand what do to as a concept, but my understanding of jquery is rather limited. Please bear with me.
So the code above would live somewhere on the attachments page? While this:
<blockquote>You can do this add_query_arg(); and a counter like i++; or just manually of course.</blockquote>
Would be implemented on the thumbnails page? If that is correct, I am having trouble understanding how to pass the counter to each of the images on the thumbnail/overview page. I cannot do it manually, because the images are being added dynamically using wordpress... Can you nudge me in the right direction? Thanks in advance!
Adam comments:
Thanks for the response Kyle!
I understand what do to as a concept, but my understanding of jquery is rather limited. Please bear with me.
So the code above would live somewhere on the attachments page? While this:
<blockquote>You can do this add_query_arg(); and a counter like i++; or just manually of course.</blockquote>
Would be implemented on the thumbnails page? If that is correct, I am having trouble understanding how to pass the counter to each of the images on the thumbnail/overview page. I cannot do it manually, because the images are being added dynamically using wordpress... Can you nudge me in the right direction? Thanks in advance!
Adam comments:
Also, if it helps, my code for that is generating the thumbnails/overview page is as follows:
<?php if ( have_posts() ) : while ( have_posts() ) : the_post();
$args = array(
'post_type' => 'attachment',
'numberposts' => -1,
'post_status' => null,
'post_parent' => $post->ID,
'order' => 'ASC'
);
$attachments = get_posts( $args );
if ( $attachments ) {
foreach ( $attachments as $attachment ) {
echo '<div class="thumbnail">';
echo wp_get_attachment_link( $attachment->ID, 'small' , true, true, '' );
echo '</div>';
}
}
endwhile; endif; ?>
Kyle comments:
No problem, I'm happy to walk you through each. Yes, you should break up wp_get_attachment_link() so that you can change it manually. Give me a second to write something.
Kyle comments:
Try this:
$count = 0;
foreach ($attachments as $attachment) {
$link = wp_get_attachment_url($attachment->ID);
$link = add_query_arg('img',$count,$link);
echo '<div class="thumbnail">';
echo '<a href="'.$link.'" >';
echo wp_get_attachment_image( $attachment->ID, 'small' );
echo '</a>';
echo '</div>';
$count++;
}
Adam comments:
That is awesome, isofar as it is adding the count to each image, however the links now simply take me to the full image (wp-content/uploads...) rather than the attachments.php template. :(
Sorry, wish I could do more troubleshooting myself... Thoughts?
Kyle comments:
I'm not seeing the urls change on this page http://www.adamprince.us/clients/mcnairevans/projects/confessions-for-a-son/
Kyle comments:
Sorry long day, that was a careless error haha
Change
$link = wp_get_attachment_url($attachment->ID);
to
$link = get_permalink($attachment->ID);
Hariprasad Vijayan answers:
Hello,
Check this thread http://stackoverflow.com/questions/14673212/jquery-flexslider-link-to-specific-image