Друзья Привет, Хочу Установить На Сайт Новостную Ленту В Виде Карусели,
#1
Отправлено 14 Май 2013 - 16:58
Куда хочу вставить отметил на скрине.
#2
Отправлено 14 Май 2013 - 19:32
Код:
<div style=" height: 73px; width:1023px; margin-left:-20px; background: url({ASSETS_IMAGES_PATH}dno1.png);"> </div> <div style=" height: 100px; width:989px; margin-left:15px; background: url({ASSETS_IMAGES_PATH}dno2.png);"> </div> <div style=" height: 72px; width:987px; margin-left:15px; background: url({ASSETS_IMAGES_PATH}dno3.png);"> </div>Заменить:
<div style=" height: 73px; width:1023px; margin-left:-20px; background: url({ASSETS_IMAGES_PATH}dno1.png);"> </div> <div style=" height: 173px; width:989px; margin-left:15px; background: url({ASSETS_IMAGES_PATH}dno2.png);"> <script type="text/javascript"> jQuery(document).ready(function() { // Initialise the first and second carousel by class selector. // Note that they use both the same configuration options (none in this case). jQuery('.d-carousel .carousel').jcarousel({ scroll: 1 }); }); </script> <!-- Begin Wrapper --> <!-- Если в тарифном плане подключен модуль новостей --> {% IF TARIFF_FEATURE_NEWS %} <!-- Все новости --> <div id="wrapper" class="newscarusele"> <div class="d-carousel"> <ul class="carousel"> {% FOR news_list_shop %} <li class="contentTbodyNewsBlockItem"> <h4><a href="{news_list_shop.URL}">{news_list_shop.TITLE}</a></h4> <p> <div>{news_list_shop.TEXT_SHORT} </div> {% IF news_list_shop.SHOW_TIME %}<em class="contentTbodyNewsBlockItemTime">{news_list_shop.TIME | date("d.m.Y")}</em><br />{% ENDIF %} </p> </li> {% ENDFOR news_list_shop %} </ul> </div> <div class="clear"></div> </div> <!-- End Wrapper --> {% ENDIF %} </div> <div style=" height: 72px; width:987px; margin-left:15px; background: url({ASSETS_IMAGES_PATH}dno3.png);"> </div>
До кода:
<script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>Добавить:
<script type="text/javascript" src="{ASSETS_JS_PATH}jquery.jcarousel.js"></script> <link rel="stylesheet" href="{ASSETS_STYLES_PATH}carousel.css" type="text/css" />
Затем в этот раздел загрузить файлы из архива.
Прикрепленные файлы
#3
Отправлено 15 Май 2013 - 11:11
#5
Отправлено 15 Май 2013 - 17:49
может вообще другой вид карусели попобывать?
и еще у новостей магазина слева изменился цвет, раньше был синий а сейчас какойто не понятный темный стал. как вернуть?
и стрелок прокрутки карусели не видно
#6
Отправлено 15 Май 2013 - 18:03
Михаил4466 (15 Май 2013 - 17:49) писал:
может вообще другой вид карусели попобывать?
и еще у новостей магазина слева изменился цвет, раньше был синий а сейчас какойто не понятный темный стал. как вернуть?
и стрелок прокрутки карусели не видно
http://s652545.storeland.net/на
{ASSETS_IMAGES_PATH}
далее найдите там блок
#wrapper .d-carousel ul li { background: none; background-color: #FFF; -webkit-box-shadow: 0px 1px 2px 0px #b7b7b7; -moz-box-shadow: 0px 1px 2px 0px #b7b7b7; box-shadow: 0px 1px 2px 0px #b7b7b7; padding: 15px; width: 175px; }замените на
#wrapper .d-carousel ul li { background: none; background-color: #FFF; -webkit-box-shadow: 0px 1px 2px 0px #b7b7b7; -moz-box-shadow: 0px 1px 2px 0px #b7b7b7; box-shadow: 0px 1px 2px 1px #b7b7b7; padding: 15px; width: 167px; }
теперь найдите в нем блок
a { text-decoration: none; color: #4b4b4b; } a:hover { text-decoration: none; color: #1c1c1c; } h1, h2, h3, h4, h5, h6 { font-family: 'Puritan20Normal'; font-weight: normal; color: #4b4b4b; margin-bottom: 10px; } h4 { font-size: 16px; line-height: 20px; padding-bottom: 7px; }измените на
#wrapper .d-carousel ul li a { text-decoration: none; color: #4b4b4b; } #wrapper .d-carousel ul li a:hover { text-decoration: none; color: #1c1c1c; } #wrapper .d-carousel ul li h1, h2, h3, h4, h5, h6 { font-family: 'Puritan20Normal'; font-weight: normal; color: #4b4b4b; margin-bottom: 10px; } #wrapper .d-carousel ul li h4 { font-size: 16px; line-height: 20px; padding-bottom: 7px; }
Можете в графич.редакторе изобразить как Вы хотите видеть этот блок с новостями.
#7
Отправлено 15 Май 2013 - 18:33
Насчет того как стелизовать даже не знаю, вам как кажется он вписывается в тематику сайте?
И еще вопрос я могу вставлять туда картинку в карусель? с маленьким описанием? ну вроде того как: новые майки и фото майки в карусели ?
ой проблема с левой стороны не видно кнопки для движения карусели
#8
Отправлено 15 Май 2013 - 18:48
Михаил4466 (15 Май 2013 - 18:33) писал:
ой проблема с левой стороны не видно кнопки для движения карусели
вы в файле carousel.css заменили не все ссылки
http://s652545.storeland.net/
на
{ASSETS_IMAGES_PATH}
проверьте этот класс
.d-carousel .jcarousel-prev-horizontal {
#9
Отправлено 15 Май 2013 - 21:52
еще вопрос как добавлять картинки чтобы отображались в карусели?, вот таким типом:
ну чтобы вот фотография и текст:
#10
Отправлено 16 Май 2013 - 03:11
<li class="contentTbodyNewsBlockItem"> <img src="Адрес изображения" alt="" /> <h4><a href="{news_list_shop.URL}">{news_list_shop.TITLE}</a></h4> <p> <div>{news_list_shop.TEXT_SHORT} </div> {% IF news_list_shop.SHOW_TIME %}<em class="contentTbodyNewsBlockItemTime">{news_list_shop.TIME | date("d.m.Y")}</em><br />{% ENDIF %} </p> </li>
так же необходимо будет вставить данный список вручную, избегая цикл, т.е вместо
<ul class="carousel"> {% FOR news_list_shop %} <li class="contentTbodyNewsBlockItem"> <h4><a href="{news_list_shop.URL}">{news_list_shop.TITLE}</a></h4> <p> <div>{news_list_shop.TEXT_SHORT} </div> {% IF news_list_shop.SHOW_TIME %}<em class="contentTbodyNewsBlockItemTime">{news_list_shop.TIME | date("d.m.Y")}</em><br />{% ENDIF %} </p> </li> {% ENDFOR news_list_shop %} </ul>
необходимо
<ul class="carousel"> <li class="contentTbodyNewsBlockItem"> <img src="Адрес изображения" alt="" /> <h4><a href="URL">TITLE</a></h4> <div>TEXT_SHORT</div> </li> <li class="contentTbodyNewsBlockItem"> <img src="Адрес изображения" alt="" /> <h4><a href="URL">TITLE</a></h4> <div>TEXT_SHORT</div> </li> <li class="contentTbodyNewsBlockItem"> <img src="Адрес изображения" alt="" /> <h4><a href="URL">TITLE</a></h4> <div>TEXT_SHORT</div> </li> </ul>
Текст новости, заголовок и ссылку необходимо будет также задавать вручную. Так же вы можете построить условие для изображения например
<ul class="carousel"> {% FOR news_list_shop %} <li class="contentTbodyNewsBlockItem"> {%IF news_list_shop.TITLE=Заголовок новости 1%} <img src="Адрес изображения 1" alt="" /> {%ELSEIF news_list_shop.TITLE=Заголовок новости 2%} <img src="Адрес изображения 2" alt="" /> {%ELSEIF news_list_shop.TITLE=Заголовок новости 3%} <img src="Адрес изображения 3" alt="" /> {%ELSEIF news_list_shop.TITLE=Заголовок новости 4%} <img src="Адрес изображения 4" alt="" /> {%ENDIF%} <h4><a href="{news_list_shop.URL}">{news_list_shop.TITLE}</a></h4> <p> <div>{news_list_shop.TEXT_SHORT} </div> {% IF news_list_shop.SHOW_TIME %}<em class="contentTbodyNewsBlockItemTime">{news_list_shop.TIME | date("d.m.Y")}</em><br />{% ENDIF %} </p> </li> {% ENDFOR news_list_shop %} </ul>
#11
Отправлено 16 Май 2013 - 10:58
#12
Отправлено 09 Июнь 2013 - 22:06
Vaccina (16 Май 2013 - 03:11) писал:
Почему не добавить это в систему? Добавить строку типа "изображение новости (превью)" не знаю как это правильно будет называться. Кому нужно будет тот в дизайн себе добавит превью новости. Вы представляете если на сайте 1000 новостей и всегда в ручную это делать? А еще страница новостей - там где все новости, ее тоже в ручную формировать?
#13
Отправлено 10 Июнь 2013 - 08:21
b1f (09 Июнь 2013 - 22:06) писал:
Список новостей формируется автоматически из созданных вами новостей. Вы хотите сделать подпись в виде изображения к каждой новости. Как пример на стене групп на сайте vk.com ?
#14
Отправлено 10 Июнь 2013 - 08:36
miyako (10 Июнь 2013 - 08:21) писал:
#15
Отправлено 10 Июнь 2013 - 11:00
b1f (10 Июнь 2013 - 08:36) писал:
К сожалению пока так сделать нельзя. Но вы можете создать запрос на http://storeland.reformal.ru/.
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных