Забыли пароль?
Запросите новый здесь.

Автор темы: FILON
ID темы: 1700
Информация:
Тема содержит 26 сообщения, была просмотрена 21402 раз.  Имеются прикрепленные файлы.
Просмотр темы
PHP-Fusion Russia » Поддержка 7 версии » Вопросы новичков
 Распечатать тему
Помощь в интеграции слайдера
Alex
поделись слайдером от сюда www.art-sonus.ru
x1
 
Web
jikaka
в виде аддончика или как?
 
Web
gazovik-fc
и мне или как...
 
jikaka
парни, этот слайдер есть на просторах инета, отдельный аддон мне сейчас просто некогда делать
 
Web
Zaxap
Как хоть этот слайдер называется?) А то тратить день пересматривания интернетов желания нет...))
Зло не дремлет, а я добрый...
 
mishqa35
Плагин jQuery - слайдшоу Skitter
x2
 
Web
race



Подскажи как ее вмонтировать в fusion ?
 
util
Код слайдера вставляется в файл 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
Счастлив не тот, кто получает подарок, а тот, кто подарок делает.
 
Web
race
util - если вам не сложно, выложите скрипты, а то у меня я подозреваю они корявые.
 
util
Выкладываю целиком папку темы "Spring" со слайдером.
Посмотри как что и где лежит.
Думаю разберёшься без проблем, главное не торопиться и делать осмысленно.

С твоим слайдером - всё также, только под себя настройками поиграешь, если нужно.
Имеется в виду - размеры, отступы, границы...
Удачи!
util присоединено следующее:файл:
spring.zip [234.98кБ / 329 Загрузки]

Счастлив не тот, кто получает подарок, а тот, кто подарок делает.
 
Web
race
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
Загрузить источник  GeSHi: PHP
  1. add_to_head("<script type='text/javascript' src='".INCLUDES."scripts/jquery.nivo.slider.js' type='text/javascript'></script>");
  2. // Закинь файл jquery.nivo.slider.js в папку includes/scripts. JQuery уже подключен, поэтому опускаем
  3.  
  4. add_to_head("<script type='text/javascript'>
  5. $(window).load(function() {
  6. $('#slider').nivoSlider();
  7. });
  8. </script>");
  9.  
  10. opentable("Слайдер");
  11. echo "<div class='wrapper'>\n";
  12. echo "<div class='slider-wrapper'>\n";
  13. echo "<div id='slider' class='nivoSlider'>\n";
  14. // Путь к изображениям задаю исходя из того, что они находятся в папке images/slide-images/
  15.  
  16. echo "<img src='".IMAGES."/slide-images/slide-1.jpg' alt='slide-1' title='' />\n";
  17. echo "<img src='".IMAGES."/slide-images/slide-2.jpg' alt='slide-2' title='' />\n";
  18. echo "<img src='".IMAGES."/slide-images/slide-3.jpg' alt='slide-3' title='' />\n";
  19. echo "<img src='".IMAGES."/slide-images/slide-4.jpg' alt='slide-4' title='' />\n";
  20. echo "<img src='".IMAGES."/slide-images/slide-5.jpg' alt='slide-5' title='' />\n";
  21. echo "<img src='".IMAGES."/slide-images/slide-6.jpg' alt='slide-6' title='' />\n";
  22. echo "<img src='".IMAGES."/slide-images/slide-7.jpg' alt='slide-7' title='' />\n";
  23. echo "</div>\n";
  24. echo "</div>\n";
  25. echo "</div>\n";
  26. closetable();
Добавлено за 0.033 секунд, используя GeSHi 1.0.8.10

Подозреваю, что еще нужно будет стиль подключить. Если это так- то просто кинь стиль в папку, например, themes/имя_твоей_темы/styles/style.css, и добавь подключение вверху
Загрузить источник  GeSHi: PHP
  1. add_to_head("<link rel='stylesheet' href='".THEME."styles/style.css' type='text/css' media='screen' />");
  2.  
Добавлено за 0.026 секунд, используя GeSHi 1.0.8.10

Изменил(а) Pisatel, 08.08.2013 13:21
 
Web
race
Что то не получается.
В общем делаю так:
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
Не правильно делаешь.
Вот так должна выглядеть панель

Скачать исходники  Код
// 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();



 
Web
util
Всё правильно, ещё сами картинки не забыть, и размеры-отступы-рамки-прибамбасы..
Счастлив не тот, кто получает подарок, а тот, кто подарок делает.
 
Web
race
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
Загрузить источник  GeSHi: PHP
  1. add_to_head("<link rel='stylesheet' href='".THEME."styles/style.css' type='text/css' media='screen' />");
  2. add_to_head("<script type='text/javascript' src='".INCLUDES."scripts/jquery.nivo.slider.js' type='text/javascript'></script>");
  3. // Закинь файл jquery.nivo.slider.js в папку includes/scripts. JQuery уже подключен, поэтому опускаем
  4.  
  5. add_to_head("<script type='text/javascript'>
  6. $(window).load(function() {
  7. $('#slider').nivoSlider();
  8. });
  9. </script>");
  10.  
  11. opentable("Слайдер");
  12. echo "<div class='wrapper'>\n";
  13. echo "<div class='slider-wrapper'>\n";
  14. echo "<div id='slider' class='nivoSlider'>\n";
  15. // Путь к изображениям задаю исходя из того, что они находятся в папке images/slide-images/
  16.  
  17. echo "<img src='".IMAGES."/slide-images/slide-1.jpg' alt='slide-1' title='' />\n";
  18. echo "<img src='".IMAGES."/slide-images/slide-2.jpg' alt='slide-2' title='' />\n";
  19. echo "<img src='".IMAGES."/slide-images/slide-3.jpg' alt='slide-3' title='' />\n";
  20. echo "<img src='".IMAGES."/slide-images/slide-4.jpg' alt='slide-4' title='' />\n";
  21. echo "<img src='".IMAGES."/slide-images/slide-5.jpg' alt='slide-5' title='' />\n";
  22. echo "<img src='".IMAGES."/slide-images/slide-6.jpg' alt='slide-6' title='' />\n";
  23. echo "<img src='".IMAGES."/slide-images/slide-7.jpg' alt='slide-7' title='' />\n";
  24. echo "</div>\n";
  25. echo "</div>\n";
  26. echo "</div>\n";
  27. closetable();
Добавлено за 0.038 секунд, используя GeSHi 1.0.8.10

Это готовая панель. Итак, файл jquery.nivo.slider.js из архива, что тебе дали, закинь в site.ru/includes/scripts/
Далее. Возьми стиль, создай файл style.css и положи в папку site.ru/themes/имя_твоей_темы/styles/ такой папки, скорее всего, там нет, создай. Изображения должны лежать по пути site.ru/images/slide-images/, такой папки если нет- создай. Можешь вообще все положить в одну папку, следовательно, при подключении измени путь.
 
Web
race
Спасибо вроде разобрался, идет процесс настройки под мой сайт.
Вопрос: Бывает картинка прибегает с права как убрать этот эффект? То есть вылетает из-за экрана монитора и движется по всему сайту ab
 
util
Стили можно и в конец файла темы styles.css вставить,
поправив путь

add_to_head("<link rel='stylesheet' href='".THEME."styles/style.css' type='text/css' media='screen' />"ad;

на такой

add_to_head("<link rel='stylesheet' href='".THEME."style.css' type='text/css' media='screen' />"ad;

одной папкой меньше будетab

Эффекты - в настройках в css поковырять, только не резко. %, время, px..
Счастлив не тот, кто получает подарок, а тот, кто подарок делает.
 
Web
Pisatel
Если стиль добавить в стандартный файл стиля темы, то подключение вообще не нужно, так как стиль темы уже подключен. В идеале, конечно, хорошо бы создать одну папку в infusions и все файлы закинуть туда, чтобы все было в одном месте.
 
Web

Поделиться этой темой
Социальные закладки: Vkontakte Odnoklassniki Mail.ru Facebook Google Tweet This
URL:
BBcode:
HTML:

Перейти на форум: