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


Добавить Виджет


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

#1 emin808

emin808

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

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

Отправлено 13 Декабрь 2012 - 00:18

Здравствуйте товарищи.

Вот здесь увидел интересный виджет :wub:  

Будьте добры , подскажите путь пожалуйста установки данного виджета на наш замечательный сайт :)

ИзображениеИзображение

#2 Koderhan

Koderhan

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

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

Отправлено 13 Декабрь 2012 - 11:26

Предлагаю установить на сайт похожую карусель.
Вот как можно это сделать.
Скачать и распаковать на компьютер файл Прикрепленный файл  click-carousel.zip   111К   83 Количество загрузок:.
Панель администратора, Сайт->Редактор тем.
Загрузить все файлы на сайт.
ScreenShot 227.jpg
Открыть файл HTML.
До кода </head>.
ScreenShot 226.jpg
Вставить код:

<link rel="stylesheet" type="text/css" href="{ASSETS_STYLES_PATH}click-carousel.css" />
<script type="text/javascript" src="{ASSETS_JS_PATH}click-carousel.js"></script>
<script type="text/javascript">
$(function(){
$("#container").clickCarousel({margin: 10});
});
</script>

Открыть файл Товары.
Найти код:
<ul style="float:left;">
	 <li><a href="http://{NET_DOMAIN}/" title="Перейти на главную">Главная</a><span>&nbsp;</span></li>
	 {% IF IS_FULL_CATALOG %}
		 <li><strong>Каталог</strong></li>
	 {% ELSE %}
		 <li><a href="{CATALOG_URL}" title="Перейти в каталог продукции нашего магазина">Каталог</a><span>&nbsp;</span></li>
		 {% FOR upper_navigation %}
		 {% IF upper_navigation.CURRENT %}<li><strong>{upper_navigation.NAME}</strong></li>{% ELSEIF upper_navigation.CURRENT_PARENT %}<li><a href="{upper_navigation.URL}" title="Перейти в категорию &laquo;{upper_navigation.NAME}&raquo;">{upper_navigation.NAME}</a><span>&nbsp;</span></li>{% ENDIF %}
		 {% ENDFOR %}
	 {% ENDIF %}
	 </ul>
ScreenShot 229.jpg
Заменить на:
<div class="with-keyup-navigation">
	 <style>
		 .click-carousel #carouselLeft {
			 position: relative;
			 top: -85px;
			 left: 8px;
			 cursor: pointer;
		 }
		 .click-carousel #carouselRight {
			 position: relative;
			 top: -85px;
			 left: 479px;
			 cursor: pointer;		 }
		 .click-carousel {
			 margin-left: 3em;
		 }
		 .click-carousel #container div {
			 position: absolute;
			 top: 0px;
			 height: 150px;
			 width: 150px;
		 }
	 </style>
	 <div class="click-carousel">
		 <div id="wrapper">
			 <div id="container">	
				 <div><a href="#"><img src="{ASSETS_IMAGES_PATH}img1.jpg" alt="Cuba" /></a></div>
				 <div><a href="#"><img src="{ASSETS_IMAGES_PATH}img2.jpg" alt="Cuba" /></a></div>
				 <div><a href="#"><img src="{ASSETS_IMAGES_PATH}img3.jpg" alt="Cuba" /></a></div>
				 <div><a href="#"><img src="{ASSETS_IMAGES_PATH}img4.jpg" alt="Cuba" /></a></div>
				 <div><a href="#"><img src="{ASSETS_IMAGES_PATH}img5.jpg" alt="Cuba" /></a></div>
			 </div><!-- container -->
			 <img id="carouselLeft" src="{ASSETS_IMAGES_PATH}leftArr.jpg" alt="Left Arrow" />
			 <img id="carouselRight" src="{ASSETS_IMAGES_PATH}rightArr.jpg" alt="Right Arrow" />
		 </div><!-- wrapper -->
	 </div>
ScreenShot 228.jpg
В этом коде вы можете изменить названия картинок (img2.jpg,img5.jpg) на названия своих картинок. Так же можно вставить ссылки на клик по картинки,
Например так.
Изменив код
<a href="#">
на
<a href="http://storeland.ru/">


#3 emin808

emin808

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

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

Отправлено 13 Декабрь 2012 - 17:06

ой получилось так : Изображение

#4 support 2.0

support 2.0

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

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

Отправлено 13 Декабрь 2012 - 17:09

Просмотр сообщенияemin808 (13 Декабрь 2012 - 17:06) писал:

ой получилось так :

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

#5 emin808

emin808

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

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

Отправлено 13 Декабрь 2012 - 17:14

сейчас вернул обратно , чтоб уж посетители не путались

хорошо, минутку пожалуйста

готово

#6 support 2.0

support 2.0

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

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

Отправлено 13 Декабрь 2012 - 17:37

Просмотр сообщенияemin808 (13 Декабрь 2012 - 17:14) писал:

сейчас вернул обратно , чтоб уж посетители не путались

хорошо, минутку пожалуйста

готово

зайдите в файл click-carousel.css
и найдите блок
#container {
position: absolute;
top: 10px;
left: 60px;
height: 150px;
width: 470px;
overflow: hidden;
}

замените его на
#container {
position: relative;
top: 10px;
left: 60px;
height: 150px;
width: 470px;
overflow: hidden;
}


#7 emin808

emin808

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

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

Отправлено 13 Декабрь 2012 - 17:46

да , получилось , благодарю Вас , <_<

очень помогаете, :)

нам надо проанализировать , изначально задумывалось чуть по другому

т.е все так , только думается подкорректировать чуть

#8 emin808

emin808

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

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

Отправлено 13 Декабрь 2012 - 21:59

Изображение

возможно ли сделать так?!

Изображение

и помогите пожалуйста с путем как подтянуть максимально вверх ?!

Изображение


#9 emin808

emin808

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

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

Отправлено 13 Декабрь 2012 - 22:10

и ещё одна деталь , он в автоматическом режиме интересно может перелистовываться?!

#10 Koderhan

Koderhan

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

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

Отправлено 14 Декабрь 2012 - 09:52

Просмотр сообщенияemin808 (13 Декабрь 2012 - 21:59) писал:

Изображение

возможно ли сделать так?!

Изображение

и помогите пожалуйста с путем как подтянуть максимально вверх ?!

Изображение

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

#11 emin808

emin808

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

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

Отправлено 14 Декабрь 2012 - 10:08

Можно отключить слайдер на малых разрешениях экрана. Для того чтобы слайдер не выезжал за границы контента. :)

#12 support 2.0

support 2.0

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

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

Отправлено 14 Декабрь 2012 - 15:14

Просмотр сообщенияemin808 (13 Декабрь 2012 - 21:59) писал:

Изображение

возможно ли сделать так?!

Изображение

и помогите пожалуйста с путем как подтянуть максимально вверх ?!

Изображение


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

2. В шаблоне Товары найдите блок
.click-carousel {
margin-left: 3em;
}

и замените его на
.click-carousel {
margin: -2em 0px -30px 3em;
}


#13 support 2.0

support 2.0

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

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

Отправлено 14 Декабрь 2012 - 15:34

Просмотр сообщенияemin808 (14 Декабрь 2012 - 10:08) писал:

Можно отключить слайдер на малых разрешениях экрана. Для того чтобы слайдер не выезжал за границы контента. :)

Зайдите в шаблон Товары -> Чтобы отключить показ слайдера после определенного разрешения экрана, добавьте в стили слайдера следующий блок
@media screen and (max-width: 980px) {
.click-carousel {
  display:none;
}

У Вас получится следующее
<style>
				 .click-carousel #carouselLeft {
						 position: relative;
						 top: -85px;
						 left: 8px;
						 cursor: pointer;
				 }
				 .click-carousel #carouselRight {
						 position: relative;
						 top: -85px;
						 left: 479px;
						 cursor: pointer;				}
				 .click-carousel {
						 margin-left: 3em;
				 }
				 .click-carousel #container div {
						 position: absolute;
						 top: 0px;
						 height: 150px;
						 width: 150px;
				 }
  @media screen and (max-width: 980px) {
   .click-carousel {
	 display:none;
  }
		 </style>


#14 emin808

emin808

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

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

Отправлено 14 Декабрь 2012 - 19:44

да, все чётко, благодарю :)

вот еще коррекция необходима :

Можно сделать этот слайдер раздельным чтоб был независим от товарной категории как на главной ?!

#15 Vaccina

Vaccina

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

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

Отправлено 14 Декабрь 2012 - 22:19

Не совсем вас понимаю, пожалуйста, объясните подробнее. Вы хотите на разных страницах отображать разный слайдер?

#16 emin808

emin808

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

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

Отправлено 14 Декабрь 2012 - 22:41

Изображение

#17 Vaccina

Vaccina

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

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

Отправлено 14 Декабрь 2012 - 23:29

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

{%IF CATEGORY_NAME=Имя категории%}
  измененный слайдер, или другие изображения для Имя категории
{%ELSEIF CATEGORY_NAME=Имя категории 2%}
  измененный слайдер, или другие изображения для Имя категории 2
{%ELSEIF CATEGORY_NAME=Имя категории 3%}
  измененный слайдер, или другие изображения для Имя категории 3
{%ENDIF%}


#18 emin808

emin808

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

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

Отправлено 15 Декабрь 2012 - 00:03

ИзображениеИзображение

#19 support 2.0

support 2.0

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

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

Отправлено 15 Декабрь 2012 - 10:05

Просмотр сообщенияemin808 (15 Декабрь 2012 - 00:03) писал:

ИзображениеИзображение

Можно сделать следующие:
в шаблоне HTML найдите блок
<div class="click-carousel">
				 <div id="wrapper">
						 <div id="container">
								 <div><a href="#"><img src="{ASSETS_IMAGES_PATH}img1.jpg" alt="Cuba" /></a></div>
								 <div><a href="#"><img src="{ASSETS_IMAGES_PATH}img2.jpg" alt="Cuba" /></a></div>
								 <div><a href="#"><img src="{ASSETS_IMAGES_PATH}img3.jpg" alt="Cuba" /></a></div>
								 <div><a href="#"><img src="{ASSETS_IMAGES_PATH}img4.jpg" alt="Cuba" /></a></div>
								 <div><a href="#"><img src="{ASSETS_IMAGES_PATH}img5.jpg" alt="Cuba" /></a></div>
						 </div><!-- container -->
						 <img id="carouselLeft" src="{ASSETS_IMAGES_PATH}leftArr.jpg" alt="Left Arrow" />
						 <img id="carouselRight" src="{ASSETS_IMAGES_PATH}rightArr.jpg" alt="Right Arrow" />
				 </div><!-- wrapper -->
		 </div>

и после
</div><!-- wrapper -->

вставьте блок
<div style="width: 112%; padding: 0px; margin-left: -52px;moz-box-sizing: border-box;-webkit-box-sizing: border-box; box-sizing: border-box;background: url(/web/upload/assets/images/154/153295/site_bg.gif) repeat-y 43% 0;"> &nbsp; </div>

У Вас получится примерно так
<div class="click-carousel">
				 <div id="wrapper">
						 <div id="container"> 
								 <div style="left: 0px;"><a href="#"><img src="/web/upload/assets/images/154/153295/img1.jpg" alt="Cuba"></a></div>
								 <div style="left: 160px;"><a href="#"><img src="/web/upload/assets/images/154/153295/img2.jpg" alt="Cuba"></a></div>
								 <div style="left: 320px;"><a href="#"><img src="/web/upload/assets/images/154/153295/img3.jpg" alt="Cuba"></a></div>
								 <div style="left: 480px;"><a href="#"><img src="/web/upload/assets/images/154/153295/img4.jpg" alt="Cuba"></a></div>
								 <div style="left: 640px;"><a href="#"><img src="/web/upload/assets/images/154/153295/img5.jpg" alt="Cuba"></a></div>
						 </div>
						 <img id="carouselLeft" src="/web/upload/assets/images/154/153295/leftArr.jpg" alt="Left Arrow">
						 <img id="carouselRight" src="/web/upload/assets/images/154/153295/rightArr.jpg" alt="Right Arrow">
				 </div><!-- wrapper --> <div style="width: 112%; padding: 0px; margin-left: -52px;moz-box-sizing: border-box;-webkit-box-sizing: border-box; box-sizing: border-box;background: url(/web/upload/assets/images/154/153295/site_bg.gif) repeat-y 43% 0;"> &nbsp; </div>
		 </div>

Прикрепленные изображения

  • ScreenShot 28.jpg


#20 emin808

emin808

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

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

Отправлено 15 Декабрь 2012 - 11:28

ага, получилось :) ,
Благодарю Вас!

подскажите ещё пожалуйста, а можно такую деталь реализовать?! (прозрачный фон)

Изображение




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

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