Как сделать динамическое изменение свойства background-position в JS?

Question

[ad1vk]

Здравствуйте. Очень прошу помощи в решении одной проблемы.

Сделал магазин на opencart, поставил jquery плагин CloudZoom (чтобы появлялась лупа и картинка увеличивалась), но проблема в том что при смене цвета товара, адрес картинки остается тот же и соотвественно при наведении увеличивается не так картинка. Так как скрипт подгружается только при наведении на увеличенную картинку, то заменить изображение таким образом $('#cloud-zoom-big ').style({"background-image":"urlimages"}); не получается(

Пример: klondike34.ru/index.php?route=product/product&path...

При смене цвета, не меняется изначальный(первый) адрес картинки для увелечения

Answer 1

[IceJOKER]

У вас какая-то убогая система выбора цвета, при каждом нажатии добавляется элемент на страницу(повторяю ПРИ КАЖДОМ НАЖАТИИ).
Нельзя ли сделать по легче?
Для переключателей установить атрибут data-src где будет ссылка на изображение, и при нажатии изменить ссылку основной картинки на ссылку из data-src , меньше мороки и больше результата

Comments

[ad1vk]

это я экспериментировал с выводом. Посмотрите пожалуйста сейчас.

[IceJOKER]

ad1vk: понял в чем трабла...он показывается картинку которая в href-е ссылки, поменяй его тоже вместе с src

[ad1vk]

IceJOKER: это я сделал, но результат тот же. Добавил скрин.

[IceJOKER]

ad1vk: можно попробовать data-cloudzoom атрибут, в котором должна быть ссылка на зумируемое изображение.

[IceJOKER]

или после смены картинки заново вызвать - $('.cloud-zoom, .cloud-zoom-gallery').CloudZoom(); , но это bad solution ))
на оф. сайте есть реализация с использованием атрибутов , попробуйте

[ad1vk]

IceJOKER: Спасибо! Я просто в JS 0 ( Если не затруднит, можете конкретно носом ткнуть в решение на офф сайте?

[IceJOKER]

ad1vk: к примеру - www.starplugins.com/cloudzoom/examples - IMAGE1, IMAGE2, IMAGE3 - кнопки для смены картинки и ниже код как все реализовано

[ad1vk]

IceJOKER: Спасибо большое!

[IceJOKER]

ad1vk: you're welcome )

[ad1vk]

IceJOKER: Спасибо еще раз, благодаря вам решил этот вопрос:) правда по методу bad solution ))

[IceJOKER]

ad1vk: пожалуйста еще раз ) что ж....без bad solution никто не обходится, со временем придете к good solution.. ))

Answer 2

[Александр]

Можно попробовать поставить таймер, а потом менять css свойство, это костыль

setTimeout(function(){
	$('#cloud-zoom-big').css({"background-image":"urlimages"});
}, 100)

Самое кашерное решение будет воспользоваться возможностью самого cloud-zoom переключать активное изображение

Comments

[ad1vk]

А можно поподробней? Я пока так и не решил эту проблему

[ad1vk]

Спасибо уже решил:)