|
Помощь в интеграции слайдера
|
| Alex |
Опубликовано 21.06.2013 13:08
|
Группа тестеров
Персонал сайта
Сообщений: 1265
Зарегистрирован: 07.11.2010 13:05
|
поделись слайдером от сюда www.art-sonus.ru |
|
 x1
|
| |
|
|
| jikaka |
Опубликовано 22.06.2013 13:39
|
Супер Администратор
Разработчики
Сообщений: 4840
Зарегистрирован: 26.07.2010 12:10
|
в виде аддончика или как?
|
| |
|
|
| gazovik-fc |
Опубликовано 29.07.2013 19:28
|
Начинающий
Сообщений: 43
Зарегистрирован: 07.03.2011 09:16
|
и мне или как... |
| |
|
|
| jikaka |
Опубликовано 29.07.2013 19:57
|
Супер Администратор
Разработчики
Сообщений: 4840
Зарегистрирован: 26.07.2010 12:10
|
парни, этот слайдер есть на просторах инета, отдельный аддон мне сейчас просто некогда делать
|
| |
|
|
| Zaxap |
Опубликовано 29.07.2013 23:48
|
Элита
Сообщений: 1090
Зарегистрирован: 05.09.2012 10:32
|
Как хоть этот слайдер называется?) А то тратить день пересматривания интернетов желания нет...))
Зло не дремлет, а я добрый...
|
| |
|
|
| mishqa35 |
Опубликовано 30.07.2013 10:14
|
Опытный пользователь
Сообщений: 307
Зарегистрирован: 04.01.2011 18:50
|
Плагин jQuery - слайдшоу Skitter
|
|
 x2
|
| |
|
|
| race |
Опубликовано 04.08.2013 19:11
|
Начинающий
Сообщений: 49
Зарегистрирован: 02.08.2013 18:42
|
Подскажи как ее вмонтировать в fusion ? |
| |
|
|
| util |
Опубликовано 04.08.2013 20:58
|
Ветеран
Сообщений: 666
Зарегистрирован: 13.09.2010 13:10
|
Код слайдера вставляется в файл theme.php где-то так, к примеру - ниже:
А сами картинки в Themes (Spring как пример) -> папка slide-image -> slide-1.jpg, slide-2.jpg и т.д........
Ну и сам скрипт в папке scripts в Themes тоже..
.
.
.
 Код//Header url bar
echo "<table cellpadding='0' cellspacing='0' width='1200' align='center'>\n<tr>\n";
echo "<td class='nav-header-left'></td>\n";
echo "<td class='nav-header'>".showsublinks(" ".THEME_BULLET2." ", "")."</td>\n";
echo "<td align='right' class='nav-header'>".showsubdate()."</td>\n";
echo "<td class='nav-header-right'></td>\n</tr>\n</table>\n";
//Header slider - всё что ниже - это слайдер
echo "<div class='wrapper'>\n";
echo "<div class='slider-wrapper'>\n";
echo "<div id='slider' class='nivoSlider'>\n";
echo "<img src='".THEME."slide-images/slide-1.jpg' alt='slide-1' title='' />\n";//img 1
echo "<img src='".THEME."slide-images/slide-2.jpg' alt='slide-2' title='' />\n";//img 2
echo "<img src='".THEME."slide-images/slide-3.jpg' alt='slide-3' title='' />\n";//img 3
echo "<img src='".THEME."slide-images/slide-4.jpg' alt='slide-4' title='' />\n";//img 4
echo "<img src='".THEME."slide-images/slide-5.jpg' alt='slide-5' title='' />\n";//img 5
echo "<img src='".THEME."slide-images/slide-6.jpg' alt='slide-6' title='' />\n";//img 6
echo "<img src='".THEME."slide-images/slide-7.jpg' alt='slide-7' title='' />\n";//img 7
echo "</div>\n";
echo "</div>\n";
echo "</div>\n";
echo"<script type='text/javascript' src='".THEME."scripts/jquery-1.4.3.min.js'></script>
<script src='".THEME."scripts/jquery.nivo.slider.js' type='text/javascript'></script>
<script type='text/javascript'>
$(window).load(function() {
$('#slider').nivoSlider();
});
</script> ";
//Header slider END - конец слайдера
//Content
echo "<table cellpadding='0' cellspacing='0' width='1200' class='$main_style' align='center'>\n<tr>\n";
if (LEFT) { echo "<td class='side-border-left' valign='top'>".LEFT."</td>"; }
echo "<td class='main-bg' valign='top'>".U_CENTER.CONTENT.L_CENTER."</td>";
if (RIGHT) { echo "<td class='side-border-right' valign='top'>".RIGHT."</td>"; }
echo "</tr>\n</table>\n";
.
.
у меня так, принцип один для всех слайдеров.. Думаю разберешься, ведь всё просто.
Потом поиграешь настройками, размерами..
Изменил(а) Polarfox, 05.08.2013 09:39
Счастлив не тот, кто получает подарок, а тот, кто подарок делает.
|
| |
|
|
| race |
Опубликовано 05.08.2013 12:35
|
Начинающий
Сообщений: 49
Зарегистрирован: 02.08.2013 18:42
|
util - если вам не сложно, выложите скрипты, а то у меня я подозреваю они корявые. |
| |
|
|
| util |
Опубликовано 05.08.2013 14:03
|
Ветеран
Сообщений: 666
Зарегистрирован: 13.09.2010 13:10
|
Выкладываю целиком папку темы "Spring" со слайдером.
Посмотри как что и где лежит.
Думаю разберёшься без проблем, главное не торопиться и делать осмысленно.
С твоим слайдером - всё также, только под себя настройками поиграешь, если нужно.
Имеется в виду - размеры, отступы, границы...
Удачи!
util присоединено следующее:файл:
Счастлив не тот, кто получает подарок, а тот, кто подарок делает.
|
| |
|
|
| race |
Опубликовано 08.08.2013 01:26
|
Начинающий
Сообщений: 49
Зарегистрирован: 02.08.2013 18:42
|
util написал:
Выкладываю целиком папку темы "Spring" со слайдером.
Посмотри как что и где лежит.
Думаю разберёшься без проблем, главное не торопиться и делать осмысленно.
С твоим слайдером - всё также, только под себя настройками поиграешь, если нужно.
Имеется в виду - размеры, отступы, границы...
Удачи!
Помогите вставить этот код
Код
//Header slider
echo "<div class='wrapper'>\n";
echo "<div class='slider-wrapper'>\n";
echo "<div id='slider' class='nivoSlider'>\n";
echo "<img src='/slide-images/slide-1.jpg' alt='slide-1' title='' />\n";//img 1
echo "<img src='/slide-images/slide-2.jpg' alt='slide-2' title='' />\n";//img 2
echo "<img src='/slide-images/slide-3.jpg' alt='slide-3' title='' />\n";//img 3
echo "<img src='/slide-images/slide-4.jpg' alt='slide-4' title='' />\n";//img 4
echo "<img src='/slide-images/slide-5.jpg' alt='slide-5' title='' />\n";//img 5
echo "<img src='/slide-images/slide-6.jpg' alt='slide-6' title='' />\n";//img 6
echo "<img src='/slide-images/slide-7.jpg' alt='slide-7' title='' />\n";//img 7
echo "</div>\n";
echo "</div>\n";
echo "</div>\n";
echo"<script type='text/javascript' src='/scripts/jquery-1.4.3.min.js'></script>
<script src='/scripts/jquery.nivo.slider.js' type='text/javascript'></script>
<script type='text/javascript'>
$(window).load(function() {
$('#slider').nivoSlider();
});
</script> ";
//Header slider END
центральную панель. Что бы было понятнее
Панель администратора -> Администрирование системы -> Панели -> По центру сверху [Новая панель]
и там уже делаю панельку. Хелп
Изменил(а) race, 08.08.2013 01:47
|
| |
|
|
| Pisatel |
Опубликовано 08.08.2013 13:10
|
Ветеран
Сообщений: 678
Зарегистрирован: 08.02.2013 05:51
|
 GeSHi: PHP add_to_head("<script type='text/javascript' src='".INCLUDES."scripts/jquery.nivo.slider.js' type='text/javascript'></script>"); // Закинь файл jquery.nivo.slider.js в папку includes/scripts. JQuery уже подключен, поэтому опускаем add_to_head("<script type='text/javascript'> $(window).load(function() { $('#slider').nivoSlider(); }); </script>"); opentable("Слайдер"); echo "<div class='wrapper'>\n"; echo "<div class='slider-wrapper'>\n"; echo "<div id='slider' class='nivoSlider'>\n"; // Путь к изображениям задаю исходя из того, что они находятся в папке images/slide-images/ echo "<img src='".IMAGES."/slide-images/slide-1.jpg' alt='slide-1' title='' />\n"; echo "<img src='".IMAGES."/slide-images/slide-2.jpg' alt='slide-2' title='' />\n"; echo "<img src='".IMAGES."/slide-images/slide-3.jpg' alt='slide-3' title='' />\n"; echo "<img src='".IMAGES."/slide-images/slide-4.jpg' alt='slide-4' title='' />\n"; echo "<img src='".IMAGES."/slide-images/slide-5.jpg' alt='slide-5' title='' />\n"; echo "<img src='".IMAGES."/slide-images/slide-6.jpg' alt='slide-6' title='' />\n"; echo "<img src='".IMAGES."/slide-images/slide-7.jpg' alt='slide-7' title='' />\n"; echo "</div>\n"; echo "</div>\n"; echo "</div>\n"; closetable();
Добавлено за 0.042 секунд, используя GeSHi 1.0.8.10
Подозреваю, что еще нужно будет стиль подключить. Если это так- то просто кинь стиль в папку, например, themes/имя_твоей_темы/styles/style.css, и добавь подключение вверху
GeSHi: PHP add_to_head("<link rel='stylesheet' href='".THEME."styles/style.css' type='text/css' media='screen' />");
Добавлено за 0.034 секунд, используя GeSHi 1.0.8.10
Изменил(а) Pisatel, 08.08.2013 13:21
|
| |
|
|
| race |
Опубликовано 08.08.2013 19:38
|
Начинающий
Сообщений: 49
Зарегистрирован: 02.08.2013 18:42
|
Что то не получается.
В общем делаю так:
1. вставляю в самый верх файла jquery.nivo.slider.js
Код
add_to_head("<script type='text/javascript' src='".INCLUDES."scripts/jquery.nivo.slider.js' type='text/javascript'></script>");
// Закинь файл jquery.nivo.slider.js в папку includes/scripts. JQuery уже подключен, поэтому опускаем
add_to_head("<script type='text/javascript'>
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>");
2. Это вставляю в панель
Код
opentable("Слайдер");
echo "<div class='wrapper'>\n";
echo "<div class='slider-wrapper'>\n";
echo "<div id='slider' class='nivoSlider'>\n";
// Путь к изображениям задаю исходя из того, что они находятся в папке images/slide-images/
echo "<img src='".IMAGES."/slide-images/slide-1.jpg' alt='slide-1' title='' />\n";
echo "<img src='".IMAGES."/slide-images/slide-2.jpg' alt='slide-2' title='' />\n";
echo "<img src='".IMAGES."/slide-images/slide-3.jpg' alt='slide-3' title='' />\n";
echo "<img src='".IMAGES."/slide-images/slide-4.jpg' alt='slide-4' title='' />\n";
echo "<img src='".IMAGES."/slide-images/slide-5.jpg' alt='slide-5' title='' />\n";
echo "<img src='".IMAGES."/slide-images/slide-6.jpg' alt='slide-6' title='' />\n";
echo "<img src='".IMAGES."/slide-images/slide-7.jpg' alt='slide-7' title='' />\n";
echo "</div>\n";
echo "</div>\n";
echo "</div>\n";
closetable();
3. Вставляю в самый низ в styles.css
Код
add_to_head("<link rel='stylesheet' href='".THEME."styles/style.css' type='text/css' media='screen' />");
И того у меня в файле styles.css выглядит так:
Код
add_to_head("<link rel='stylesheet' href='".THEME."styles/style.css' type='text/css' media='screen' />");
/*slider*/
.wrapper{width: 725px;height: 150px;margin: 0 auto ;margin-bottom: 5px;margin-top:5px;background-image: url(images/slide-bg.jpg);}
.slider-wrapper {width: 720px;height: 150px;margin: 0 auto ;padding: 0px 0px 0px 0px;}
.nivoSlider {position:relative;}
.nivoSlider img {position:absolute;top:0px;left:0px;}
.nivoSlider a.nivo-imageLink {position:absolute;top:0px;left:0px;width:100%;height:100%;border:0;padding:0;margin:0;z-index:60;display:none;}
.nivo-slice {display:block;position:absolute;z-index:50;height:100%;}
.nivo-caption {position:absolute;left:0px;bottom:0px;background:#000;color:#fff;width:100%;z-index:89;}
.nivo-caption p {padding:5px;margin:0;}
.nivo-caption a {display:inline !important;}
.nivo-html-caption {display:none;}
.nivo-directionNav a {position:absolute;top:55%;z-index:99;cursor:pointer;}
.nivo-prevNav {left:0px;}
.nivo-nextNav {right:0px;}
.nivo-controlNav a {display:block;width:22px;height:22px;text-indent:-9999px;border:0;margin-right:3px;float:left;}
.nivo-controlNav a.active {font-weight:bold;}
.nivo-directionNav a {display:block;width:30px;height:30px;text-indent:-9999px;border:0;}
#slider {position:relative;width:960px;height:200px;background:url(images/loading.gif) no-repeat 50% 50%;}
#slider img {position:absolute;top:0px;left:0px;display:none;}
#slider a {border:0;display:block;}
Проделав все это у меня не показывает вообще картинок как бы невидимое прозрачно место :( пусток в панели на сайте |
| |
|
|
| mishqa35 |
Опубликовано 09.08.2013 04:51
|
Опытный пользователь
Сообщений: 307
Зарегистрирован: 04.01.2011 18:50
|
Не правильно делаешь.
Вот так должна выглядеть панель
Код // 1. Подключаем js слайдера
add_to_head("<script type='text/javascript' src='".INCLUDES."scripts/jquery.nivo.slider.js' type='text/javascript'></script>");
// 2. Говорим что нужно запустить его
add_to_head("<script type='text/javascript'>
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>");
// 3. Подключаем стили слайдера (если пункт 4 находиться в файое style.css, то пропускаем п4)
add_to_head("<link rel='stylesheet' href='".THEME."styles/style.css' type='text/css' media='screen' />");
// 4. Стили слайдера
/*slider*/
add_to_head("<style type='text/css'>
.wrapper{width: 725px;height: 150px;margin: 0 auto ;margin-bottom: 5px;margin-top:5px;background-image: url(images/slide-bg.jpg);}
.slider-wrapper {width: 720px;height: 150px;margin: 0 auto ;padding: 0px 0px 0px 0px;}
.nivoSlider {position:relative;}
.nivoSlider img {position:absolute;top:0px;left:0px;}
.nivoSlider a.nivo-imageLink {position:absolute;top:0px;left:0px;width:100%;height:100%;border:0;padding:0;margin:0;z-index:60;display:none;}
.nivo-slice {display:block;position:absolute;z-index:50;height:100%;}
.nivo-caption {position:absolute;left:0px;bottom:0px;background:#000;color:#fff;width:100%;z-index:89;}
.nivo-caption p {padding:5px;margin:0;}
.nivo-caption a {display:inline !important;}
.nivo-html-caption {display:none;}
.nivo-directionNav a {position:absolute;top:55%;z-index:99;cursor:pointer;}
.nivo-prevNav {left:0px;}
.nivo-nextNav {right:0px;}
.nivo-controlNav a {display:block;width:22px;height:22px;text-indent:-9999px;border:0;margin-right:3px;float:left;}
.nivo-controlNav a.active {font-weight:bold;}
.nivo-directionNav a {display:block;width:30px;height:30px;text-indent:-9999px;border:0;}
#slider {position:relative;width:960px;height:200px;background:url(images/loading.gif) no-repeat 50% 50%;}
#slider img {position:absolute;top:0px;left:0px;display:none;}
#slider a {border:0;display:block;}
</style>");
// 5. Код самого слайдера
opentable("Слайдер");
echo "<div class='wrapper'>\n";
echo "<div class='slider-wrapper'>\n";
echo "<div id='slider' class='nivoSlider'>\n";
echo "<img src='".IMAGES."/slide-images/slide-1.jpg' alt='slide-1' title='' />\n";
echo "<img src='".IMAGES."/slide-images/slide-2.jpg' alt='slide-2' title='' />\n";
echo "<img src='".IMAGES."/slide-images/slide-3.jpg' alt='slide-3' title='' />\n";
echo "<img src='".IMAGES."/slide-images/slide-4.jpg' alt='slide-4' title='' />\n";
echo "<img src='".IMAGES."/slide-images/slide-5.jpg' alt='slide-5' title='' />\n";
echo "<img src='".IMAGES."/slide-images/slide-6.jpg' alt='slide-6' title='' />\n";
echo "<img src='".IMAGES."/slide-images/slide-7.jpg' alt='slide-7' title='' />\n";
echo "</div>\n";
echo "</div>\n";
echo "</div>\n";
closetable();
|
| |
|
|
| util |
Опубликовано 09.08.2013 17:28
|
Ветеран
Сообщений: 666
Зарегистрирован: 13.09.2010 13:10
|
Всё правильно, ещё сами картинки не забыть, и размеры-отступы-рамки-прибамбасы..
Счастлив не тот, кто получает подарок, а тот, кто подарок делает.
|
| |
|
|
| race |
Опубликовано 10.08.2013 02:44
|
Начинающий
Сообщений: 49
Зарегистрирован: 02.08.2013 18:42
|
mishqa35 написал:
Не правильно делаешь.
Вот так должна выглядеть панель
Код // 1. Подключаем js слайдера
add_to_head("<script type='text/javascript' src='".INCLUDES."scripts/jquery.nivo.slider.js' type='text/javascript'></script>");
// 2. Говорим что нужно запустить его
add_to_head("<script type='text/javascript'>
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>");
// 3. Подключаем стили слайдера (если пункт 4 находиться в файое style.css, то пропускаем п4)
add_to_head("<link rel='stylesheet' href='".THEME."styles/style.css' type='text/css' media='screen' />");
// 4. Стили слайдера
/*slider*/
add_to_head("<style type='text/css'>
.wrapper{width: 725px;height: 150px;margin: 0 auto ;margin-bottom: 5px;margin-top:5px;background-image: url(images/slide-bg.jpg);}
.slider-wrapper {width: 720px;height: 150px;margin: 0 auto ;padding: 0px 0px 0px 0px;}
.nivoSlider {position:relative;}
.nivoSlider img {position:absolute;top:0px;left:0px;}
.nivoSlider a.nivo-imageLink {position:absolute;top:0px;left:0px;width:100%;height:100%;border:0;padding:0;margin:0;z-index:60;display:none;}
.nivo-slice {display:block;position:absolute;z-index:50;height:100%;}
.nivo-caption {position:absolute;left:0px;bottom:0px;background:#000;color:#fff;width:100%;z-index:89;}
.nivo-caption p {padding:5px;margin:0;}
.nivo-caption a {display:inline !important;}
.nivo-html-caption {display:none;}
.nivo-directionNav a {position:absolute;top:55%;z-index:99;cursor:pointer;}
.nivo-prevNav {left:0px;}
.nivo-nextNav {right:0px;}
.nivo-controlNav a {display:block;width:22px;height:22px;text-indent:-9999px;border:0;margin-right:3px;float:left;}
.nivo-controlNav a.active {font-weight:bold;}
.nivo-directionNav a {display:block;width:30px;height:30px;text-indent:-9999px;border:0;}
#slider {position:relative;width:960px;height:200px;background:url(images/loading.gif) no-repeat 50% 50%;}
#slider img {position:absolute;top:0px;left:0px;display:none;}
#slider a {border:0;display:block;}
</style>");
// 5. Код самого слайдера
opentable("Слайдер");
echo "<div class='wrapper'>\n";
echo "<div class='slider-wrapper'>\n";
echo "<div id='slider' class='nivoSlider'>\n";
echo "<img src='".IMAGES."/slide-images/slide-1.jpg' alt='slide-1' title='' />\n";
echo "<img src='".IMAGES."/slide-images/slide-2.jpg' alt='slide-2' title='' />\n";
echo "<img src='".IMAGES."/slide-images/slide-3.jpg' alt='slide-3' title='' />\n";
echo "<img src='".IMAGES."/slide-images/slide-4.jpg' alt='slide-4' title='' />\n";
echo "<img src='".IMAGES."/slide-images/slide-5.jpg' alt='slide-5' title='' />\n";
echo "<img src='".IMAGES."/slide-images/slide-6.jpg' alt='slide-6' title='' />\n";
echo "<img src='".IMAGES."/slide-images/slide-7.jpg' alt='slide-7' title='' />\n";
echo "</div>\n";
echo "</div>\n";
echo "</div>\n";
closetable();
Простите меня конечно, но можно расписать куда что вставлять именно. хелп |
| |
|
|
| Pisatel |
Опубликовано 10.08.2013 16:50
|
Ветеран
Сообщений: 678
Зарегистрирован: 08.02.2013 05:51
|
GeSHi: PHP add_to_head("<link rel='stylesheet' href='".THEME."styles/style.css' type='text/css' media='screen' />"); add_to_head("<script type='text/javascript' src='".INCLUDES."scripts/jquery.nivo.slider.js' type='text/javascript'></script>"); // Закинь файл jquery.nivo.slider.js в папку includes/scripts. JQuery уже подключен, поэтому опускаем add_to_head("<script type='text/javascript'> $(window).load(function() { $('#slider').nivoSlider(); }); </script>"); opentable("Слайдер"); echo "<div class='wrapper'>\n"; echo "<div class='slider-wrapper'>\n"; echo "<div id='slider' class='nivoSlider'>\n"; // Путь к изображениям задаю исходя из того, что они находятся в папке images/slide-images/ echo "<img src='".IMAGES."/slide-images/slide-1.jpg' alt='slide-1' title='' />\n"; echo "<img src='".IMAGES."/slide-images/slide-2.jpg' alt='slide-2' title='' />\n"; echo "<img src='".IMAGES."/slide-images/slide-3.jpg' alt='slide-3' title='' />\n"; echo "<img src='".IMAGES."/slide-images/slide-4.jpg' alt='slide-4' title='' />\n"; echo "<img src='".IMAGES."/slide-images/slide-5.jpg' alt='slide-5' title='' />\n"; echo "<img src='".IMAGES."/slide-images/slide-6.jpg' alt='slide-6' title='' />\n"; echo "<img src='".IMAGES."/slide-images/slide-7.jpg' alt='slide-7' title='' />\n"; echo "</div>\n"; echo "</div>\n"; echo "</div>\n"; closetable();
Добавлено за 0.045 секунд, используя GeSHi 1.0.8.10
Это готовая панель. Итак, файл jquery.nivo.slider.js из архива, что тебе дали, закинь в site.ru/includes/scripts/
Далее. Возьми стиль, создай файл style.css и положи в папку site.ru/themes/имя_твоей_темы/styles/ такой папки, скорее всего, там нет, создай. Изображения должны лежать по пути site.ru/images/slide-images/, такой папки если нет- создай. Можешь вообще все положить в одну папку, следовательно, при подключении измени путь. |
| |
|
|
| race |
Опубликовано 10.08.2013 19:47
|
Начинающий
Сообщений: 49
Зарегистрирован: 02.08.2013 18:42
|
Спасибо вроде разобрался, идет процесс настройки под мой сайт.
Вопрос: Бывает картинка прибегает с права как убрать этот эффект? То есть вылетает из-за экрана монитора и движется по всему сайту  |
| |
|
|
| util |
Опубликовано 10.08.2013 22:18
|
Ветеран
Сообщений: 666
Зарегистрирован: 13.09.2010 13:10
|
Стили можно и в конец файла темы styles.css вставить,
поправив путь
add_to_head("<link rel='stylesheet' href='".THEME."styles/style.css' type='text/css' media='screen' />" ;
на такой
add_to_head("<link rel='stylesheet' href='".THEME."style.css' type='text/css' media='screen' />";
одной папкой меньше будет
Эффекты - в настройках в css поковырять, только не резко. %, время, px..
Счастлив не тот, кто получает подарок, а тот, кто подарок делает.
|
| |
|
|
| Pisatel |
Опубликовано 11.08.2013 06:22
|
Ветеран
Сообщений: 678
Зарегистрирован: 08.02.2013 05:51
|
Если стиль добавить в стандартный файл стиля темы, то подключение вообще не нужно, так как стиль темы уже подключен. В идеале, конечно, хорошо бы создать одну папку в infusions и все файлы закинуть туда, чтобы все было в одном месте. |
| |
|
