Here's my attempt:  http://www.lalbero.it/opt1/atelier.html

My pictures are both portrait and landscape. To center them horizontally I learned I needed this markup

1. <div id="photos">
   <div><img src="pic1.jpg" alt="pic1" /></div>
   <div><img src="pic2.jpg" alt="pic2" /></div>
   ...
   </div>

and this styling

1. #photos div {
   width: 605px; 
   height: 460px;
   }
   #photos div img {
   margin: auto;
   display: block;
   }

I think I need to set shuffle transition left property so that it changes depending on current and next picture dimensions.

With my recent and little knwoledge of jQuery and ability to handle advanced selectors I even wrote a function but it seems it is executed only once. 

Last attempt was to place the call in an 'after' option. My function is called again but values are still the same, based on first two pictures.

1. $('#photos').cycle({
       fx: 'shuffle',
   speedIn: 1000,
   speedOut: 1500,
   // after: move(),
   timeout: 5000,
   shuffle: { top:-75, left: -move()},
   pager: '#nav'
     });
   
   
     
     function move() {
      var current_pic = $('#photos > div > img').width();
   var container = $('#photos div').width();
   var next_pic = $('#photos div').next().width();
   var movement= (cont+current_pic/2)  - (cont - next_pic/2);
   alert('move by '+movement);
   return movement;
   }

Now I'd really need help or another solution but I cannot find anything related to my problem. Thank you for sharing your knowledge.