mobile image viewer

mobile image viewer

I've got a product page that has an image on it.  I'd like to be able to click that image and load alternate views of the product in some type of image viewer that is navigable with either <next> and <prev> buttons or via swipe.  Has anyone been working on something like this or can anyone help guide me in the right direction?  Ideally... I'd like the image to open in a dialog container that overlays the current page... but a separate page would probably be fine as well.  Here's what I've been working on but it's clunky and doesn't seem to work all the time (and orientation change doesn't work at all).

<!-- images.html -->
<div data-role="page" data-fullscreen="true" class="photoview">
   
    <div data-role="header">
        <h1>Title of image</h1>       
    </div>
   
    <div data-role="content" >       
        <img src="/path/to/image.jpg" alt="title of image"  />       
    </div>
   
    <div data-role="footer">
        <a href="images2.html" class="next">Next</a>
    </div>

</div>

<!-- accompanying js -->
// product page image script //
$('.photoview')
    .live('pagebeforehide',function(){
        $.fixedToolbars.hide(true);
    })
    .live('pageshow',function(){
        $.fixedToolbars.show();
    })
    .live('swipeleft',function(){
        $(this).find('a.next').click();
    })
    .live('swiperight',function(){
        $(this).next().find('a.prev').click();
    });

$('.photoview img').live('mousedown touchstart',function(event){
    event.preventDefault();
})   

<!-- minor css for photoview -->
.photoview .ui-content { padding: 0; }
.photoview img { width: 100%; padding-top:60px; }

Please let me know if there's an easier/better way to approach this image gallery effect in jqMobile.

Thanks