My goal is to create a flickr slideshow gallery, but in more of a filmstrip form, that slides forward and backwards. Also using some descriptions under each photo. The idea is to create something that the client can interact with the Flickr Interface on the backend, but simultaneously be updating the homepage of their website.

The website is built with WordPress, so I can use phpFlickr to grab a photoset or a specific user's photos. I've done that within the main page of the site with the following code:

2. <div  id="slider" class="clear-block"><div id="slider-inner"> 
3. <?php
4. require_once("scripts/phpFlickr.php");
5. // Create new phpFlickr object
6. $f = new phpFlickr("7b0f2d2463bc56d47253a317db29e512");
7.  
8. $i = 0;
10. // Find the NSID of the username inputted via the form
11.    $person = $f->people_findByUsername(gregmihalko);
12.  
13.    // Get the friendly URL of the user's photos
14.    $photos_url = $f->urls_getUserPhotos($person['id']);
15.  
16.    // Get the user's first 36 public photos
17.    $photos = $f->people_getPublicPhotos($person['id'], NULL, NULL, 36);
18.  
19.    // Loop through the photos and output the html
20.    foreach ((array)$photos['photos']['photo'] as $photo) {
21.        //echo "<a href=$photos_url$photo[id]>";
22.        echo "<div class='image-node'><div class='image-img'><img border='0' class='imagefield imagefield-field_image_large' alt='$photo[title]' ".
23.            "src=" . $f->buildPhotoURL($photo, "Small") . ">";
24.        echo "</div></div>";
25.        $i++;
26.        // If it reaches the sixth photo, insert a line break
27.        if ($i % 6 == 0) {
28.            echo "<br>\n";
29.        }
30.    }
32. ?>
33.  </div>  </div>  </div>
34.  
35.  <div id="slider-nav"><a href="javascript:void(0);" onclick="prev();" class="prev-image">&laquo; prev</a> | <a href="javascript:void(0);" onclick="next();" class="next-image">next &raquo;</a></div><div id="slider-caption-wrapper"><div id="slider-caption"></div></div>

The header is pulling in the following files (attached):

2. <script type="text/javascript" src="test/scripts/jquery.js"></script>
3. <script type="text/javascript" src="test/scripts/compat.js"></script>
4. <script type="text/javascript" src="test/scripts/slider.js"></script>

Slider.js should be doing all of the work for me and I've tagged the divs and images correctly in the generated code.... (slider.js file below):

2. var imgs;
3. var totalWidth = 0;
4. var index = 0;
5. var count = 0;
6. var margin = 10;
7. var leftEdge = 0;
8.       $(document).ready(function() {
9. var height = 0;
10. imgs = $('#slider img');
11. $(imgs).each(function(i){
12. $(this).parents(".image-node").css({'width':parseInt(this.width)});
13. });
14. count = imgs.length;
15. slide();
16. })
18. function next(){
19. $("#slider-caption").hide();
20. if(index >= count-1){
21. index = 0;
22. leftEdge = 0;
23. slide();
24. return true;
25. };
26. leftEdge -= parseInt(imgs[index].width)+margin;
27. index++;
28. slide();
29. return true;
30. }
31. function prev(){
32. $("#slider-caption").hide();
33. if(index <= 0){
34. index = 0;
35. return true;
36. }
37. index--;
38. leftEdge += parseInt(imgs[index].width)+margin;
39. slide();
40. return true;
41. }
43. function slide(){
44. var text = $(imgs[index]).parents(".image-node").children(".image-teaser").html();
45. $("#slider-caption").css({'width':parseInt(imgs[index].width)});
46. $("#slider-caption").html(text); 
47. $('#slider-inner').animate({'left':leftEdge+245});
48. $("#slider-caption").fadeIn("slow");
49. }

Visit http://communities-rising.org/test  to see where I have gotten on it and maybe that will show you sort of what I'm going for. Any help is much appreciated and would be credited on the site if you can get it to work properly.