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

The concept is:

  • We've page "Gallery" witch uses page template "Gallery-tpl", let say!

  • In page template "Gallery-tpl" I've one large image in header witch is Full-sized of first publish attachment!

  • some place in body I've < div > with unordered listing of all accessories

  • TUMBNAIL SIZE!

  • this list should be one row slider

  • And That I want when click pictures the large image in header to alter with FULL version of clicked on THUMBNAIL

  • I discovered about this publish Get Attachments to post ways to get first attachment and just how to obtain these!

    • I discovered a good way to replace images with jQuery.

    • i quickly attempted to mix all code together however it works just for one image

here's 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's more correct and profesional method of doing this and it'll work!

If someone might help me with this particular, please answer me!