Как запихнуть в Фотораму любой ХТМЛ

by Axelvaisper

HTML

<link rel="stylesheet" href="http://fotoramajs.com/fotorama/fotorama.css">
<script src="http://fotoramajs.com/fotorama/fotorama.js"></script>
<div id="fotorama">
    <a href="http://fotoramajs.com/;-)/03.jpg">
        <img src="http://fotoramajs.com/;-)/th/03.jpg">
    </a>
    <a href="http://fotoramajs.com/;-)/06.jpg">
        <img src="http://fotoramajs.com/;-)/th/06.jpg">
    </a>
    <a href="http://fotoramajs.com/;-)/05.jpg">
        <img src="http://fotoramajs.com/;-)/th/05.jpg">
    </a>
    <a href="http://fotoramajs.com/;-)/08.jpg">
        <img src="http://fotoramajs.com/;-)/th/08.jpg">
    </a>
    <a href="http://fotoramajs.com/;-)/07.jpg">
        <img src="http://fotoramajs.com/;-)/th/07.jpg">
    </a>
</div>

<div id="html" style="display: none;">
    <div class="b-slide" style="top: 10px; right: 45px; width: 35%;">
        <h2>Стиль</h2>
        <p>Cогласно традиционным представлениям, стиль редуцирует <em>латентный голос</em> персонажа</p>
    </div>
    <div class="b-slide b-slide_black" style="top: 10px; left: 45px; width: 35%;">
        <p>Кластерное вибрато:</p>
        <ol>
            <li>так или иначе многопланово;</li>
            <li>трансформирует литературный гармонический интервал;</li>
            <li>тем не менее узус никак не предполагал здесь родительного падежа.</li>
        </ol>
    </div>
    <div class="b-slide" style="bottom: 10px; left: 45px; width: 60%; background: rgb(0,0,0); background: rgba(0,0,0,.5); border-radius: 1em; padding: 1em;">
        <h2>Естественный катарсис</h2>
        <p>Моя экзистенциальная тоска выступает как <a href="http://ru.wikipedia.org/wiki/Мотив_(психология)" class="white">побудительный мотив</a> творчества</p>
    </div>
    <div class="b-slide" style="bottom: 30px; left: 50%; font-size: 1em;">
        <a style="background: rgb(255,0,0); border: 1px dashed #fff; border-radius: 1em; padding: .75em; text-decoration: none; color: #fff !important;"...

CSS

body { margin: 50px 10px; }

.b-slide { position: absolute; text-align: left; color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.75); font-family: Arial, sans-serif; font-size: .813em; }
.b-slide_black { color: #000; text-shadow: 0 1px 0 rgba(255,255,255,.75); }
.b-slide em { font-style: italic; }
.b-slide h2 { font-weight: bold; }
.b-slide ol li { list-style-type: decimal; }
.b-slide a { color: #0062ad; }
.b-slide a:hover { color: #f00; }
.b-slide a.white { color: #ddd; }
.b-slide a.white:hover { color: #fff; }

JavaScript

// Блоки с экстра-разметкой
var html = $('.b-slide', '#html');

$('#fotorama').fotorama({    
    width: '100%',
    height: 'auto',
    aspectRatio: 700/467,
    html: {
        0: html.eq(0),
        1: html.eq(2),
        2: html.eq(1),
        3: html.eq(3),
        4: html.eq(4)
    }
});