Scalable Photo Gallery

Scalable Photo Gallery

Hello,

I created my previous portfolio site entirely in AS3. You can see it here http://www.ryanwhittierhale.com/. I've decided to ditch Flash and remake my site using jQuery. Right now I have a mock up, but I'm running into problems with the scalable photo gallery. So far it scales correctly, but I can't figure out how to create a click through gallery. Ideally I would like to add Next and Previous buttons on the page to navigate the gallery.



Is there some way I could do something like??
  1. <img src= "img/"+img#+".jpg" width=img.width height=img.height /></p>
  2. onclick, img# = = "img#+1



Here is the image scaling script
  2. (function($) {
  3. $.fn.imagefit = function(options) {
  4. var fit = {
  5. all : function(imgs){
  6. imgs.each(function(){
  7. fit.one(this);
  8. })
  9. },
  10. one : function(img){
  11. $(img)
  12. .width('100%').each(function()
  13. {
  14. $(this).height(Math.round(
  15. $(this).attr('startheight')*($(this).width()/$(this).attr('startwidth')))
  16. );
  17. })
  18. }
  19. };
  21. this.each(function(){
  22. var container = this;
  24. // store list of contained images (excluding those in tables)
  25. var imgs = $('img', container).not($("table img"));
  27. // store initial dimensions on each image 
  28. imgs.each(function(){
  29. $(this).attr('startwidth', $(this).width())
  30. .attr('startheight', $(this).height())
  31. .css('max-width', $(this).attr('startwidth')+"px");
  33. fit.one(this);
  34. });
  35. // Re-adjust when window width is changed
  36. $(window).bind('resize', function(){
  37. fit.all(imgs);
  38. });
  39. });
  40. return this;
  41. };
  42. })(jQuery);



Here is the HTML Code
  2. <head>
  3. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  4. <title>Ryan Whittier Hale</title>
  5. <style type="text/css">
  7. body {
  8. <!--overflow:hidden;-->
  10. background-image: url("bg.jpg");
  11.    background-repeat: no-repeat;
  13. font-family: verdana, sans;
  14. font-size: 75%;
  15. background-color: #fff;
  16. color: #000;
  17. padding: 0;
  18. margin: 0;
  19. }
  21. p {margin: 0em 0;}
  23. div > p {
  24. margin-top: 0;
  25. }
  27. div#one, div#two {
  28. margin: 0 1%;
  29. float: left;
  30. }
  31. #one {width: 112px}
  32. #two {width: 78%}
  33. div.head {
  34. padding: 1em 1%;
  35. }
  36. </style>
  38. <script type="text/javascript" src="jquery.js"></script>
  39. <script type="text/javascript" src="jquery.imagefit.js"></script>
  40. <script type='text/javascript' src='script/jquery.cycle.all.js'></script>
  41. <script type="text/javascript">
  42. $(window).load(function(){
  43. $('#two').imagefit();
  44. });
  45.  
  46. $(document).ready(function(){ 
  47. $('#s1').cycle({
  48. fx:'fade',
  49. speed:'2000', 
  50. timeout: 0, 
  51. next:'#next', prev:'#prev'});
  52. });

  54.  
  55. </script>
  58. </head>
  59. <body>
  60. <div class="head">

  62. <!--<h1>JavaScript to proportionally scale images to fit.</h1> -->

  64. </div>
  65. <div id="one">
  66. <p>
  67. <p>Ryan Whittier Hale
  68. <br>
  69. <br>
  70. <p>Scenery
  71. <p>Hallway Lurker
  72. <p>Poser
  73. <p>Collage
  74. <p>Video
  75. <br>
  76. <br>
  77. <p>News
  78. <p>Contact/ CV
  79. <p>Links
  80. </p>
  81. </div>

  83. <div id="two">
  84. <p><img src="http://farm5.static.flickr.com/4032/4397661280_2645b9e917_b.jpg" width="1024" height="752" /></p>
  85. <br>
  87. <p>Body Harvest - digital-c print mounted on plexiglas - 30"x22" - ed. 1-8
  88. <p>©2010 - This image is protected by Federal copyright law
  89. </p>
  90. </div>

  92. </body>
  93. </html>