Подключаем jQuery (при необходимости), стили fotorama.css, скрипт fotorama.js и добавляем фотографии в блок "fotorama".

Для улучшения производительности, желательно подготовить уменьшенные копии изображений и указать их:

<div class="fotorama" data-width="700" data-height="400">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>

<div class="fotorama" data-width="700" data-height="467">
<a href="http://youtube.com/watch?v=C3lWwBslWqg">Desert Rose</a>
<a href="http://vimeo.com/61527416">Celestial Dynamics</a>
</div>

Опции Фоторамы задаются через атрибуты data-optionName. Например, data-autoplay="true" — воспроизведение слайдшоу, data-fullscreenIcon="true" — показывает иконку входа в полноэкранный режим и т.д.

data-width="" default: auto
Ширина контейнера с изображениями в пикселях (например, width="700") или в процентах (width="100%").

data-height="" default: auto
Высота контейнера с изображениями в пикселях (height="467") или авто (height="auto").

data-aspectRatio="" default: auto
Соотношение сторон. Вычисляется делением ширины на высоту, например, у картинки 700?467 соотношение сторон равно 1.4989293362. Рекомендуется указывать aspectRatio, если ширина задана в процентах (data-aspectRatio="1.5").

data-minWidth="" default: auto
Минимальная ширина контейнера с изображениями в пикселях.

data-maxWidth="" default: auto
Максимальная ширина контейнера с изображениями в пикселях.

data-minHeight="" default: auto
Минимальная высота контейнера с изображениями в пикселях.

data-maxHeight="" default: auto
Максимальная высота контейнера с изображениями в пикселях.

data-background=""
Фон контейнера с изображениями. Переопределяет значение из CSS.

data-zoomToFit="" default: true
Растягивает изображения, если они меньше контейнера: да - (data-zoomToFit="true"), нет - (data-zoomToFit="false").

data-cropToFit="" default: false
Растягивает и обрезает изображения, чтобы они занимали всю площадь контейнера (data-cropToFit="true") (data-cropToFit="false").

data-cropToFitIfFullscreen="" default: false
Растягивает и обрезает изображения, чтобы они занимали всю площадь контейнера только в полноэкранном режиме.

data-nav="" default: thumbs
Стиль навигации. Превьюшки —'thumbs', точки —'dots', ничего —'none'.

data-navPosition="" default: bottom
Расположение блока навигации относительно изображений. В горизонтальном режиме возможны 'bottom' или 'top', в вертикальном — 'left' или 'right'.

data-navBackground="" default: null
Фон контейнера с превьюшками или точками. Переопределяет значение из CSS.

data-dotColor=""
Цвет точек. Переопределяет значение из CSS.

data-thumbBorderWidth="" default: 3
Толщина рамки активной превьюшки.

data-thumbBorderColor=""
Цвет рамки активной превьюшки. Переопределяет значение из CSS.

data-hideNavIfFullscreen="" default: false
Скрывает навигацию в полноэкранном режиме.

data-arrows="" default: true
Включает навигационные стрелки над фотографиями.

data-arrowsColor=""
Цвет стрелок. Переопределяет значение из CSS.

data-arrowPrev="" default: горизонтальный режим — <, вертикальный — ^
Cимвол или ХТМЛ для стрелки «назад».

data-arrowNext="" default: горизонтальный режим — >, вертикальный — Ў
Cимвол или ХТМЛ для стрелки «вперёд».

data-caption="" default: none
Отображение подписей (задаются через атрибут alt). Под Фоторамой — 'simple', над изображениями — 'overlay', без подписей — 'none'.

data-flexible="" default: false
Если data-flexible="true", Фоторама принимает размеры активного изображения при каждом переходе. По умолчанию, размер вашей Фоторамы — это размер первого изображения. Остальные картинки вписываются в заданные рамки, сохраняя пропорции. Чтобы зарезервировать место под галерею на странице до загрузки первого изображения, используйте опции width и height

data-fitToWindowHeight="" default: false
Уменьшает высоту Фоторамы, если она больше высоты окна браузера.

data-fitToWindowHeightMargin="" default: 20
Разница между высотой Фоторамы и окна браузера при активном режиме fitToWindowHeight.

data-fullscreen="" default: false
Полноэкранный режим Фоторамы при инициализации.

data-fullscreenIcon="" default: false
Показывает иконку входа в полноэкранный режим.

data-autoplay="" default: false
Воспроизведение слайд-шоу.

data-stopAutoplayOnAction="" default: true
Останавливает слайд-шоу после взаимодействия пользователя с Фоторамой.

data-vertical="" default: false
Вертикальная ориентация Фоторамы.

data-shadows="" default: true
Включает тени в интерфейсе.

data-hash="" default: false
Включает изменение УРЛ страницы при переходах между изображениями. Чтобы другу послать ссылку на конкретную фотографию :-) Рекомендуется использовать только с одной Фоторамой на странице.

Фоторама четвертой версии поддеживает jQuery 1.8 и выше, а также предоставляется бесплатно для любого использования при указании авторства.