Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.07.2018, 22:56
Новичок на форуме
Отправить личное сообщение для Den50 Посмотреть профиль Найти все сообщения от Den50
 
Регистрация: 22.07.2018
Сообщений: 2

Слайд и 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, 22.07.2018 в 23:01.
Ответить с цитированием
  #2 (permalink)  
Старый 23.07.2018, 08:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,070

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>

Последний раз редактировалось рони, 23.07.2018 в 08:23.
Ответить с цитированием
  #3 (permalink)  
Старый 23.07.2018, 09:24
Новичок на форуме
Отправить личное сообщение для Den50 Посмотреть профиль Найти все сообщения от Den50
 
Регистрация: 22.07.2018
Сообщений: 2

Огромное спасибо!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменение рабочей области изображения pagemaster Общие вопросы Javascript 19 15.04.2013 18:06
Открыть слайд (раздел) текущего пункта меню Demath Элементы интерфейса 8 18.07.2012 02:49
Расчет реальных размеров изображения в галерее Vision Элементы интерфейса 7 10.07.2012 21:56
Получение высоты изображения theo_ Javascript под браузер 2 21.06.2011 16:04
отрисовка изображения по произвольным координатам Th0m@$ Events/DOM/Window 14 23.01.2010 16:04