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


Как Добавить Вот Эту Карусель На Одну Из Страниц


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

#1 Михаил4466

Михаил4466

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

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

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

Друзья првет как добавить вот эту карусель http://www.maaki.com/, на страницу тренировки у меня на сайте?

Изображение

#2 Сake

Сake

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

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

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

Вам необходимо скачать архив https://github.com/t...ooth-Div-Scroll далее загрузить себе такие файлы как "jquery.kinetic.js", "jquery.mousewheel.min.js", "jquery.smoothDivScroll-1.3.js", "smoothDivScroll.css", и все изображения из папки images в разделе редактора тем.

После необходимо перед строкой в шаблоне "HTML"

<script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>

вставить

<link rel="stylesheet" href="{ASSETS_STYLES_PATH}smoothDivScroll.css" type="text/css" />
<script type="text/javascript" src="{ASSETS_JS_PATH}jquery.kinetic.js"></script>
<script type="text/javascript" src="{ASSETS_JS_PATH}jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="{ASSETS_JS_PATH}jquery.smoothDivScroll-1.3.js"></script>

далее в файле стилей "smoothDivScroll.css" необходимо заменить все пуки к изображениям. Далее необходимо в файл main.js вставить

$(document).ready(function () {
  $("#makeMeScrollable").smoothDivScroll({
   mousewheelScrolling: "allDirections",
   manualContinuousScrolling: true,
   autoScrollingMode: "onStart"
  });
});

а в шаблон где будет отображаться данный слайдер вставить

<div id="makeMeScrollable">
  <img src="images/demo/field.jpg" alt="Field" id="field" />
  <img src="images/demo/gnome.jpg" alt="Gnome" id="gnome" />
  <img src="images/demo/pencils.jpg" alt="Pencils" id="pencils" />
  <img src="images/demo/golf.jpg" alt="Golf" id="golf" />
  <img src="images/demo/river.jpg" alt="River" id="river" />
  <img src="images/demo/train.jpg" alt="Train" id="train" />
  <img src="images/demo/leaf.jpg" alt="Leaf" id="leaf" />
  <img src="images/demo/dog.jpg" alt="Dog" id="dog" />
</div>

с указанием корректных путей к изображениям.

#3 Михаил4466

Михаил4466

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

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

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

а как именно ее разместить на вот этой странице: http://nse-project.c...page/Тренировки

#4 Koderhan

Koderhan

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

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

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

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

а как именно ее разместить на вот этой странице:
Для этого вы просто можете отредактировать страницу в разделе Сайт-> Страницы.
Нажать на "Источник".
И вставить туда код:

<div id="makeMeScrollable">
  <img src="images/demo/field.jpg" alt="Field" id="field" />
  <img src="images/demo/gnome.jpg" alt="Gnome" id="gnome" />
  <img src="images/demo/pencils.jpg" alt="Pencils" id="pencils" />
  <img src="images/demo/golf.jpg" alt="Golf" id="golf" />
  <img src="images/demo/river.jpg" alt="River" id="river" />
  <img src="images/demo/train.jpg" alt="Train" id="train" />
  <img src="images/demo/leaf.jpg" alt="Leaf" id="leaf" />
  <img src="images/demo/dog.jpg" alt="Dog" id="dog" />
</div>
Не забывайте указывать корректные пути до файлов.

#5 Михаил4466

Михаил4466

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

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

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

далее в файле стилей "smoothDivScroll.css" необходимо заменить все пуки к изображениям. Далее необходимо в файл main.js вставить


$(document).ready(function () {
  $("#makeMeScrollable").smoothDivScroll({
   mousewheelScrolling: "allDirections",
   manualContinuousScrolling: true,
   autoScrollingMode: "onStart"
  });
});
к каким изображениям именно нужно заменить пути? в файл main.js куда именно вставить? в любое мето?

#6 Taisia

Taisia

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

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

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

в файл main.js вставить в любое место

заменить пути в файле

smoothDivScroll.css

означает изменить путь в коде например ниже

in Internet Explorer 6. */
background-image: url(../images/big_transparent.gif);
background-repeat: repeat;
background-position: center center;
position: absolute;
z-index: 200;
left: 0;
/* The first url is for Firefox and other browsers, the second is for Internet Explorer */
cursor: url(../images/cursors/cursor_arrow_left.png), url(../images/cursors/cursor_arrow_left.cur),w-resize;
}

тут заменить

background-image: url(../images/big_transparent.gif);



когда вы загрузите картинки из архива путь к ним будет иметь вид

background: url({ASSETS_IMAGES_PATH}header_page.png)

Где header_page.png это имя изображения пути к которому меняем

#7 Михаил4466

Михаил4466

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

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

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

Большое спасибо , все понял ! очень хорошо объяснили!!  как сделаю отпишусь.

#8 Михаил4466

Михаил4466

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

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

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

Друзья привет, я попытался установить но все получилось очень криво:
1)с левой стороны нет стрелок и он не прокручивает при наведение на левую сторону
2) как то появляется фотография внизу , т.е в два ряда
3) стрелка уходит куда то нереально вниз и занимает большую площадь кликабельности чем размер фото

можете поробывать поюзать на страничке и сами все поймете: http://nse-project.c...page/Тренировки

как это все привести в божеский вид?
Изображение

#9 Михаил4466

Михаил4466

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

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

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

Вроде все получилось хорошо, кроме двух вещей, вот как их исправить?

1) с левой стороны нет большой стрелки
2) когда наводишь на левую сторону начинает с бешеной скорость прокручивать, не так как с правой
3)и вот еще вопрос какой именно код изменяет скорость прокрутки когда наводишь на правую или левую сторону?
4)как сделать чтобы карусель сама двигалась когда открывается страница, но чтобы двигалась медленно?

Изображение

#10 Сake

Сake

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

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

Отправлено 25 Май 2013 - 02:57

Добавьте в ваш файл стилей main.css

#makeMeScrollable {
height: 330px;
position: relative;
width: 100%;
}

далее в файле стилей smoothDivScroll.css найдите(в самом конце) и удалите

div.scrollingHotSpotLeft {
min-width: 75px;
width: 10%;
height: 24%;
background-image: url(http://design.nse-project.com/big_transparent.gif?8084);
background-repeat: repeat;
background-position: center center;
position: absolute;
z-index: 200;
left: 300px;
cursor: url(http://design.nse-project.com/cursor_arrow_left.png?9717), url(http://design.nse-project.com/cursor_arrow_left.cur?9717),w-resize;
}

далее найдите

div.scrollingHotSpotRight {
min-width: 75px;
width: 10%;
height: 24%;
background-image: url(http://design.nse-project.com/big_transparent.gif?8084);
background-repeat: repeat;
background-position: center center;
position: absolute;
z-index: 200;
right: 0;
cursor: url(http://design.nse-project.com/cursor_arrow_right.png?9717), url(http://design.nse-project.com/cursor_arrow_right.cur?9717),e-resize;
}

и замените на

div.scrollingHotSpotRight {
min-width: 75px;
width: 10%;
height: 100%;
background-image: url(http://design.nse-project.com/big_transparent.gif?8084);
background-repeat: repeat;
background-position: center center;
position: absolute;
z-index: 200;
right: 0;
cursor: url(http://design.nse-project.com/cursor_arrow_right.png?9717), url(http://design.nse-project.com/cursor_arrow_right.cur?9717),e-resize;
}

в самом начале файла стилей найдите и удалите ""

#11 Михаил4466

Михаил4466

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

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

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

Сake,  большое спасибо!!! и всем кто помогал!!! Вы супер молодцы!! Хороших вам выходных!!!

#12 Konlino

Konlino

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 89 сообщений
  • ГородХабаровск

Отправлено 02 Ноябрь 2016 - 11:54

Добрый день! Подскажите, пожалуйста, как разместить стандартную карусель "Хиты продаж" из шаблона "Осень"  на произвольной странице?

#13 Mr.Nito

Mr.Nito

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

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

Отправлено 02 Ноябрь 2016 - 13:49

Просмотр сообщенияKonlino (02 Ноябрь 2016 - 11:54) писал:

Добрый день! Подскажите, пожалуйста, как разместить стандартную карусель "Хиты продаж" из шаблона "Осень"  на произвольной странице?

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




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

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