Перейти к публикации
Поиск в
  • Дополнительно...
Искать результаты, содержащие...
Искать результаты в...

Выбор опции цвет в картинках


helen2014
 Поделиться

Рекомендованные сообщения

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

 

Нужна помощь, сделал вывод опций картинок горизонтально в ряд. Сам код нашел на просторах интернета, так вроде бы все нормально, но при выборе цвета изображение не становиться активным. Сам выбор срабатывает! Подскажите, как сделать, чтобы при выборе картинка становилась активной.

 

Вот часть кода связанная с картинками:

 <b>Выберите цвет:</b><br />
          <table class="option-image">
             <?php foreach ($option['option_value'] as $option_value) { ?>
              <tr class="tr_my_options">
             <td style="width: 1px; display: none;"><input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" id="option-value-<?php echo $option_value['product_option_value_id']; ?>" /></td>
 <td><label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" /></label></td>
 <td><label class="name_my_options" for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><!--<?php echo $option_value['name']; ?>-->
 <?php if ($option_value['price']) { ?>
 (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
                  <?php } ?>

CSS:

.product-info .option-image {
 margin-top: 3px;
 margin-bottom: 10px;
}
.product-info .option-image .tr_my_options {
    float: left;
    margin-bottom: 0;
    margin-right: 10px;
    position: relative;
    width: 50px;
}
.product-info .option-image .tr_my_options label {
    border: 0.5px solid #f9e5d2;
    display: block;
    height: 71px;
    width: 50px;
    -webkit-border-radius: 0px 0px 0px 0px;
 -moz-border-radius: 0px 0px 0px 0px;
 -khtml-border-radius: 0px 0px 0px 0px;
 border-radius: 0px 0px 0px 0px;
 
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}
.product-info .option-image .tr_my_options label:hover {
    border: 0.5px solid #990000;
}

.product-info .option-image .tr_my_options img {
    border: none;
    cursor: pointer;
    margin-right: 5px;
}
.product-info .option-image .name_my_options {
    left: 3px;
    position: absolute;
    right: 10px;
    text-align: center;
    top: 3px;
}
.product-info .option-image label {
 display: block;
 width: 100%;
 height: 100%;
}
.product-info .option-image img {
 margin-right: 5px;
 border: 1px solid #CCCCCC;
 cursor: pointer;
}

Ссылка на комментарий
Поделиться на других сайтах


Ссылка на комментарий
Поделиться на других сайтах

 

Я так понимаю это сделано в виде модуля? Где и как его можно приобрести?

Ссылка на комментарий
Поделиться на других сайтах


У меня))))

 

Хорошо, сейчас договоримся! И еще вопрос по опциям цвета и размера (как у Вас на демке), изменения цены при выборе цвета и размера связаны в этом модуле? или это что-то другое?

Ссылка на комментарий
Поделиться на других сайтах


Всё вместе.Как шампунь-кондиционер с эффектом отвыкания от курения))))

Ссылка на комментарий
Поделиться на других сайтах

Всё вместе.Как шампунь-кондиционер с эффектом отвыкания от курения))))

 

Хорошо, тогда пишите в личку, что, сколько и куда?

Ссылка на комментарий
Поделиться на других сайтах


Давно уже стою в личке с сачком.

Ссылка на комментарий
Поделиться на других сайтах

  • 1 год спустя...

Всё вместе.Как шампунь-кондиционер с эффектом отвыкания от курения))))

Опции экстра (в стиле Aliexpress)

Об этом речь?

Приобрести на той же странице можно?

Ссылка на комментарий
Поделиться на других сайтах


Нет.Там демка о которой я давным давно уже и забыл.

Ссылка на комментарий
Поделиться на других сайтах

Вот так всегда, как только найдёшь что нибудь новое, так сразу  это новое уже давно забытое старое ))

Ссылка на комментарий
Поделиться на других сайтах


а как бы этот модуль приобрести для версии Ocstore 15512 ?

Ссылка на комментарий
Поделиться на других сайтах


Так же как и написано выше .У меня в личке....

Ссылка на комментарий
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас
 Поделиться

×
×
  • Создать...

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.