Возвращаясь к любимой теме атрибутов товара... (JoomShopping-2.9.1 JoomShopping-2.9.7)
Эффект заключается в следующем - у атрибутов выводятся маленькие изображения примерно 15х15 пикселей покупатель наводит мышью на изображение атрибута - картинка плавно увеличивается до 100х100 пикселей.
В моем случае необходимо было чтобы покупатель смог рассмотреть текстуру материала.
Сделал для примера:
Реализация: в файле default.css компонента меняем следующие строки
span.prod_attr_img{
padding-left:5px;
}
span.prod_attr_img img{
width:20px;
height:20px;
}
.radio_attr_label img{
width:20px;
height:20px;
}
На строки
(Доработал и изменил CSS. Теперь работает в IE, но только тень, остальное пока не поддерживается!):
Новый код смотри ниже!Не корректно работает Internet Explorer 6-8
Если кто подскажет решение буду рад. Можно конечно использовать JS, но CSS мне кажется проще. Учитывая что у магазина постоянно выходят обновления и заменяются файлы. Можно код вставить не CSS магазина, а в CSS шаблона сайта (не забудьте
!important) и тогда с выходом новой версии магазина ваши добавленные стили не изменятся.
НОВОЕ В ТЕМЕ!Теперь в Internet Explorer 6-8
почти работает. На данный момент только тень, но уже что-то. Чтобы картинка при наведении динамически увеличивалась: Осталось подождать новую версию PIE.htc - (
v1.0beta4 v1.0beta5) или подключать JS только для Internet Explorer.
ВНИМАНИЕ! Чтобы всё заработало не забудьте файл из вложения PIE.htc положить в корень сайта!P.S. Код CSS изменил см.выше! Ссылка на сайт разработчика PIE.htc:
http://css3pie.com/Спасибо всем за интерес проявленный к Теме.
САМОЕ НОВОЕ...:
Вот обновленный код css:
div.jshop_prod_attributes input{
position: relative;
bottom: 30px;
}
.radio_attr_label{
position: relative;
bottom: 30px;
right: 20px;
}
span.prod_attr_img{
padding-left:0px;
position: relative;
bottom: 30px;
right: 20px;
}
span.prod_attr_img img{
width: 20px;
height: 20px;
transform:scale(1.0); /* scale */
-webkit-transform:scale(1.0); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(1.0); /*Mozilla scale version*/
-o-transform:scale(1.0); /*Opera scale version*/
-ms-transform:scale(1.0); /*Internet Explorer 9 scale version*/
-khtml-transform:scale(1.0); /* Konqueror , Safari scale version*/
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.3, M12=0, M21=0, M22=0.3, SizingMethod='auto expand')"; /* Internet Explorer 8 */
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.3,
M12=0,
M21=0,
M22=0.3,
SizingMethod='auto expand'); /* Internet Explorer 6-7 */
margin-left: 30px; /* Для корректировки центра трансформации объекта. Примечание: эти значения приблизительные. */
margin-top: 30px;
transition-duration: 0.5s; /* duration */
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
-ms-transition-duration: 0.5s; /*Internet Explorer 9 duration version*/
-khtml-transition-duration: 0.5s; /* Konqueror , Safari duration version*/
-ms-filter: "progid:DXImageTransform.Microsoft.Transition(duration=0.5s)"; /* Internet Explorer 8 */
filter :progid:DXImageTransform.Microsoft.Transition(duration=0.5s); /* Internet Explorer 6-7 */
opacity: 0.7; /*margin between images*/
-webkit-opacity: 0.7; /* Webkit */
-moz-opacity: 0.7; /* Mozilla */
-o-opacity: 0.7; /* Opera */
-ms-opacity: 0.7; /* Internet Explorer 9 */
-khtml-opacity: 0.7; /* Konqueror , Safari */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; /* Internet Explorer 8 */
filter:alpha(opacity=70); /* Internet Explorer 6-7 */
behavior: url(/PIE.htc); /*Internet Explorer 6-8 for css3*/
position: relative;
z-index: 1;
}
.radio_attr_label img{
width: 20px;
height: 20px;
transform:scale(1.0); /* scale */
-webkit-transform:scale(1.0); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(1.0); /*Mozilla scale version*/
-o-transform:scale(1.0); /*Opera scale version*/
-ms-transform:scale(1.0); /*Internet Explorer 9 scale version*/
-khtml-transform:scale(1.0); /* Konqueror , Safari scale version*/
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.3, M12=0, M21=0, M22=0.3, SizingMethod='auto expand')"; /* Internet Explorer 8 */
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.3,
M12=0,
M21=0,
M22=0.3,
SizingMethod='auto expand'); /* Internet Explorer 6-7 */
margin-left: 30px; /* Для корректировки центра трансформации объекта. Примечание: эти значения приблизительные. */
margin-top: 30px;
transition-duration: 0.5s; /* duration */
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
-ms-transition-duration: 0.5s; /*Internet Explorer 9 duration version*/
-khtml-transition-duration: 0.5s; /* Konqueror , Safari duration version*/
-ms-filter: "progid:DXImageTransform.Microsoft.Transition(duration=0.5s)"; /* Internet Explorer 8 */
filter :progid:DXImageTransform.Microsoft.Transition(duration=0.5s); /* Internet Explorer 6-7 */
opacity: 0.7; /*margin between images*/
-webkit-opacity: 0.7; /* Webkit */
-moz-opacity: 0.7; /* Mozilla */
-o-opacity: 0.7; /* Opera */
-ms-opacity: 0.7; /* Internet Explorer 9 */
-khtml-opacity: 0.7; /* Konqueror , Safari */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; /* Internet Explorer 8 */
filter:alpha(opacity=70); /* Internet Explorer 6-7 */
position: relative;
z-index: 1;
behavior: url(/PIE.htc); /*Internet Explorer 6-8 for css3*/
}
span.prod_attr_img img:hover{
width: 100px;
height: 100px;
transform:scale(1.0); /* scale */
-webkit-transform:scale(1.0); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.0); /*Mozilla scale version*/
-o-transform:scale(1.0); /*Opera scale version*/
-ms-transform:scale(1.0); /*Internet Explorer 9 scale version*/
-khtml-transform:scale(1.0); /*Internet Explorer 6-8 scale version*/
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand')"; /* Internet Explorer 8 */
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=1,
M12=0,
M21=0,
M22=1,
SizingMethod='auto expand'); /* Internet Explorer 6-7 */
margin-left: -3px; /* Для корректировки центра трансформации объекта. Примечание: эти значения приблизительные. */
margin-top: -3px;
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
-o-box-shadow:0px 0px 30px gray; /*Opera shadow version*/
-khtml-box-shadow:0px 0px 30px gray; /* Konqueror , Safari shadow version*/
-ms-box-shadow:0px 0px 30px gray; /*Internet Explorer 9 shadow version*/
opacity: 1; /*margin between images*/
-webkit-opacity: 1; /* Webkit */
-moz-opacity: 1; /* Mozilla */
-o-opacity: 1; /* Opera */
-ms-opacity: 1; /* Internet Explorer 9 */
-khtml-opacity: 1; /* Konqueror , Safari */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* Internet Explorer 8 */
filter:alpha(opacity=100); /* Internet Explorer 6-7 */
position: relative;
z-index: 1;
behavior: url(/PIE.htc); /*Internet Explorer 6-8 for css3*/
}
.radio_attr_label img:hover{
width: 100px;
height: 100px;
transform:scale(1.0); /* scale */
-webkit-transform:scale(1.0); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.0); /*Mozilla scale version*/
-o-transform:scale(1.0); /*Opera scale version*/
-ms-transform:scale(1.0); /*Internet Explorer 9 scale version*/
-khtml-transform:scale(1.0); /*Konqueror , Safari scale version*/
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand')"; /* Internet Explorer 8 */
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=1,
M12=0,
M21=0,
M22=1,
SizingMethod='auto expand'); /* Internet Explorer 6-7 */
margin-left: -3px; /* Для корректировки центра трансформации объекта. Примечание: эти значения приблизительные. */
margin-top: -3px;
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
-o-box-shadow:0px 0px 30px gray; /*Opera shadow version*/
-ms-box-shadow:0px 0px 30px gray; /*Internet Explorer 9 shadow version*/
-khtml-shadow:0px 0px 30px gray; /*Konqueror , Safari shadow version*/
opacity: 1; /*margin between images*/
-webkit-opacity: 1; /* Webkit */
-moz-opacity: 1; /* Mozilla */
-o-opacity: 1; /* Opera */
-ms-opacity: 1; /* Internet Explorer 9 */
-khtml-opacity: 1; /* Konqueror , Safari */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* Internet Explorer 8 */
filter:alpha(opacity=100); /* Internet Explorer 6-7 */
position: relative;
z-index: 1;
behavior: url(/PIE.htc); /*Internet Explorer 6-8 for css3*/
}
1. Незабываем про файл - PIE.htc (Вышла новая версия - PIE-v1.0beta5,
см. обновлённый файл во вложении Немогу прикрепить файл качайте с сайта разработчика:
http://css3pie.com/.)
2. Картинки атрибутов у меня 100х100 пикселей.
Ну вот собственно и всё. Тестируем и пишем замечания.P.S. Internet Explorer 6-8 не поддерживает плавное увеличение картинки. Может есть у кого решение?
16.02.2024, 13:33:24