Что-то такое получилось.
<!DOCTYPE html>
<html>
<head>
<title>Fotorama example</title>
<script src="jquery.js"></script>
<link rel="stylesheet" href="fotorama.css">
<script src="../fotorama.js"></script>
</head>
<body>
<div id="fotorama-id-1" data-width="499" data-height="333"></div>
<div id="fotorama-id-2" data-width="499" data-height="333"></div>
<p><button id="foto-other-id">Show second slider</button></p>
<script>
var imglist_1 = [
{img: 'i/01.jpg', thumb: 'i/thumbs/01.jpg', caption: 'One'},
{img: 'i/02.jpg', thumb: 'i/thumbs/02.jpg', caption: 'Two'},
{img: 'i/03.jpg', thumb: 'i/thumbs/03.jpg', caption: 'Three'}
],
imglist_2 = [
{img: 'i/04.jpg', thumb: 'i/thumbs/04.jpg', caption: 'One'},
{img: 'i/05.jpg', thumb: 'i/thumbs/05.jpg', caption: 'Two'},
{img: 'i/06.jpg', thumb: 'i/thumbs/06.jpg', caption: 'Three'}
],
fotorama = $('#fotorama-id-1').fotorama({
data : imglist_1
});
$('#foto-other-id').on('click', function(){
fotorama.remove();
fotorama = $('#fotorama-id-2').fotorama({
data : imglist_2
});
$(this).attr('disabled', 'disabled');
});
</script>
</body>
</html>
Хтмлка и картинки из стандартного примера фоторамы