Слайд и fokuspoint изображения
Всем привет!
Нужна помощь и добрый совет. Подскажите направление. Есть скрипт https://github.com/jonom/jquery-focuspoint, который позволяет подстраивать размер изображения под любое разрешение и что самое нужное, заранее заданный фокус (точка изображения) держит в середине блока. Фокус и размеры изоабражения задаются например так data-focus-x="0.331" data-focus-y="-0.224" data-image-w="400" data-image-h="300"> Плагин прекрасно работает. мне нужно чтобы он работал в слайде. Вот код простенького слайда var i = 0; var path = new Array(); path[0] = "1.jpg"; path[1] = "2.jpg"; path[2] = "3.jpg"; function swapImage() { document.slide.src = path[i]; if(i < path.length - 1) i++; else i = 0; setTimeout("swapImage()",3000); } window.onload=swapImage; Он просто меняет названия файлов-изображений. Как заставить их работать вместе? Как я не пытался передать плагину настройки в виде data-focus-x, data-focus-y, - не получается. Он использует настройки первой картинки, дальше, настройки других картинок не принимает. Вот результат - http://play-day.me/index1.html (сейчас используются настройки для картинки 3.jpg, и для 1.jpg и 2.jpg они не подходят ) |
Den50,
убрать оба скрипта и поставить этот
<script>
$(function() {
var $focusPointContainers = $(".focuspoint").focusPoint(),
img = $focusPointContainers.find("img")[0],
focusData = [{
"data-focus-x": -.19,
"data-focus-y": .72,
"data-focus-w": 2500,
"data-focus-h": 1667
}, {
"data-focus-x": .8,
"data-focus-y": .86,
"data-focus-w": 2500,
"data-focus-h": 1667
}, {
"data-focus-x": .11,
"data-focus-y": -.24,
"data-focus-w": 2500,
"data-focus-h": 3358
}],
focusSrc = ["1.jpg", "2.jpg", "3.jpg"],
idx = 0;
function swapImage() {
img.src = focusSrc[idx];
$focusPointContainers.attr(focusData[idx]).removeData().focusPoint();
idx = ++idx % focusSrc.length;
setTimeout(swapImage, 3000)
}
swapImage()
});
</script>
|
Огромное спасибо!
|
| Часовой пояс GMT +3, время: 18:01. |