Как сделать, чтобы фото переключались(ось) при выборе параметра?

borro

Завсегдатай
1379
22 / 0
желаю вам счастья

Как сделать, чтобы фото переключались(ось) при выборе параметра?

« : 26.11.2014, 11:34:45 »

Здравствуйте.

Есть задача выложить на сайт майки, у которых будет два параметра - размер и цвет ткани. Скажите с помощью чего можно сделать подобный этому решению функционал в VirtueMart, когда при выборе цвета меняются фотографии, которых должно быть несколько для каждого цвета?

« Последнее редактирование: 28.11.2014, 13:36:48 от borro »

Записан

Gorgy777

Новичок
7
0 / 0

Re: Как сделать, чтобы фото переключались(ось) при выборе параметра?

« Ответ #1 : 26.11.2014, 11:46:02 »

Попробуй посмотреть тут

« Последнее редактирование: 26.11.2014, 15:11:52 от fsv »

Записан

borro

Завсегдатай
1379
22 / 0
желаю вам счастья

Re: Как сделать, чтобы фото переключались(ось) при выборе параметра?

« Ответ #2 : 27.11.2014, 17:06:53 »

Цитата: Gorgy777 от 26.11.2014, 11:46:02

Попробуй посмотреть тут

Благодарю. Насколько понял этот плагин не может выводить по нескольку фоток на каждый цвет как в предоставленном мной примере. Я правильно понял?

Записан

fsv

Moderator
2782
411 / 2

Re: Как сделать, чтобы фото переключались(ось) при выборе параметра?

« Ответ #3 : 27.11.2014, 20:24:37 »

Цитата: borro от 26.11.2014, 11:34:45

когда при выборе цвета меняются фотографии?

простой js-код написать надо в карточке. Конкретика зависит от выбранного способа наименований папок и файлов для хранения фото. Посмотрите на свой образец: белый цвет майки - фото в папке white, зеленый - уже папка green. Возможен вариант, когда все фото в одной папке, а название цвета в имени файла - maika_green.jpg . Суть - при change селекта, получаете его value (имя цвета), соответственно применяемой схемы наименований меняете src у фоток.

Записан

Веб-разработка: заказ. Только новая разработка.

borro

Завсегдатай
1379
22 / 0
желаю вам счастья

Re: Как сделать, чтобы фото переключались(ось) при выборе параметра?

« Ответ #4 : 28.11.2014, 09:52:34 »

Цитата: fsv от 27.11.2014, 20:24:37

простой js-код написать надо в карточке. Конкретика зависит от выбранного способа наименований папок и файлов для хранения фото. Посмотрите на свой образец: белый цвет майки - фото в папке white, зеленый - уже папка green. Возможен вариант, когда все фото в одной папке, а название цвета в имени файла - maika_green.jpg . Суть - при change селекта, получаете его value (имя цвета), соответственно применяемой схемы наименований меняете src у фоток.

Здравствуйте.
Спасибо. Да, были такие мысли. Запишу пока здесь, чтобы свериться с логикой и самому не забыть:
1. Все фотки вводятся в карточку товара, фотки в названиях имеют идентификаторы цвета
2. При первоначальном открытии карточки товара в php происходит фильтр фоток, которые должны отобразиться. Выводятся фотки, цвет которых совпадает с цветом дефолтной(первой) картинки товара
3. На jq: при смене цвета в селекте(настраиваемом поле) происходит фильтрация фоток определенного цвета и после чего происходит их вывод
Кажется так.
Осталось, без малого, узнать как в jquery подключаться к БД и ее шерстить...

Записан

robert

Живу я здесь
4974
457 / 20

Re: Как сделать, чтобы фото переключались(ось) при выборе параметра?

« Ответ #5 : 28.11.2014, 11:42:00 »

Цитата: borro от 28.11.2014, 09:52:34

Осталось, без малого, узнать как в jquery подключаться к БД и ее шерстить...

Нет, какая тут БД, и при желании к ней на jQuery вы не сможете подключаться.
Суть решения такова: изначально все фото загружаются, но показывается только white.jpg, например. При нажатии на option с значением "green" скрипт скрывает все другие фото, кроме green.jpg и т.д.

http://jsfiddle.net/n_robert/wbf03x3q/

« Последнее редактирование: 28.11.2014, 12:07:15 от robert »

Записан

Не будь паразитом, сделай что-нибудь самостоятельно!

borro

Завсегдатай
1379
22 / 0
желаю вам счастья

Re: Как сделать, чтобы фото переключались(ось) при выборе параметра?

« Ответ #6 : 28.11.2014, 13:28:06 »

Цитата: robert от 28.11.2014, 11:42:00

Нет, какая тут БД, и при желании к ней на jQuery вы не сможете подключаться.
Суть решения такова: изначально все фото загружаются, но показывается только white.jpg, например. При нажатии на option с значением "green" скрипт скрывает все другие фото, кроме green.jpg и т.д.

http://jsfiddle.net/n_robert/wbf03x3q/

Спасибо. Получается если фоток будет довольно много (для каждого цвета по нескольку), то процесс загрузки страницы затянется и надо подумать об отложенной загрузке. Вы можете что-нибудь посоветовать по вопросу снижения времени загрузки страницы в данном случае? Хотя похоже критичности не будет поскольку изначально будут загружаться мини-превью, а не большие фото

« Последнее редактирование: 28.11.2014, 13:36:00 от borro »

Записан

fsv

Moderator
2782
411 / 2

Re: Как сделать, чтобы фото переключались(ось) при выборе параметра?

« Ответ #7 : 28.11.2014, 14:06:17 »

Не надо загружать все 100500 фотографий, только дефолтные (например, пусть это будет белый цвет), указанные в настройках товара.
Потом просто на jq менять к ним путь. Все.

Цитировать

Конкретика зависит от выбранного способа наименований папок и файлов для хранения фото.

Вот и распишите, как у вас что будет называться. +ссылка очень бы помогла.

Записан

Веб-разработка: заказ. Только новая разработка.

borro

Завсегдатай
1379
22 / 0
желаю вам счастья

Re: Как сделать, чтобы фото переключались(ось) при выборе параметра?

« Ответ #8 : 28.11.2014, 14:41:09 »

Цитата: fsv от 28.11.2014, 14:06:17

Не надо загружать все 100500 фотографий, только дефолтные (например, пусть это будет белый цвет), указанные в настройках товара.
Потом просто на jq менять к ним путь. Все.Вот и распишите, как у вас что будет называться. +ссылка очень бы помогла.

Если количество фоток для разного цвета будет разным, то как получить количество этих фоток определенного цвета? Количество фото-мест будет меняться. jq может получать информацию из папки с фотографиями или это как-то через php передавать?

Записан

robert

Живу я здесь
4974
457 / 20

Re: Как сделать, чтобы фото переключались(ось) при выборе параметра?

« Ответ #9 : 28.11.2014, 14:47:11 »

Цитата: fsv от 28.11.2014, 14:06:17

Не надо загружать все 100500 фотографий, только дефолтные. Потом просто на jq менять к ним путь.

Точно! Пример для borro: http://jsfiddle.net/n_robert/06kkr4o0/

Записан

Не будь паразитом, сделай что-нибудь самостоятельно!

borro

Завсегдатай
1379
22 / 0
желаю вам счастья

Re: Как сделать, чтобы фото переключались(ось) при выборе параметра?

« Ответ #10 : 28.11.2014, 15:00:51 »

Цитата: robert от 28.11.2014, 14:47:11

Точно! Пример для borro: http://jsfiddle.net/n_robert/06kkr4o0/

если фоток для разного цвета бывает разное количество, как проще получить информацию количестве фоток для каждого цвета(этакий ассоциативный массив цвет -> количество)?

Записан

robert

Живу я здесь
4974
457 / 20

Re: Как сделать, чтобы фото переключались(ось) при выборе параметра?

« Ответ #11 : 28.11.2014, 15:12:23 »

Цитата: borro от 28.11.2014, 15:00:51

если фоток для разного цвета бывает разное количество, как проще получить информацию количестве фоток для каждого цвета(этакий ассоциативный массив цвет -> количество)?

AJAX.

Записан

Не будь паразитом, сделай что-нибудь самостоятельно!

fsv

Moderator
2782
411 / 2

Re: Как сделать, чтобы фото переключались(ось) при выборе параметра?

« Ответ #12 : 28.11.2014, 15:18:19 »

Цитата: borro от 28.11.2014, 15:00:51

если фоток для разного цвета бывает разное количество, как проще получить информацию количестве фоток для каждого цвета(этакий ассоциативный массив цвет -> количество)?

может, проще сделать их одинаковое кол-во? (для одного товара)

Записан

Веб-разработка: заказ. Только новая разработка.

borro

Завсегдатай
1379
22 / 0
желаю вам счастья

Re: Как сделать, чтобы фото переключались(ось) при выборе параметра?

« Ответ #13 : 28.11.2014, 15:27:04 »

Цитата: fsv от 28.11.2014, 15:18:19

может, проще сделать их одинаковое кол-во? (для одного товара)

да, лучше начать с простого

Записан

borro

Завсегдатай
1379
22 / 0
желаю вам счастья

Re: Как сделать, чтобы фото переключались(ось) при выборе параметра?

« Ответ #14 : 19.01.2015, 12:02:36 »

Здравствуйте.

Наполовину сделал.

Скажите, какой скрипт-файл(похоже это fancybox) открывает первую картинку товара после клика на детальное изображение, не смотря на смену главного изображения после выбора цвета в выпадающем списке?

Записан

robert

Живу я здесь
4974
457 / 20

Re: Как сделать, чтобы фото переключались(ось) при выборе параметра?

« Ответ #15 : 19.01.2015, 13:21:42 »

При изменении изображения измените также ссылку на него.

Записан

Не будь паразитом, сделай что-нибудь самостоятельно!

borro

Завсегдатай
1379
22 / 0
желаю вам счастья

Re: Как сделать, чтобы фото переключались(ось) при выборе параметра?

« Ответ #16 : 19.01.2015, 13:56:08 »

Цитата: robert от 19.01.2015, 13:21:42

При изменении изображения измените также ссылку на него.

За вывод большого изображения на затемнённом фоне отвечает тег с id="fancybox-content", и он заполняется тегом img только после клика на детальное изображение, когда я подменяю картинку этого тега img ещё нет. Получается вы предлагаете создать ещё функцию обработчик на тыкание детального изображения? В этом случае будет срабатывать два обработчика - один родной от fancybox, другой мой, и не понятно кто из них сработает первым. Да и лишние вычесления в виде двух обработчиков нажатия детального изображения это лишнее. Может вы подскажите, где вычисляется путь к развернутому изображению в родном js-коде fancybox?

Записан

robert

Живу я здесь
4974
457 / 20

Re: Как сделать, чтобы фото переключались(ось) при выборе параметра?

« Ответ #17 : 19.01.2015, 14:08:28 »

Код: php-brief

<div class="main-image">
<a title="Белая майка с надписью Одна голова хорошо а две лучше" rel="vm-additional-images" href="http://www.antilopagold.su/images/stories/virtuemart/product/e028_01_pered.jpg">
<img src="/images/stories/virtuemart/product/e028_02_pered.jpg" alt="Белая майка с надписью Одна голова хорошо а две лучше"/>
</a>
<div class="clear"/>
</div>
</div>

Смотрите на HTML-код: <img/> уже поменялось, а <a href /> - нет. Думаю, что в fancybox открывается именно то, что в последнем.

Записан

Не будь паразитом, сделай что-нибудь самостоятельно!

borro

Завсегдатай
1379
22 / 0
желаю вам счастья

Re: Как сделать, чтобы фото переключались(ось) при выборе параметра?

« Ответ #18 : 19.01.2015, 14:39:16 »

Цитата: robert от 19.01.2015, 14:08:28

Смотрите на HTML-код: <img/> уже поменялось, а <a href /> - нет. Думаю, что в fancybox открывается именно то, что в последнем.

именно так. поклон, благодарю

Записан

Как вывести категории с фото и подкатегориями? Автор sergspb	Ответов: 0 Просмотров: 2540	18.05.2022, 15:01:55 от sergspb
Слайдер фото в карточке товара Автор Stasweb	Ответов: 0 Просмотров: 1220	23.01.2019, 13:41:07 от Stasweb
Присваивание класс для фото товара Автор Mick	Ответов: 0 Просмотров: 871	14.09.2017, 15:01:09 от Mick
Смена описания при выборе параметра Автор Елeна	Ответов: 1 Просмотров: 833	24.03.2017, 02:14:11 от fsv
Как спустить названия подкатегорий под фото? Автор klara7	Ответов: 1 Просмотров: 999	04.12.2016, 11:33:55 от klara7

SW JProjects v.2.6.0 - компонент каталога расширений для Joomla

Phoca Collapse System Plugin

Человек на GitHub ускорил Joomla в 600 раз на объёме 150к+ материалов в 1700+ категориях

Похожие темы