1
Как Добавить Вот Эту Карусель На Одну Из Страниц
Автор Михаил4466, 22 мая 2013 17:18
Сообщений в теме: 12
#1
Отправлено 22 Май 2013 - 17:18
Друзья првет как добавить вот эту карусель http://www.maaki.com/, на страницу тренировки у меня на сайте?
#2
Отправлено 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"
вставить
далее в файле стилей "smoothDivScroll.css" необходимо заменить все пуки к изображениям. Далее необходимо в файл main.js вставить
а в шаблон где будет отображаться данный слайдер вставить
с указанием корректных путей к изображениям.
После необходимо перед строкой в шаблоне "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
Отправлено 23 Май 2013 - 14:04
а как именно ее разместить на вот этой странице: http://nse-project.c...page/Тренировки
#4
Отправлено 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
Отправлено 23 Май 2013 - 17:30
далее в файле стилей "smoothDivScroll.css" необходимо заменить все пуки к изображениям. Далее необходимо в файл main.js вставить
$(document).ready(function () {
$("#makeMeScrollable").smoothDivScroll({
mousewheelScrolling: "allDirections",
manualContinuousScrolling: true,
autoScrollingMode: "onStart"
});
});
к каким изображениям именно нужно заменить пути? в файл main.js куда именно вставить? в любое мето?
$(document).ready(function () {
$("#makeMeScrollable").smoothDivScroll({
mousewheelScrolling: "allDirections",
manualContinuousScrolling: true,
autoScrollingMode: "onStart"
});
});
к каким изображениям именно нужно заменить пути? в файл main.js куда именно вставить? в любое мето?
#6
Отправлено 23 Май 2013 - 17:47
в файл main.js вставить в любое место
заменить пути в файле
smoothDivScroll.css
означает изменить путь в коде например ниже
тут заменить
когда вы загрузите картинки из архива путь к ним будет иметь вид
Где header_page.png это имя изображения пути к которому меняем
заменить пути в файле
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
Отправлено 23 Май 2013 - 18:02
Большое спасибо , все понял ! очень хорошо объяснили!! как сделаю отпишусь.
#8
Отправлено 24 Май 2013 - 10:59
Друзья привет, я попытался установить но все получилось очень криво:
1)с левой стороны нет стрелок и он не прокручивает при наведение на левую сторону
2) как то появляется фотография внизу , т.е в два ряда
3) стрелка уходит куда то нереально вниз и занимает большую площадь кликабельности чем размер фото
можете поробывать поюзать на страничке и сами все поймете: http://nse-project.c...page/Тренировки
как это все привести в божеский вид?
1)с левой стороны нет стрелок и он не прокручивает при наведение на левую сторону
2) как то появляется фотография внизу , т.е в два ряда
3) стрелка уходит куда то нереально вниз и занимает большую площадь кликабельности чем размер фото
можете поробывать поюзать на страничке и сами все поймете: http://nse-project.c...page/Тренировки
как это все привести в божеский вид?
#9
Отправлено 24 Май 2013 - 17:34
Вроде все получилось хорошо, кроме двух вещей, вот как их исправить?
1) с левой стороны нет большой стрелки
2) когда наводишь на левую сторону начинает с бешеной скорость прокручивать, не так как с правой
3)и вот еще вопрос какой именно код изменяет скорость прокрутки когда наводишь на правую или левую сторону?
4)как сделать чтобы карусель сама двигалась когда открывается страница, но чтобы двигалась медленно?
1) с левой стороны нет большой стрелки
2) когда наводишь на левую сторону начинает с бешеной скорость прокручивать, не так как с правой
3)и вот еще вопрос какой именно код изменяет скорость прокрутки когда наводишь на правую или левую сторону?
4)как сделать чтобы карусель сама двигалась когда открывается страница, но чтобы двигалась медленно?
#10
Отправлено 25 Май 2013 - 02:57
Добавьте в ваш файл стилей main.css
далее в файле стилей smoothDivScroll.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; }
в самом начале файла стилей найдите и удалите "ÃÂïÃÂûÃÂÿ"
#12
Отправлено 02 Ноябрь 2016 - 11:54
Добрый день! Подскажите, пожалуйста, как разместить стандартную карусель "Хиты продаж" из шаблона "Осень" на произвольной странице?
#13
Отправлено 02 Ноябрь 2016 - 13:49
Konlino (02 Ноябрь 2016 - 11:54) писал:
Добрый день! Подскажите, пожалуйста, как разместить стандартную карусель "Хиты продаж" из шаблона "Осень" на произвольной странице?
Здравствуйте.
К сожалению товары из блока Хиты продаж доступны только на главной странице, вывести их на произвольной странице не получится.
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных