Страница 1 из 512345»
Модератор форума: JonMagon 
Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » Установка слайдера
Установка слайдера
zzz408
Сообщений: 5
Репутация: 2

Сообщение # 1 | 14:41:22
Добрый день.

Пытаюсь установить простенький слайдер, взятый отсюда
Файл с css и js залиты отдельно в ФМ, настройки для слайдера вписаны внизу.
На отдельно открытой странице он отображается и работает нормально, а вот при просмотре слайдер расползается.

Помогите поправить sad
ххх7307
Сообщений: 15
Репутация: 11

Сообщение # 2 | 18:54:43
Всем доброго

Помогите пжл установить слайдер в КОНТЕЙНЕР. Уже сколько вариантов перепробовал все не получается sad Может у кого есть рабочая версия.

Мне нужен слайдер без кнопок и без дополнительного оформления, просто что бы автоматом пролистывал картинки без перезагрузки страницы ( в КОНТЕЙНЕРЕ, т.е. где расположено вертикальное меню. под ним).

Желательно поясните что и куда прописывать.

Один из тех вариантов что я пробовал установить. У меня в контейнере не работает. На странице устанавливать не пробовал, т.к. у меня не эта задача.

<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);
});
Miss_Esq
Сообщений: 13865
Репутация: 4160
Уровень замечаний:

Сообщение # 3 | 19:03:49
ххх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>

ххх7307
Сообщений: 15
Репутация: 11

Сообщение # 4 | 19:21:01
Цитата 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">

может я не туда все это дело пропмсывал....

Вы не могли бы расписать что и куда вставлять

Буду благодарен за помощь
Тихий_Лис
Сообщений: 5
Репутация: 0

Сообщение # 5 | 07:00:37
Доброго дня!
Для новостной колонки решил поставить слайдер. Посоветовали взять тут.
1. Скачал небольшой архив.
2. содержимое архива залил через файловый менеджер к себе на сайт.
3. Далее беда.
4. На ресурсе, где скачал исходник слайдера представлены краткие инструкции по настройке слайдера, но беда в том что я не понимаю.
5.
Разметка HTMLПриведен пример из Демо 1

CSS


javascript
Подключаем jQuery, плагин easing и плагин Lof JSliderNews:

Далее нужно инициализировать плагин:


Опции
По умолчанию настройки у плагина стоят такие:


Вот собственно и все, что там было. Пожалуйста объясните, как мне с этим совладать.
Заранее благодарен за ответ.

На рабочем столе папка, название "мысль". Открыл - пусто!
Miss_Esq
Сообщений: 13865
Репутация: 4160
Уровень замечаний:

Сообщение # 6 | 07:22:24
Тихий_Лис,
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>

Dogica
Сообщений: 1230
Репутация: 352
Уровень замечаний:

Сообщение # 7 | 21:41:42
хороший кстати 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
Тихий_Лис
Сообщений: 5
Репутация: 0

Сообщение # 8 | 06:22:51
Прислушавшись к описанию самого первого слайдера, взял его.
Поставил в тело страницы с новостями.
Спойлер<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 настройки по нему.


Подскажите, что сделано неверно. Буду очень признателен.

На рабочем столе папка, название "мысль". Открыл - пусто!
@katy@
Сообщений: 1808
Репутация: 466
Уровень замечаний:

Сообщение # 9 | 07:03:50
Цитата Тихий_Лис ()
Подскажите, что сделано неверно. Буду очень признателен.

Вот это уберите с тела
Код
<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
Тихий_Лис
Сообщений: 5
Репутация: 0

Сообщение # 10 | 07:44:29
Цитата @katy@ ()
Вот это уберите с тела

но этого нет в теле %)

На рабочем столе папка, название "мысль". Открыл - пусто!
@katy@
Сообщений: 1808
Репутация: 466
Уровень замечаний:

Сообщение # 11 | 07:48:25
Тихий_Лис, Извините не правильно выразилась. Вообщем уберите. Вы чё из меня дуру делаете. Вы дали код страницы http://forum.ucoz.ru/forum/38-62345-1154552-16-1392949371

道德經 Помощь по системе
Сообщение отредактировал @katy@ - Пятница, 21 Фев 2014, 07:51:07
Тихий_Лис
Сообщений: 5
Репутация: 0

Сообщение # 12 | 07:51:47
Цитата @katy@ ()
Тихий_Лис, Вы чё из меня дуру делаете. Вы дали код страницы http://forum.ucoz.ru/forum/38-62345-1154552-16-1392949371


Все верно, но то что вы просите убрать, этого нет. Сравните. Я не выдумываю

На рабочем столе папка, название "мысль". Открыл - пусто!
@katy@
Сообщений: 1808
Репутация: 466
Уровень замечаний:

Сообщение # 13 | 07:54:01
Цитата Тихий_Лис ()
Все верно, но то что вы просите убрать, этого нет. Сравните. Я не выдумываю

Тихий_Лис, Ну значит я дебильная Читайте инструкцию по установке http://manual.ucoz.net/board/10-2-0-462

道德經 Помощь по системе
Тихий_Лис
Сообщений: 5
Репутация: 0

Сообщение # 14 | 08:05:50
Цитата @katy@ ()
Тихий_Лис, Ну значит я дебильная Читайте инструкцию по установке http://manual.ucoz.net/board/10-2-0-462


Стойте))))) извините недопонимание вышло. Вы говорите по сообщению что в самом верху, а я вам доказываю по сообщению #8 по нему можете объяснить?

На рабочем столе папка, название "мысль". Открыл - пусто!
@katy@
Сообщений: 1808
Репутация: 466
Уровень замечаний:

Сообщение # 15 | 08:27:38
Цитата Тихий_Лис ()
Стойте))))) извините недопонимание вышло. Вы говорите по сообщению что в самом верху, а я вам доказываю по сообщению #8 по нему можете объяснить?

Тихий_Лис,Я вам обьяснила по сообщению 8 Вы чё тут тень на плетень наводите. Спрашивайте там где брали слайдер. Пусть они вам обьясняют. Вы слайдер сдесь брали ? Нет. Я допустим не знаю как установить. Всё.

道德經 Помощь по системе
Сообщение отредактировал @katy@ - Пятница, 21 Фев 2014, 08:41:56
Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » Установка слайдера
Страница 1 из 512345»
Поиск: