Чат сообщества
   | |
| Модератор форума: JonMagon |
| Сообщество uCoz Вебмастеру JavaScript, Flash и прочие технологии Установка слайдера |
| Установка слайдера |
|
Добрый день.
Пытаюсь установить простенький слайдер, взятый отсюда Файл с css и js залиты отдельно в ФМ, настройки для слайдера вписаны внизу. На отдельно открытой странице он отображается и работает нормально, а вот при просмотре слайдер расползается. Помогите поправить  |
|
Всем доброго
Помогите пжл установить слайдер в КОНТЕЙНЕР. Уже сколько вариантов перепробовал все не получается Может у кого есть рабочая версия. Мне нужен слайдер без кнопок и без дополнительного оформления, просто что бы автоматом пролистывал картинки без перезагрузки страницы ( в КОНТЕЙНЕРЕ, т.е. где расположено вертикальное меню. под ним). Желательно поясните что и куда прописывать. Один из тех вариантов что я пробовал установить. У меня в контейнере не работает. На странице устанавливать не пробовал, т.к. у меня не эта задача. <div class="slidshow"> <img src="images/first.jpg"> <img src="images/second.jpg"> <img src="images/third.jpeg"> </div> .slidshow { position:relative; } .slidshow img { position:absolute; left:0; top:0; width:500px; height:375px; } <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script> $(function(){ $('.slidshow img:gt(0)').hide(); setInterval(function(){ $('.slidshow :first-child').fadeOut() .next('img').fadeIn() .end().appendTo('.slidshow');},2000); }); |
|
ххх7307, Не хватает слешей, отключите системный jQuery или не ставьте - jqueryjs.googlecode.com/files/jquery-1.3.2.js
<div class="slidshow"> <img src=" / images/first.jpg"> <img src="/images/second.jpg"> <img src="/images/third.jpeg"> </div> |
|
Цитата Miss_Esq (  )Не хватает слешей, отключите системный jQuery или не ставьте - jqueryjs.googlecode.com/files/jquery-1.3.2.js <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script> путь к файлам я указывал полностью <img src="http://.........jpg"> может я не туда все это дело пропмсывал.... Вы не могли бы расписать что и куда вставлять Буду благодарен за помощь |
|
Доброго дня!
Для новостной колонки решил поставить слайдер. Посоветовали взять тут. 1. Скачал небольшой архив. 2. содержимое архива залил через файловый менеджер к себе на сайт. 3. Далее беда. 4. На ресурсе, где скачал исходник слайдера представлены краткие инструкции по настройке слайдера, но беда в том что я не понимаю. 5. Разметка HTMLПриведен пример из Демо 1 CSS javascript Подключаем jQuery, плагин easing и плагин Lof JSliderNews: Далее нужно инициализировать плагин: Опции По умолчанию настройки у плагина стоят такие: Вот собственно и все, что там было. Пожалуйста объясните, как мне с этим совладать. Заранее благодарен за ответ. На рабочем столе папка, название "мысль". Открыл - пусто!
|
|
Тихий_Лис,
css записать в css шаблон сайта в конец ... Красное не писать, остальное так ... Цитата <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script language="javascript" type="text/javascript" src="/js/jquery.easing.js"></script> <script language="javascript" type="text/javascript" src="/js/script.js"></script> Это перед html слайдера записать .. Цитата <script type="text/javascript"> $(document).ready( function(){ // кнопки вперед и назад для слайдов var buttons = { previous:$('#jslidernews1 .button-previous') , next:$('#jslidernews1 .button-next') }; $('#jslidernews1').lofJSidernews( { interval : 4000, direction : 'opacitys', easing : 'easeInOutExpo', duration : 1200, auto : true, maxItemDisplay : 4, navPosition : 'horizontal', // horizontal navigatorHeight : 32, navigatorWidth : 80, mainWidth : 980, buttons : buttons } ); }); </script> |
|
хороший кстати 1й слайдер..http://yellowlemon.net/javascript/galerei-i-slaydery/prostoy-slayder-kartinok-tinyslider-2
действительно, весьма легкий понятный и простой а вот 2й вариант не очень понравился.. куча кода а отличий от первого почти нет - как я понял Thumbnails вместо кубиков?  WWW.DOGICA.COM / WWW.DOGICA.ORG Сообщение отредактировал GEMMY - Среда, 19 Фев 2014, 21:45:16
|
|
Прислушавшись к описанию самого первого слайдера, взял его.
Поставил в тело страницы с новостями. Спойлер<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>$TITLE_BAR$ - $SITE_NAME$</title> <?$META_DESCRIPTION$?> <link type="text/css" rel="StyleSheet" href="/_st/my.css" /> </head> <body style="background:url('/.s/t/984/1.gif') #191919; margin:0px; padding:0px;"> $ADMIN_BAR$ <table cellpadding="0" cellspacing="0" border="0" width="100%"> <tr><td align="right" width="5%" style="background:url('/.s/t/984/2.gif') right repeat-y;"><img src="/.s/t/984/2.gif" border="0"></td> <td width="90%" valign="top" style="border-bottom:1px solid #000000;"> $GLOBAL_AHEADER$ <table cellpadding="0" cellspacing="0" border="0" width="100%" style="border-top:1px solid #494949;border-bottom:1px solid #494949;"><tr><td valign="top" style="border:1px solid #1A1A1A;background:#2C2C2C;"> <!-- <middle> --> <table border="0" cellpadding="0" cellspacing="2" width="100%"> <tr> <td valign="top" style="width:180px;"> $GLOBAL_CLEFTER$ </td> <td valign="top"> <script type="text/javascript"> var slideshow=new TINY.slider.slide('slideshow',{ id:'slider', auto:4, resume:false, vertical:false, navid:'pagination', activeclass:'current', position:0, rewind:false, elastic:true, left:'slideleft', right:'slideright' }); </script> <link rel="stylesheet" type="text/css" href="http://arsenal54.ucoz.ru/tinyslider2/style.css" /> <script type="text/javascript" src="http://arsenal54.ucoz.ru/tinyslider2/script.js"></script> <div id="wrapper"> <div id="container"> <div class="sliderbutton" id="slideleft" onclick="slideshow.move(-1)"></div> <div id="slider"> <ul> <li><img src="http://arsenal54.ucoz.ru/tinyslider2/photos/1.jpg" width="558" height="235" alt="Image One" /></li> <li><img src="http://arsenal54.ucoz.ru/tinyslider2/photos/2.jpg" width="558" height="235" alt="Image Two" /></li> <li><img src="http://arsenal54.ucoz.ru/tinyslider2/photos/3.jpg" width="558" height="235" alt="Image Three" /></li> <li><img src="http://arsenal54.ucoz.ru/tinyslider2/photos/4.jpg" width="558" height="235" alt="Image Four" /></li> </ul> </div> <div class="sliderbutton" id="slideright" onclick="slideshow.move(1)"></div> <ul id="pagination" class="pagination"> <li onclick="slideshow.pos(0)"></li><li onclick="slideshow.pos(1)"></li><li onclick="slideshow.pos(2)"></li><li onclick="slideshow.pos(3)"></li> </ul> </div> </div> <table border="0" cellpadding="0" cellspacing="0" width="100%" style="border:1px solid #494949;"><tr><td style="background:#3D3D3D;padding:10px;border:1px solid #262626;"><!-- <body> --><a href="$HOME_PAGE_LINK$"><!--<s5176>-->Главная<!--</s>--></a> » $DATE_BAR$ <hr /> $BODY$<!-- </body> --></td></tr></table> </td> <td valign="top" style="width:180px;"> $GLOBAL_DRIGHTER$ </td> </tr> </table> <!-- </middle> --> </td></tr></table> $GLOBAL_BFOOTER$ </td> <td align="left" width="5%" style="background:url('/.s/t/984/2.gif') left repeat-y;"><img src="/.s/t/984/2.gif" border="0"></td> </td></tr></table> </body> </html> Но беда, вот что получилось смотрим. Как видите, бешенные рамки и сам слайдер не работает, а как отдельная вставка со скролами. Вот CSS настройки по нему. Подскажите, что сделано неверно. Буду очень признателен. На рабочем столе папка, название "мысль". Открыл - пусто!
|
|
Цитата Тихий_Лис ( )Подскажите, что сделано неверно. Буду очень признателен. Вот это уберите с тела Код <script type="text/javascript" src="http://arsenal54.ucoz.ru/tinyslider2/script.js"></script> <link rel="stylesheet" type="text/css" href="http://arsenal54.ucoz.ru/tinyslider2/style.css" /> <script type="text/javascript"> $(document).ready( function(){ // кнопки вперед и назад для слайдов var buttons = { previous:$('#jslidernews1 .button-previous') , next:$('#jslidernews1 .button-next') }; $('#jslidernews1').lofJSidernews( { interval : 4000, direction : 'opacitys', easing : 'easeInOutExpo', duration : 1200, auto : true, maxItemDisplay : 4, navPosition : 'horizontal', // horizontal navigatorHeight : 32, navigatorWidth : 80, mainWidth : 980, buttons : buttons } ); };); </script> и поставте сюда Цитата <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>$TITLE_BAR$ - $SITE_NAME$</title> <?$META_DESCRIPTION$?> <link type="text/css" rel="StyleSheet" href="/_st/my.css" /> <link rel="stylesheet" type="text/css" href="http://arsenal54.ucoz.ru/tinyslider2/style.css" /> </head> <script type="text/javascript" src="http://arsenal54.ucoz.ru/tinyslider2/script.js"></script> <script type="text/javascript"> $(document).ready( function(){ // кнопки вперед и назад для слайдов var buttons = { previous:$('#jslidernews1 .button-previous') , next:$('#jslidernews1 .button-next') }; $('#jslidernews1').lofJSidernews( { interval : 4000, direction : 'opacitys', easing : 'easeInOutExpo', duration : 1200, auto : true, maxItemDisplay : 4, navPosition : 'horizontal', // horizontal navigatorHeight : 32, navigatorWidth : 80, mainWidth : 980, buttons : buttons } ); };); </script> <body style="background:url('/.s/t/984/1.gif') #191919; margin:0px; padding:0px;"> $ADMIN_BAR$ Вот инструкция по установке такого же слайдера 道德經 Помощь по системе
Сообщение отредактировал @katy@ - Пятница, 21 Фев 2014, 07:46:10
|
|
Тихий_Лис, Извините не правильно выразилась. Вообщем уберите. Вы чё из меня дуру делаете. Вы дали код страницы //forum.ucoz.ru/forum/38-62345-1154552-16-1392949371
道德經 Помощь по системе
Сообщение отредактировал @katy@ - Пятница, 21 Фев 2014, 07:51:07
|
|
Цитата @katy@ ( )Тихий_Лис, Вы чё из меня дуру делаете. Вы дали код страницы //forum.ucoz.ru/forum/38-62345-1154552-16-1392949371 Все верно, но то что вы просите убрать, этого нет. Сравните. Я не выдумываю На рабочем столе папка, название "мысль". Открыл - пусто!
|
|
Цитата Тихий_Лис ( )Все верно, но то что вы просите убрать, этого нет. Сравните. Я не выдумываю Тихий_Лис, Ну значит я дебильная Читайте инструкцию по установке http://manual.ucoz.net/board/10-2-0-462 道德經 Помощь по системе
|
|
Цитата @katy@ ( )Тихий_Лис, Ну значит я дебильная Читайте инструкцию по установке http://manual.ucoz.net/board/10-2-0-462 Стойте))))) извините недопонимание вышло. Вы говорите по сообщению что в самом верху, а я вам доказываю по сообщению #8 по нему можете объяснить? На рабочем столе папка, название "мысль". Открыл - пусто!
|
|
Цитата Тихий_Лис ( )Стойте))))) извините недопонимание вышло. Вы говорите по сообщению что в самом верху, а я вам доказываю по сообщению #8 по нему можете объяснить? Тихий_Лис,Я вам обьяснила по сообщению 8 Вы чё тут тень на плетень наводите. Спрашивайте там где брали слайдер. Пусть они вам обьясняют. Вы слайдер сдесь брали ? Нет. Я допустим не знаю как установить. Всё. 道德經 Помощь по системе
Сообщение отредактировал @katy@ - Пятница, 21 Фев 2014, 08:41:56
|
| |||