Слайд и 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, время: 07:17. |