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



 

Здравствуйте, гость ( Вход | Регистрация )

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


Бывалый
****

Группа: User
Сообщений: 293
Регистрация: 20.9.2010
Поблагодарили: 64 раза
Репутация:   12  


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

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


Участник
***

Группа: User
Сообщений: 207
Регистрация: 28.1.2013
Из: Москва
Поблагодарили: 110 раз
Репутация:   27  


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

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

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


Бывалый
****

Группа: User
Сообщений: 293
Регистрация: 20.9.2010
Поблагодарили: 64 раза
Репутация:   12  


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


Участник
***

Группа: User
Сообщений: 207
Регистрация: 28.1.2013
Из: Москва
Поблагодарили: 110 раз
Репутация:   27  


Можете добавить внутрь $(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


Бывалый
****

Группа: User
Сообщений: 293
Регистрация: 20.9.2010
Поблагодарили: 64 раза
Репутация:   12  


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

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


Участник
***

Группа: User
Сообщений: 207
Регистрация: 28.1.2013
Из: Москва
Поблагодарили: 110 раз
Репутация:   27  


(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


Бывалый
****

Группа: User
Сообщений: 293
Регистрация: 20.9.2010
Поблагодарили: 64 раза
Репутация:   12  


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


Участник
***

Группа: User
Сообщений: 207
Регистрация: 28.1.2013
Из: Москва
Поблагодарили: 110 раз
Репутация:   27  


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


Бывалый
****

Группа: User
Сообщений: 293
Регистрация: 20.9.2010
Поблагодарили: 64 раза
Репутация:   12  


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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Оцените сайт на рыболовную тематику. Все кто любят критиковать прошу сюда.
3 alexandrrr 351 Вчера, 23:28
автор: alexandrrr
Открытая тема (нет новых ответов) Видеомаркетинг как инструмент развития интернет-магазина
11 PostBrigada 2144 Вчера, 20:30
автор: galikfor
Открытая тема (нет новых ответов) Первый опыт, прошу совета.
7 b3rsus 671 Вчера, 12:22
автор: Nell
Открытая тема (нет новых ответов) Вопрос по seo для интернет магазина
куда девать продвинутые товары, которые уже не выпускают
15 viktormerke 2549 Вчера, 11:53
автор: Caterpillar
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыПрошу оценить новостной сайт
8 Cunningfox 918 13.12.2017, 18:20
автор: Catherine_Molli


 



RSS Текстовая версия Сейчас: 15.12.2017, 4:57
Дизайн