Перейти к содержимому


Друзья Привет, Хочу Установить На Сайт Новостную Ленту В Виде Карусели,


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 15

#1 Михаил4466

Михаил4466

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 343 сообщений

Отправлено 14 Май 2013 - 16:58

Друзья привет, хочу установить на сайт новостную ленту в виде карусели,  в определенное место как мне её туда засунуть и чтобы при на жатии на картинк ув карусели перекидывало в на страицу новостей магазина.  
Куда хочу вставить отметил на скрине.

Изображение

#2 Koderhan

Koderhan

    Активный участник

  • Модератоpы
  • 6 227 сообщений

Отправлено 14 Май 2013 - 19:32

В файле "HTML".
Код:
<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 Михаил4466

Михаил4466

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 343 сообщений

Отправлено 15 Май 2013 - 11:11

а как именно загрузить файлы?

#4 miyako

miyako

    Активный участник

  • Модератоpы
  • 5 372 сообщений

Отправлено 15 Май 2013 - 11:27

Просмотр сообщенияМихаил4466 (15 Май 2013 - 11:11) писал:

а как именно загрузить файлы?

Сайт-Редактор тем-Файлы

#5 Михаил4466

Михаил4466

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 343 сообщений

Отправлено 15 Май 2013 - 17:49

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

может вообще другой вид карусели попобывать?

и еще у новостей магазина слева изменился цвет, раньше был синий а сейчас какойто не понятный темный стал. как вернуть?
Изображение

и стрелок прокрутки карусели не видно

#6 support 2.0

support 2.0

    Активный участник

  • Модераторы
  • 4 950 сообщений

Отправлено 15 Май 2013 - 18:03

Просмотр сообщенияМихаил4466 (15 Май 2013 - 17:49) писал:

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

может вообще другой вид карусели попобывать?

и еще у новостей магазина слева изменился цвет, раньше был синий а сейчас какойто не понятный темный стал. как вернуть?
Изображение

и стрелок прокрутки карусели не видно
откройте файл carousel.css и замените в нем все
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 Михаил4466

Михаил4466

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 343 сообщений

Отправлено 15 Май 2013 - 18:33

Большое спасибо все получилось!!!! вы супер молодцы!!!!

Насчет того как стелизовать даже не знаю,  вам как кажется он вписывается в тематику сайте?

И еще вопрос я могу вставлять туда картинку в карусель? с маленьким описанием? ну вроде того как: новые майки и фото майки в карусели ?

ой проблема с левой стороны не видно кнопки для движения карусели

#8 Taisia

Taisia

    Активный участник

  • Модератоpы
  • 1 289 сообщений

Отправлено 15 Май 2013 - 18:48

Просмотр сообщенияМихаил4466 (15 Май 2013 - 18:33) писал:


ой проблема с левой стороны не видно кнопки для движения карусели

вы в файле carousel.css заменили не все ссылки

http://s652545.storeland.net/
на

{ASSETS_IMAGES_PATH}

проверьте этот класс
.d-carousel .jcarousel-prev-horizontal {

#9 Михаил4466

Михаил4466

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 343 сообщений

Отправлено 15 Май 2013 - 21:52

спасибо все сделал!!!) вы супер молодцы!!

еще вопрос как добавлять картинки чтобы отображались в карусели?,  вот таким типом:
ну чтобы вот фотография и текст:
Изображение

#10 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 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 Михаил4466

Михаил4466

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 343 сообщений

Отправлено 16 Май 2013 - 10:58

Вроде сделал, вроде все получилось!!! Есть пару вопросов, задал их  в другой теме!!! Большое спасибо всем тем кто отвечал! Вы супер молодцы!

#12 b1f

b1f

    Пользователь

  • Пользователи
  • PipPip
  • 25 сообщений
  • ГородГомель

Отправлено 09 Июнь 2013 - 22:06

Просмотр сообщенияVaccina (16 Май 2013 - 03:11) писал:

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

Почему не добавить это в систему? Добавить строку типа "изображение новости (превью)" не знаю как это правильно будет называться. Кому нужно будет тот в дизайн себе добавит превью новости. Вы представляете если на сайте 1000 новостей и всегда в ручную это делать? А еще страница новостей - там где все новости, ее тоже в ручную формировать?

#13 miyako

miyako

    Активный участник

  • Модератоpы
  • 5 372 сообщений

Отправлено 10 Июнь 2013 - 08:21

Просмотр сообщенияb1f (09 Июнь 2013 - 22:06) писал:

Почему не добавить это в систему? Добавить строку типа "изображение новости (превью)" не знаю как это правильно будет называться. Кому нужно будет тот в дизайн себе добавит превью новости. Вы представляете если на сайте 1000 новостей и всегда в ручную это делать? А еще страница новостей - там где все новости, ее тоже в ручную формировать?

Список новостей формируется автоматически из созданных вами новостей. Вы хотите сделать подпись в виде изображения к каждой новости. Как пример на стене групп на сайте vk.com ?

#14 b1f

b1f

    Пользователь

  • Пользователи
  • PipPip
  • 25 сообщений
  • ГородГомель

Отправлено 10 Июнь 2013 - 08:36

Просмотр сообщенияmiyako (10 Июнь 2013 - 08:21) писал:

Список новостей формируется автоматически из созданных вами новостей. Вы хотите сделать подпись в виде изображения к каждой новости. Как пример на стене групп на сайте vk.com ?
Наверное да, думаю вы правильно меня поняли. Покажу изображение что конкретно хочу. На картинке слева фотография к новости. Как я понял стандартными способами такое сделать нельзя.
Изображение

#15 miyako

miyako

    Активный участник

  • Модератоpы
  • 5 372 сообщений

Отправлено 10 Июнь 2013 - 11:00

Просмотр сообщенияb1f (10 Июнь 2013 - 08:36) писал:

Наверное да, думаю вы правильно меня поняли. Покажу изображение что конкретно хочу. На картинке слева фотография к новости. Как я понял стандартными способами такое сделать нельзя.
Изображение

К сожалению пока так сделать нельзя. Но вы можете создать запрос на http://storeland.reformal.ru/.

#16 b1f

b1f

    Пользователь

  • Пользователи
  • PipPip
  • 25 сообщений
  • ГородГомель

Отправлено 26 Июнь 2013 - 18:46

http://storeland.ref...eland?ia=474979 - поддержите идею.




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных