Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Слайд и fokuspoint изображения (https://javascript.ru/forum/misc/74584-slajjd-i-fokuspoint-izobrazheniya.html)

Den50 22.07.2018 22:56

Слайд и 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 они не подходят )

рони 23.07.2018 08:18

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>

Den50 23.07.2018 09:24

Огромное спасибо!


Часовой пояс GMT +3, время: 06:33.