need help for jquery gallery from wordpress attachments

Question

I want to create more specific jquery gallery for client's wordpress site!

The idea is:

We have page "Gallery" witch will use page template "Gallery-tpl", let say!
In page template "Gallery-tpl" I have one big image in header witch is FULL SIZE of first post attachment!
some where in body I have < div > with unordered list of all attachments
TUMBNAIL SIZE!
this list must be one row slider
And I want when click on thumbnails the big image in header to change with FULL version of clicked THUMBNAIL
I found on this post Get Attachments to post how to get first attachment and how to get all of them!
- I found one method to replace images with jQuery.
- then I tried to combine all code together but it works only for one image

here is my "Gallery-tpl"

    <?php
/**
Template Name: Gallery

original: http://www.rlmseo.com/blog/get-images-attached-to-post/
*/

function bdw_get_first_image() {

    // Get the post ID
    $iPostID = $post->ID;

    // Get images for this post
    $arrImages =& get_children('post_type=attachment&post_mime_type=image&post_parent=' . $iPostID );

    // If images exist for this page
    if($arrImages) {

       // Get array keys representing attached image numbers
       $arrKeys = array_keys($arrImages);

       /******BEGIN BUBBLE SORT BY MENU ORDER************/
       // Put all image objects into new array with standard numeric keys (new array only needed while we sort the keys)
       foreach($arrImages as $oImage) {
          $arrNewImages[] = $oImage;
       }

       // Bubble sort image object array by menu_order TODO: Turn this into std "sort-by" function in functions.php
       for($i = 0; $i < sizeof($arrNewImages) - 1; $i++) {
          for($j = 0; $j < sizeof($arrNewImages) - 1; $j++) {
             if((int)$arrNewImages[$j]->menu_order > (int)$arrNewImages[$j + 1]->menu_order) {
                $oTemp = $arrNewImages[$j];
                $arrNewImages[$j] = $arrNewImages[$j + 1];
                $arrNewImages[$j + 1] = $oTemp;
             }
          }
       }

       // Reset arrKeys array
       $arrKeys = array();

       // Replace arrKeys with newly sorted object ids
       foreach($arrNewImages as $oNewImage) {
          $arrKeys[] = $oNewImage->ID;
       }
       /******END BUBBLE SORT BY MENU ORDER**************/

       // Get the first image attachment
       $iNum = $arrKeys[0];

       // Get the thumbnail url for the attachment
       $sThumbUrl = wp_get_attachment_thumb_url($iNum);

       // UNCOMMENT THIS IF YOU WANT THE FULL SIZE IMAGE INSTEAD OF THE THUMBNAIL
       $sImageUrl = wp_get_attachment_url($iNum);

       // Build the <img> string
       $sImgString = '<a href="' .$sImageUrl . '" class="btw_fullimage">' .
                       '<img src="' . $sImageUrl . '" width="600" height="200" alt="Big Image" title="Big Image" />' .
                    '</a>';

       // Print the image
       echo $sImgString;
    }
}

function bdw_get_images() {

    // Get the post ID
    $iPostID = $post->ID;

    // Get images for this post
    $arrImages =& get_children('post_type=attachment&post_mime_type=image&post_parent=' . $iPostID );

    // If images exist for this page
    if($arrImages) {

       // Get array keys representing attached image numbers
       $arrKeys = array_keys($arrImages);

       /******BEGIN BUBBLE SORT BY MENU ORDER************/
       // Put all image objects into new array with standard numeric keys (new array only needed while we sort the keys)
       foreach($arrImages as $oImage) {
          $arrNewImages[] = $oImage;
       }

       // Bubble sort image object array by menu_order TODO: Turn this into std "sort-by" function in functions.php
       for($i = 0; $i < sizeof($arrNewImages) - 1; $i++) {
          for($j = 0; $j < sizeof($arrNewImages) - 1; $j++) {
             if((int)$arrNewImages[$j]->menu_order > (int)$arrNewImages[$j + 1]->menu_order) {
                $oTemp = $arrNewImages[$j];
                $arrNewImages[$j] = $arrNewImages[$j + 1];
                $arrNewImages[$j + 1] = $oTemp;
             }
          }
       }

       // Reset arrKeys array
       $arrKeys = array();

       // Replace arrKeys with newly sorted object ids
       foreach($arrNewImages as $oNewImage) {
          $arrKeys[] = $oNewImage->ID;
       }
       /******END BUBBLE SORT BY MENU ORDER**************/
       // izpolzvai do ili for
       echo '<ul id="btw_gallery">';
       for($i = 0; $i < sizeof($arrNewImages) - 1; $i++) {

           // Get the first image attachment
           $iNum = $arrKeys[$i];

           // Get the thumbnail url for the attachment
           $sThumbUrl = wp_get_attachment_thumb_url($iNum);

           // UNCOMMENT THIS IF YOU WANT THE FULL SIZE IMAGE INSTEAD OF THE THUMBNAIL
           $sImageUrl = wp_get_attachment_url($iNum);

           // Build the <img> string
           $sImgString = '<img src="' . $sThumbUrl . '" alt="Thumbnail Image" title="Thumbnail Image" class="btw_thumb" />';

           // Print the image
           echo '<li>'.$sImgString.'</li>';
       } 
       echo '</ul>';
       echo '
       <script>
        $("#btw_gallery li img").live("click", function() {
            $("a.btw_fullimage").attr("href", \''.$sImageUrl.'\').attr("title", this.title);
           $(".btw_fullimage img").attr("src", \''.$sImageUrl.'\').attr("alt", this.alt).attr("title", this.title);
        });
        </script>
       ';
    }
}

get_header(); ?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

        <div id="primary">
            <div id="content" role="main">

                <?php while ( have_posts() ) : the_post(); ?>

                    <?php bdw_get_first_image(); ?>

                    <?php get_template_part( 'content', 'page' ); ?>

                    <?php bdw_get_images(); ?>
                <?php endwhile; // end of the loop. ?>

                <hr />



            </div><!-- #content -->
        </div><!-- #primary -->


<?php get_footer(); ?>

I sure there is more correct and profesional way to do this and it will work!

If some one can help me with this, please answer me!

Hobo Hobo · Accepted Answer · 2011-12-21T13:42:22

The main issue is your script hard-coding the image URL in the javascript to the last image you referenced in the loop ($sImageUrl is set in your for loop). View the source of the generated page if you don't understand what I mean.

As a general approach, I'd get the image swapping logic working in a simple HTML page, then apply it to WordPress.

To specifics: I'd get rid of the bubble sort. It won't make a difference to your output, but it'll simplify your code. According to the codex for get_children, the arguments are the same as get_posts, which in turn uses WP_Query, which has the orderby and order parameters. That's assuming you want them sorted that way - I notice the bubble sort comes from the page you referenced.

WordPress comes with a copy of jQuery - by putting it in your template you may be unnecessarily including it twice, or worse, including two conflicting versions. Check out the wp_enqueue_script function and call it in the wp_enqueue_scripts action hook in your functions.php. Because it's aleady bundled with WordPress, wp_enqueue_script('jquery'); should be enough. As an aside, if you want to use the Google version (not a bad idea), you could use the Use Google Libraries plugin.

I'd retrieve the attachments once, and use the results in the two functions. You're having WordPress do more work that it needs to (possibly running two identical database queries).

I'd probably show the thumbnail for the displayed picture as well, if you can. It'll simplify the display logic (you won't have to swap the thumbnail of the old main picture into the position of the new one).

I've taken out the hard-coded widths and heights on the images (just for my testing). You could look at the wp_get_attachment_image_src function if you want to set them dynamically.

I'm no jQuery expert (no doubt there are better approaches than "onclick", which purists wouldn't put in the HTML), but the following works for me.

In functions.php:

add_action('wp_enqueue_scripts', 'so_enqueue_scripts');

function so_enqueue_scripts() {
    wp_enqueue_script('jquery');
}

and in your template file:

<?php
/**
 Template Name: Gallery

original: http://www.rlmseo.com/blog/get-images-attached-to-post/
*/

function so_get_attached_images($post_id) {
    return get_children( array(
        'post_type' => 'attachment',
        'post_mime_type' => 'image',
        'post_parent' => $post_id,
        'orderby' => 'menu_order',
        'order' => 'ASC'
    ) );
}

function so_show_first_image($image) {
    $sImageUrl = wp_get_attachment_url($image->ID);
    $sImgString = '<a href="'.$sImageUrl.'" class="btw_fullimage">'.'<img src="'.$sImageUrl.'" alt="Big Image" title="Big Image" />'.'</a>';
    echo $sImgString;
}


function so_show_thumbnails($images) {
    if (empty($images)) {
        return;
    }

    echo '<ul id="btw_gallery">';

    foreach($images as $image) {
        $sThumbUrl = wp_get_attachment_thumb_url($image->ID);
        $sImageUrl = wp_get_attachment_url($image->ID);

        $sImgString = '<a href="#" onclick="setImage(\''.$sImageUrl.'\'); return false;"><img src="'.$sThumbUrl.'" alt="Thumbnail Image" title="Thumbnail Image" class="btw_thumb"/></a>';

        echo '<li>'.$sImgString.'</li>';
    }

    echo '</ul>';

}

get_header();
?>
    <script>
        function setImage(sImageUrl) {
            jQuery("a.btw_fullimage").attr("href", sImageUrl ).attr("title", this.title);
            jQuery(".btw_fullimage img").attr("src", sImageUrl ).attr("alt", this.alt).attr("title", this.title);
        }
    </script>
    <div id="primary">
        <div id="content" role="main">
            <?php while (have_posts()) :
                the_post();
                $images = so_get_attached_images($post->ID);
                if (! empty($images)) {
                    $first_image = current($images); // first image from the array
                    so_show_first_image($first_image);
                }
                get_template_part('content', 'page');
                so_show_thumbnails($images);

             endwhile; // end of the loop. ?>
            <hr />
        </div><!-- #content -->
    </div><!-- #primary -->
<?php
get_footer();
?>

need help for jquery gallery from wordpress attachments

1 Answers