I'm trying to create the exact same behaviour as this Argentinian Photographer have done:

http://germansaezphoto.com/music/radiohead/

I've read and used the files in your tutorial: http://www.adobe.com/devnet/dreamweaver/articles/sliding_panel.html

and searched the forum but couldn't find an answer.

I'm almost there. The problem is that I have 6 test photos that are of the same height (and the same height as the slidingpanel view port) but different in width. If I set the class .SlidingPanelsContent to the same width as the largest picture(i.e. panel) then it creates a white space until the next pic starts. And If I set the width to the same as the smallest picture then it crops the other ones.

Here is the div in the index file:

<div class="SlidingPanels" id="panelwidget">
  <div class="SlidingPanelsContentGroup">
    <div class="SlidingPanelsContent" <img src="images/panel-2.jpg" width="645" height="430" /></div>
    <div class="SlidingPanelsContent" <img src="images/panel-1.jpg" width="594" height="430" /></div>
  <div class="SlidingPanelsContent" <img src="images/panel-3.jpg" width="645" height="430" /></div>
  <div class="SlidingPanelsContent" <img src="images/panel-4.jpg" width="645" height="430" /></div>
  <div class="SlidingPanelsContent" <img src="images/panel-5.jpg" width="645" height="430" /></div>
  <div class="SlidingPanelsContent" <img src="images/panel-6.jpg" width="594" height="430" /></div>
  </div>
  </div><br />
  <a href="#" onclick="sp1.showFirstPanel();">First Panel</a> | <a
    href="#" onclick="sp1.showPreviousPanel();">Previous Panel</a> | 
<a href="#" onclick="sp1.showNextPanel();">Next Panel</a> | <a href="#"
    onclick="sp1.showLastPanel();">Last Panel</a> 

  <script type="text/javascript">
var sp1 = new Spry.Widget.SlidingPanels("panelwidget");
</script>

And here is the classes in the css:

.SlidingPanels {
     position: relative;
     float: left;
     width: 1000px;
     height: 430px;
     padding: 0px;
     border: none;
}
.SlidingPanelsContentGroup {
     position: relative;
     float: left;
     width: 10000px;
     margin: 0px;
     padding: 0px;
     min-height:0;
     border: none;
}
.SlidingPanelsContent {
     width: 645px;
     height: 430px;
     float: left;
     overflow: hidden;
     margin: 0px;
     padding: 0px;
     border: none;
}

In the css file before the .SlidingPanelsContent class Adobe states that they in their default implementation has set the width to the same as the view port to ensure that only one panel at a time can be viewed within the view port. But I want the opposite.

How do I solve this?