[Помогите] Как выставить опции в ряд

Как реализовать вот это http://group.96.lt/index.php?route=product/product&product_id=75
Нужно чтобы опция "цвет" с переключателем "image" были выставлены горизонтально, но отсутствовала кнопка выбора, а вместо неё была сама картинка. На сайте, который в примере, каждое фото - отдельная карточка товара, а нужно чтобы все манипуляции проходили в одной карточке.
Заранее благодарен всем откликнувшимся!

 

Добрый день. Нашли как сделать так как на указанном сайте?

 

То есть тыкаешь по опции, она становится активной?
Не будет возможнсти выбрать несколько?

самый простой вариант, взять модуль типа такого, http://www.opencart.com/index.php?route=extension/extension/info&extension_id=15780 и скрыть стандартную точку через CSS.

 

1. Да
2. Да
Не совсем понял, чем поможет этот модуль, он же просто меняет картинки на основном изображении товара и если скрыть радиобокс через css, то ничего выбрать вообще не получится.

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

 

вам нужно создать условие, чтоб выбранной опции прописывался id или что-то другое, тогда можно будет с помощью css стилей выделить

 

я проверилна демке. скрыл радиобокс, нажимаю на нужной опции - она становится выбранной и попадает в корзину при заказе.
Да и при помощи стилей выделять выбранную опцию.

радиобокс в любом случае нужен, просто он будет невидимый.

 

в общем, что при клике на картинку опции, что на радиобокс - выбор опции происходит, поэтому достаточно сделать выделение картинки при нажатии на нее, а радиобокс скрыть. Может подскажите как через css добавить это выделение?

--- Добавлено, 28 май 2015 ---

если через css не найду как сделать выделение, то придется ставить модуль, а так для такой мелочи лишний модуль устанавливать не очень хочется.

 

думается, что все это я уже сделал, а вот как выделить с помощью css? Нашел всевдокласс focus http://htmlbook.ru/css/focus, но вот что-то прикрутить к своим изображениям не получается.
Вот класс в css для изображений:
.img-thumbnail {

1. padding: 4px;
2. line-height: 1.428571429;
3. background-color: #fff;
4. border: 1px solid #ddd;
5. border-radius: 4px;
6. -webkit-transition: all .2s ease-in-out;
7. transition: all .2s ease-in-out;
8. display: inline-block;
9. max-width: 100%;
10. height: auto;

}

 

посмотри вот это http://htmlbook.ru/css/checked и вот это http://htmlbook.ru/blog/kartinka-vmesto-chekboksa

 

в css прописать нужный стиль + :focus, к примеру .img-thumbnail:focus
лучше дать ссылку на сайт, так быстрее сможем помочь

 

я так и сделал, вот код

Код:

.img-thumbnail:focus {
border: 1px solid #aa88ff;
background-color: #23a1d1;}

.img-thumbnail:hover {
border: 1px solid #aa88ff;
background-color: #23a1d1;}

при наведении работает, а при выборе - нет, вот здесь можно посмотреть http://carmat.by/chehly/audi-cover/a3-1996-2003-8l

 

вот нашёл: http://www.opencart.com/index.php?extension_id=10910&route=extension/extension/info

 

у вас псевдокласс не добавляется к выбранной опции, поэтому и не работает, нужно опции доработать
посмотрите в демке модуля http://www.opencart.com/index.php?extension_id=10910&route=extension/extension/info
там выбранной опции добавляется в класс "active"