1)Сейчас это выглядит так:
Возможно ли организовать скроллинг на фото вот таким образом:
2) Как перенести характеристики:
сайт:http://kafftan.ru
0
Изменить Фото И Характеристик
Автор drugoyMAX, 13 янв. 2015 10:14
Сообщений в теме: 2
#1
Отправлено 13 Январь 2015 - 10:14
#2
Отправлено 14 Январь 2015 - 02:50
1. Основные изменения выполните по сл.инструкции:
http://forum.storela...лож/#entry32986
а именно загрузите файлы и подключите их до </head>
Далее зайдите в шаблон Товар найдите:
замените на:
далее в carousel.css найдите:
http://forum.storela...лож/#entry32986
а именно загрузите файлы и подключите их до </head>
Далее зайдите в шаблон Товар найдите:
<!-- Другие изображения товара. Отображаются если есть изображения товара --> {% IFNOT goods_images_empty %} {% FOR goods_images %} <!-- Заголовок и обёртка для изображений, которая позволяет не показывать уменьшенное изображение товара если оно у него лишь одно --> {% IF goods_images.first %} <div class="allphoto clear"> <div class="title fnt11i" {% IF goods_images.length=1 %}style="display:none;"{% ENDIF %}>Другие фото {GOODS_NAME}</div> {% ENDIF %} <!-- Уменьшенное изображение товара --> <ul class="txtalgncnt zoomicon"> <li> <a href="{goods_images.LARGE}" rel="group" class="pict_gallery" target="_blank" title="{goods_images.NAME}"> <img class="cornerAll withBorder" rel="{goods_images.MEDIUM}" src="{goods_images.ICON}" alt="{goods_images.NAME}" /> </a> </li> <!-- Идентификатор изображения товара, используется для галереи изображений --> <input type="hidden" rel="{goods_images.ID}" /> </ul> <!-- В самом конце закрываем обёртку для списка маленьких изображений товара --> {% IF goods_images.last %} <div class="clear"></div> </div> {% ENDIF %} {% ENDFOR %} {% ENDIF %}
замените на:
<!-- Другие изображения товара. Отображаются если есть изображения товара --> {% IFNOT goods_images_empty %} <script type="text/javascript"> jQuery(document).ready(function() { jQuery('.d-carousel .carousel').jcarousel({ scroll: 1 }); }); </script> <div class="d-carousel"> <ul class="carousel txtalgncnt zoomicon"> {% FOR goods_images %}<li> <a href="{goods_images.LARGE}" rel="group" class="pict_gallery" target="_blank" title="{goods_images.NAME}"> <img class="cornerAll withBorder" rel="{goods_images.MEDIUM}" src="{goods_images.ICON}" alt="{goods_images.NAME}" /> </a> <!-- Идентификатор изображения товара, используется для галереи изображений --> <input type="hidden" rel="{goods_images.ID}" /> </li>{% ENDFOR %} </ul> </div> <!-- В самом конце закрываем обёртку для списка маленьких изображений товара --> {% IF goods_images.last %} <div class="clear"></div> </div> {% ENDIF %} {% ENDIF %}
далее в carousel.css найдите:
.d-carousel .jcarousel-container-horizontal { height: 325px; padding: 0 45px; width: 650px; } .d-carousel .jcarousel-item { height: 290px; width: 190px; } .d-carousel .jcarousel-next-horizontal { position: absolute; top: 149px; right: 0; margin-right: 3px; width: 15px; height: 28px; cursor: pointer; background: transparent url({ASSETS_IMAGES_PATH}blog-arrows.jpg) no-repeat top right; } .d-carousel .jcarousel-prev-horizontal { position: absolute; top: 149px; left: 0; margin-left: 3px; width: 15px; height: 28px; cursor: pointer; background: transparent url({ASSETS_IMAGES_PATH}blog-arrows.jpg) no-repeat top left; }замените на:
.d-carousel .jcarousel-container-horizontal { padding: 0 45px; } .d-carousel .jcarousel-item { width: 60px; } .d-carousel .jcarousel-next-horizontal { position: absolute; top: 5px; right: 0; margin-right: 3px; width: 15px; height: 28px; cursor: pointer; background: transparent url({ASSETS_IMAGES_PATH}blog-arrows.jpg) no-repeat top right; } .d-carousel .jcarousel-prev-horizontal { position: absolute; top: 5px; left: 0; margin-left: 3px; width: 15px; height: 28px; cursor: pointer; background: transparent url({ASSETS_IMAGES_PATH}blog-arrows.jpg) no-repeat top left; }2.В шаблоне Товар найдите:
<!-- Характеристики --> {% IFNOT goods_features_empty %} <div class="productFeaturesMainBlock marg50"> <div class="productFeaturesHeaderBlock characteristic titlegood fnt18 i fntarl txtalgnlft clr"> <div>Характеристики {GOODS_NAME}:<span class="paragraph-end"></span></div> </div> <div class="productFeaturesDescBlock"> <table class="characteristic marg50 fnt12"> {% FOR goods_features%} <tr> <td class="fnt12 b namechar"> {goods_features.NAME} </td> <td> {goods_features.VALUE} </td> </tr> {% ENDFOR %} </table> </div> </div> {% ENDIF %} <!-- Характеристики-Конец -->переместите его поставив после:
<!-- Блок описания модификации --> <div class="block1 goodsDataMainModificationsDescriptionBlock" {% IFNOT GOODS_MOD_DESCRIPTION %}style="display:none;"{% ENDIF %}> <div class="delivery fnt12 txtalgnlft"> <div class="variant"> <div class="info">{GOODS_MOD_DESCRIPTION}</div> </div> </div> </div>
#3
Отправлено 14 Январь 2015 - 08:46
Vaccina (14 Январь 2015 - 02:50) писал:
1. Основные изменения выполните по сл.инструкции:
http://forum.storela...лож/#entry32986
а именно загрузите файлы и подключите их до </head>
Далее зайдите в шаблон Товар найдите:
замените на:
далее в carousel.css найдите:
http://forum.storela...лож/#entry32986
а именно загрузите файлы и подключите их до </head>
Далее зайдите в шаблон Товар найдите:
<!-- Другие изображения товара. Отображаются если есть изображения товара --> {% IFNOT goods_images_empty %} {% FOR goods_images %} <!-- Заголовок и обёртка для изображений, которая позволяет не показывать уменьшенное изображение товара если оно у него лишь одно --> {% IF goods_images.first %} <div class="allphoto clear"> <div class="title fnt11i" {% IF goods_images.length=1 %}style="display:none;"{% ENDIF %}>Другие фото {GOODS_NAME}</div> {% ENDIF %} <!-- Уменьшенное изображение товара --> <ul class="txtalgncnt zoomicon"> <li> <a href="{goods_images.LARGE}" rel="group" class="pict_gallery" target="_blank" title="{goods_images.NAME}"> <img class="cornerAll withBorder" rel="{goods_images.MEDIUM}" src="{goods_images.ICON}" alt="{goods_images.NAME}" /> </a> </li> <!-- Идентификатор изображения товара, используется для галереи изображений --> <input type="hidden" rel="{goods_images.ID}" /> </ul> <!-- В самом конце закрываем обёртку для списка маленьких изображений товара --> {% IF goods_images.last %} <div class="clear"></div> </div> {% ENDIF %} {% ENDFOR %} {% ENDIF %}
замените на:
<!-- Другие изображения товара. Отображаются если есть изображения товара --> {% IFNOT goods_images_empty %} <script type="text/javascript"> jQuery(document).ready(function() { jQuery('.d-carousel .carousel').jcarousel({ scroll: 1 }); }); </script> <div class="d-carousel"> <ul class="carousel txtalgncnt zoomicon"> {% FOR goods_images %}<li> <a href="{goods_images.LARGE}" rel="group" class="pict_gallery" target="_blank" title="{goods_images.NAME}"> <img class="cornerAll withBorder" rel="{goods_images.MEDIUM}" src="{goods_images.ICON}" alt="{goods_images.NAME}" /> </a> <!-- Идентификатор изображения товара, используется для галереи изображений --> <input type="hidden" rel="{goods_images.ID}" /> </li>{% ENDFOR %} </ul> </div> <!-- В самом конце закрываем обёртку для списка маленьких изображений товара --> {% IF goods_images.last %} <div class="clear"></div> </div> {% ENDIF %} {% ENDIF %}
далее в carousel.css найдите:
.d-carousel .jcarousel-container-horizontal { height: 325px; padding: 0 45px; width: 650px; } .d-carousel .jcarousel-item { height: 290px; width: 190px; } .d-carousel .jcarousel-next-horizontal { position: absolute; top: 149px; right: 0; margin-right: 3px; width: 15px; height: 28px; cursor: pointer; background: transparent url({ASSETS_IMAGES_PATH}blog-arrows.jpg) no-repeat top right; } .d-carousel .jcarousel-prev-horizontal { position: absolute; top: 149px; left: 0; margin-left: 3px; width: 15px; height: 28px; cursor: pointer; background: transparent url({ASSETS_IMAGES_PATH}blog-arrows.jpg) no-repeat top left; }замените на:
.d-carousel .jcarousel-container-horizontal { padding: 0 45px; } .d-carousel .jcarousel-item { width: 60px; } .d-carousel .jcarousel-next-horizontal { position: absolute; top: 5px; right: 0; margin-right: 3px; width: 15px; height: 28px; cursor: pointer; background: transparent url({ASSETS_IMAGES_PATH}blog-arrows.jpg) no-repeat top right; } .d-carousel .jcarousel-prev-horizontal { position: absolute; top: 5px; left: 0; margin-left: 3px; width: 15px; height: 28px; cursor: pointer; background: transparent url({ASSETS_IMAGES_PATH}blog-arrows.jpg) no-repeat top left; }2.В шаблоне Товар найдите:
<!-- Характеристики --> {% IFNOT goods_features_empty %} <div class="productFeaturesMainBlock marg50"> <div class="productFeaturesHeaderBlock characteristic titlegood fnt18 i fntarl txtalgnlft clr"> <div>Характеристики {GOODS_NAME}:<span class="paragraph-end"></span></div> </div> <div class="productFeaturesDescBlock"> <table class="characteristic marg50 fnt12"> {% FOR goods_features%} <tr> <td class="fnt12 b namechar"> {goods_features.NAME} </td> <td> {goods_features.VALUE} </td> </tr> {% ENDFOR %} </table> </div> </div> {% ENDIF %} <!-- Характеристики-Конец -->переместите его поставив после:
<!-- Блок описания модификации --> <div class="block1 goodsDataMainModificationsDescriptionBlock" {% IFNOT GOODS_MOD_DESCRIPTION %}style="display:none;"{% ENDIF %}> <div class="delivery fnt12 txtalgnlft"> <div class="variant"> <div class="info">{GOODS_MOD_DESCRIPTION}</div> </div> </div> </div>
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных