X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Прошу помощи с небольшой доработкой скрипта слайдера и.магазина
S1xteen
S1xteen
Topic Starter сообщение 21.3.2013, 18:03; Ответить: S1xteen
Сообщение #1


Привет! Есть просмоторщик изображений для интернет магазина, но в нем не хватает одной мелочи, а именно просмотр большого изображения при наведении на миниатюру, а не только по клику.
Буду очень благодарен тем, кто не откажет в помощи с реализацией smile.gif

Исходники в приложении.
Прикрепленный файл  Etalage_demo.zip ( 1,55 мегабайт ) Кол-во скачиваний: 38
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
tszyan
tszyan
сообщение 21.3.2013, 19:14; Ответить: tszyan
Сообщение #2


(S1xteen @ 21.3.2013, 18:03) *
большого изображения при наведении на миниатюру, а не только по клику

Непонятно как Вы хотите чтобы оно работало.

Большое изображение отображается для центральной миниатюры. Боковая становится центральной при клике, далее не двигая мышкой можно кликать до посинения и будут меняться картинки. Если сделать смену картинок при наведении, то они будут меняться постоянно, даже без кликов, когда курсор мышки находится на боковом изображении. Вы так и хотите?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
S1xteen
S1xteen
Topic Starter сообщение 21.3.2013, 20:02; Ответить: S1xteen
Сообщение #3


tszyan, Да, мне так и нужно.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
tszyan
tszyan
сообщение 21.3.2013, 23:41; Ответить: tszyan
Сообщение #4


Можете добавить внутрь $(document).ready следующее:
var tick = 1000;
var mouseX, mouseY;

$('body').on('mousemove', function (e) {
    mouseX = e.pageX == undefined ? mouseX : e.pageX;
    mouseY = e.pageY == undefined ? mouseY : e.pageY;
});
setInterval(function () {
    var first = $('.etalage_smallthumb_first');
    var offset = first.offset();
    var deltaX = mouseX - offset.left;
    var deltaY = mouseY - offset.top;
    if (deltaX > 0 && deltaX < first.width() && deltaY > 0 && deltaY < first.height()) {
        etalage_previous();
    }
    var last = $('.etalage_smallthumb_last');
    var offset = last.offset();
    var deltaX = mouseX - offset.left;
    var deltaY = mouseY - offset.top;
    if (deltaX > 0 && deltaX < last.width() && deltaY > 0 && deltaY < last.height()) {
        etalage_next();
    }

}, tick);

В хроме/сафари будет глючить при данном варианте верстки. В них есть баг, что onmousemove при некоторых условиях перестает работать. Вообще с отслеживанием данного события лучше не связываться без необходимости.

Сообщение отредактировал tszyan - 21.3.2013, 23:42


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
S1xteen
S1xteen
Topic Starter сообщение 22.3.2013, 0:32; Ответить: S1xteen
Сообщение #5


tszyan, Почти то, что надо, а как убрать зацикливание после наведения?
т.е когда наводим на правую миниатюру, они смещаются влево и под курсор попадает следующая миниатюра, срабатывает событие и снова смещаются влево, получается самопроизвольное бесконечное листание.

Пример как нужно
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
tszyan
tszyan
сообщение 22.3.2013, 0:56; Ответить: tszyan
Сообщение #6


(S1xteen @ 22.3.2013, 0:32) *
Почти то, что надо, а как убрать зацикливание после наведения?

Именно про это я и писал:
(tszyan @ 21.3.2013, 19:14) *
Если сделать смену картинок при наведении, то они будут меняться постоянно, даже без кликов


На Вашем новом примере - совершенно другое и без анимации перемещения миниатюр было бы гораздо проще. А так - все равно не совсем понятно как Вы хотите чтобы это работало.
Можете так попробовать (вместо того что до этого прислал):
var move = true;
$(document).on('mouseenter', '.etalage_smallthumb_first', function(){
    if(move)
        etalage_previous();
    move = false;
});
$(document).on('mouseleave', '.etalage_smallthumb_first, .etalage_smallthumb_last', function(){
    move = true;
});
$(document).on('mouseenter', '.etalage_smallthumb_last', function(){
    if(move)
        etalage_next();
    move = false;
});


Сообщение отредактировал tszyan - 22.3.2013, 0:58
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
S1xteen
S1xteen
Topic Starter сообщение 22.3.2013, 1:44; Ответить: S1xteen
Сообщение #7


Мне нужно максимально похожее как в примере. Я искал готовый скрипт, обыскал очень много сайтов, удалось найти только вот такой. Подумал что доработать будет намного проще, чем выдерать с какого-то сайта.
Идеальным будет такой вариант, но обязательно нужно отображение увеличенного изображения при наведении на миниатюру.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
tszyan
tszyan
сообщение 22.3.2013, 2:54; Ответить: tszyan
Сообщение #8


S1xteen,
Чтобы нормально работало - надо выбрать что-то одно: либо с наведением на миниатюру, либо со скроллингом миниатюр. Если скрещивать - получаются примеры выше.
Причем реализовать можно многое, только Вы сами мне не можете описать что хотите получить.
Семь красных линий. Все они должны быть строго перпендикулярны, и кроме того, некоторые нужно нарисовать зеленым цветом, а еще некоторые — прозрачным.


UPDATE:
Добавлю. Сделать как где-то - просто. Либо "вытащить" оттуда, либо написать исследовав как оно работает. Сделать как там, но с ... - зачастую не реально, но если хочется - надо четко себе представлять как оно должно работать вплоть до мелочей. Так чтобы написать ТЗ и после реализации по этому ТЗ не возникало непоняток: "А я хотел по-другому".http://www.maultalk.com/topic146711s0.html?gopid=1580813&#

UPDATE 2:
Вот интересное решение. В нем, наверное, можно и при наведении отображать картинки:
http://www.tn3gallery.com/
еще похожее:
http://wowslider.com/css-slideshow-studio-fade.html

Вот обычный, где легко можно сделать отображение при наведении:
http://www.twospy.com/galleriffic/example-2.html

UPDATE 3:
Ответьте себе на вопрос. Почему среди нескольких сотен слайдеров/галерей нет тех что совмещают анимацию миниатюр и отображение при наведении?
(Разве что 2 кнопки слева и справа поставить для прокрутки с анимацией, а при наведении менять картинку).

Сообщение отредактировал tszyan - 22.3.2013, 2:56


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
S1xteen
S1xteen
Topic Starter сообщение 23.3.2013, 1:07; Ответить: S1xteen
Сообщение #9


Ладно, я не буду продолжать.
Спасибо за потраченное на меня время.

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Требуется разработка скрипта для интернет-магазин автоматической покупки игр с сайта Xbox
2 slavalist 745 10.1.2023, 3:09
автор: slavalist
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыНудаюсь в помощи
WP ускорить по PageSpeed
13 MihalychAIP 2693 20.4.2022, 2:10
автор: sergogogo
Открытая тема (нет новых ответов) Посоветуйте скрипт интернет-магазина
(партнерская программа - критична!)
9 Aloof 7364 2.12.2021, 15:03
автор: Ilonek
Открытая тема (нет новых ответов) Платформа для мебельного магазина
0 icefog 4785 1.3.2021, 17:20
автор: icefog
Открытая тема (нет новых ответов) Доработка интернет-магазина на Opencart
1 MaxNet 907 14.12.2020, 12:26
автор: MaxNet


 



RSS Текстовая версия Сейчас: 19.4.2024, 14:55
Дизайн