Сразу напишу ссылки на демку с одним спрайтом и с разными.
Пока без видяшки, нэта нет))
Способ подключения немного изменился, теперь в rel писать нельзя, ну его нах:
…
<body>
<img src="img/sample1.jpg" class="sample1" alt="" />
<img src="img/sample2.jpg" class="sample2" alt="" />
<img src="img/sample3.jpg" class="sample3" alt="" />
<img src="img/sample4.jpg" class="sample4" alt="" />
</body>
<script type="text/javascript">
$('.sample1').jMinis({
cols: 3,
rows: 3
});
…
</script>
…Основных стилей немного прибавилось, из-за новых плюшек:
.jminis_box { width:20px; height:20px; background:#000 url('img/miniload.gif') 50% 50% no-repeat; overflow:hidden; position:relative; }
.jminis_box div { position:absolute; top:0; right:0; bottom:0; left:0; visibility:hidden; }
.jminis_box a { background:url('img/ie.gif'); }
.jminis_img img { position:absolute; visibility:hidden; }
.jminis_nav.jminis_none { visibility:hidden; }
.jminis_nav.jminis_touch a { position:absolute; top:0; right:0; bottom:0; left:0; }
.jminis_nav.jminis_arrows { right:-22px; left:-22px; }
.jminis_nav.jminis_arrows a { width:19px; height:80px; background:url('img/mininav.png') -19px 0 no-repeat; margin-top:-40px; overflow:hidden; position:absolute; top:50%; left:0; }
.jminis_nav.jminis_arrows a:first-child { background-position:0 0; left:auto; right:0; }
.jminis_nav.jminis_horizontal a { float:left; height:100%; background-color:#fff; opacity:0; }
.jminis_nav.jminis_vertical a { float:left; width:100%; background-color:#000; opacity:0; }Дополнительных параметром тоже прибавилось:
$('.sample1').jMinis(
{ header : 80 // верхний отступ, у Media Player Classic по дефолту 80рх
, space : 10 // промежутки между кадрами, тоже по дефолту MPC
, cols : 4 // количество столбцов
, rows : 4 // количество строк
, zoom : 1 // размер кадра, 1 = 100%, честно - хрень какая-то))
, time : 100 // интервал для стиля hover
, style : 'arrows' // arrows|touch|vertical|horizontal|hover
});Коротко о стилях (в таком же порядке они в первой демке):
arrows - то же самое, что и в первой версии
touch - удобен для тач-устройств, весь элемент есть кнопка перехода на следующий кадр
vertical - разбивает элемент на вертикальные секции, при наведении на которые выбирается кадр
horizontal - так же, как и в предыдущем, только горизрнтально
hover - автоматом листает с заданным интервалом
Для vertical и horizontal цвет полоски можно задать в CSS.
Плюс остался тот же, минус решается с помощью параметра zoom, но качество оставляет желать лучшего.
