WordPress.org

1. atracksler
   Member
   Posted 3 months ago #

   I feel like this should be simple easy. But I cant figure it out.

   I have a theme which displays thumbnails of the latest posts.

   Each post has a gallery of images attached to it.

   I want to click the thumbnail and have the galley open in a lightbox.

   Please please help!!!!

2. Danny de Haan
   Member
   Posted 3 months ago #

   It's possible. You have to get the images attached to the post with:
   

   $args = array(
   	'post_type'      => 'attachment',
   	'post_parent'    => $post->ID,
   	'post_status'    => 'inherit',
   	'post_mime_type' => 'image',
   );

   Query them
   

   $attachments = new WP_Query( $args );
   $attachments->get_posts();
   
   $output = '';
   foreach( $attachments->posts as $attachment ) {
   	$image_src = wp_get_attachment_image_src( $attachment->ID, 'large');
   	$output .= '<a href="'. $image_src[0] .'" rel="lightbox[post-1]" class="hidden"></a>';
   }

   Where you have your featured image, you also link to the image src of the thumbnail:
   

   <?php
   $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' );
   ?>
   <a href="<?php $image[0]; ?>" rel="post-1">
   the_post_thumbnail( 'thumbnail-size');
   </a>

   Then you have to load the JavaScripts in your functions.php, take a look at wp_enqueue_script()

3. Danny de Haan
   Member
   Posted 3 months ago #

   " rel="post-1">
   should be
   " rel="lightbox[post-1]">

4. Danny de Haan
   Member
   Posted 3 months ago #

   Forgotten the backticks

   <a href="<?php $image[0]; ?>" rel="post-1">
   should be
   <a href="<?php $image[0]; ?>" rel="lightbox[post-1]">

5. atracksler
   Member
   Posted 3 months ago #

   sorry to be a pain in the neck...

   here is my loop

   <ul>
   <?php $posts = query_posts( $query_string . 'order=asc' ); ?>
   <?php if (have_posts()): while (have_posts()): the_post(); ?>
   <li><a href="<?php the_permalink() ?>"><?php the_post_thumbnail(); ?></a></li>
   <?php endwhile; endif; ?>
   </ul>

   I'm not sure where all the code you posted goes......

6. atracksler
   Member
   Posted 3 months ago #

   OK, I'm about halfway there!

   Here is my revised loop:

   [Code moderated as per the Forum Rules. Please use the pastebin]

   my output is :
   

   <a href="" rel="lightbox[post-1]">
   <img width="113" height="113" src="http://myserver.net/files/2012/02/rob_TN.jpg" class="attachment-thumbnail-size wp-post-image" alt="rob_TN" title="rob_TN" /></a>
   
   <a href="" rel="lightbox[post-1]">
   <img width="113" height="113" src="http://myserver.net.net/files/2012/02/nes_TN.jpg" class="attachment-thumbnail-size wp-post-image" alt="nes_TN" title="nes_TN" /></a>
   
   <a href="" rel="lightbox[post-1]">
   <img width="113" height="113" src="http://myserver.net.net/files/2012/02/1.gif" class="attachment-thumbnail-size wp-post-image" alt="1" title="1" /></a>

   How do i:
   -get it to actually return the URL of the image?
   - get the rel="lightbox[post-1]" to return the ID of the post, instead of 1?

7. atracksler
   Member
   Posted 3 months ago #

   http://pastebin.com/7j9eHRQs

Reply

You must log in to post.