как сделать слайд-шоу картинок на вашем сайте - Форум помощи по uCoz
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Страница 1 из 212»
Форум помощи по uCoz » как создать сайт на Ucoz » ваши вопросы » как сделать слайд-шоу картинок на вашем сайте
как сделать слайд-шоу картинок на вашем сайте
Дата: Воскресенье, 22.05.2011, 02:45 | Сообщение # 1
Группа:
Администратор
Сообщений:
501
Титул:
Знаток
Offline
Quote (Natalia)
Доброй ночи, Дмитрий! Подскажите, пожалуйста, как добавить слайд из презентации вместо картинка к информации о файле. Времени не хватает на изучение всех видео уроков, да и не могла найти нужную мне информацию. СПАСИБО за советы, обязательно ими воспользуюсь, как только закончится учебный год, будет больше свободного времени.
С уважением Н.В.В.
Дата: Воскресенье, 22.05.2011, 02:47 | Сообщение # 2
Группа:
Администратор
Сообщений:
501
Титул:
Знаток
Offline
С помощью ротатора картинок можно показывать например фото презентацию ваших работ, или услуг, сделать слайд шоу, собрать несколько картиночных баннеров и показывать их чередуя по очереди, да в общем красивая штука, вкючайте свою фантазию.

Сегодня я Вам покажу и научу вас создавать ротаторы картинок на своём сайте.

Немного пред истории.

В сети интернет полно всяких различных кодов для ротации картинок, в поисках простого, кода написанного на "javascript" я провёл целый вечер, анализируя проверяя и рассматривая их коды, я пришёл к мнению:

1) Многие сайты публикуют просто не рабочие коды и примеры.
2) Предлагают голый код без описания как его вставит к себе на сайт.
3) Сложные и замудрённые коды ротаторов.
4) Устаревшие, значит не у всех, и не во всех браузерах такой ротатор будет работать.

Мой вывод: Написать самому или обратиться к помощи профессионалов.

Давайте по порядку, что нам потребуется:

1) Нам нужны фотографии которые мы будем показывать. Они должны быть все одного формата и размера. (В своём ротаторе я использовал 9 фото, размером 400 х 250 пикселей, формат моих фото: gif. Вы можете и jpg использовать.)которые нам необходимо загрузить в файловый менеджер сайта в папку например rotator

Все фото я подготовил с помощью программы фотошоп.

2) Копируйте данный код и вставьте в нужное место на сайте

Code
<center>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251 charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="/rotator/style.css" />
<script type="text/javascript" src="/rotator/jquery-1.4.3.js"></script>
<script type="text/javascript">
$(function(){
                  setInterval("rotateImages()", 3200);
});
                  function rotateImages(){
                   var oCurPhoto = $("#photo div.current");
                   var oNxtPhoto = oCurPhoto.next();
                   if(oNxtPhoto.length == 0)
                    oNxtPhoto = $("#photo div:first");
                          
                   oCurPhoto.removeClass('current').addClass('previous');
                   oNxtPhoto.css({opacity: 0.0}).addClass('current').animate({opacity: 1.0}, 1000,                  
                    function(){
                     oCurPhoto.removeClass('previous');
                    });                  
                  }
</script>
<title>название слайд шоу</title>
</head>

<body>
<div align="center">
<div id="photo">
                  <div class="current">
                   <img src="ссылка к картинке 1" alt="название" width="600" height="400" class="galery" />
                  </div>
                  <div>
                   <img src="ссылка к картинке 2" alt="название" width="600" height="400" class="galery" />
                  </div>
                  <div>
                   <img src="ссылка к картинке 3" alt="название" width="600" height="400" class="galery" />
                  </div>
                  <div>
                   <img src="ссылка к картинке 4" alt="название" width="600" height="400" class="galery" />
                  </div>
                  <div>
                   <img src="ссылка к картинке 5" alt="название" width="600" height="400" class="galery" />
                  </div>
                  <div>
                   <img src="ссылка к картинке 6" alt="название" width="600" height="400" class="galery" />
                  </div>
                  <div>
                   <img src="ссылка к картинке 7" alt="название" width="600" height="400" class="galery" />
                  </div>
                  <div>
                   <img src="ссылка к картинке 8" alt="название" width="600" height="400" class="galery" />
                  </div>
                         <div>
                   <img src="ссылка к картинке 9" alt="название" width="600" height="400" class="galery" />
                  </div>
                         <div>
                   <img src="ссылка к картинке 10" alt="название" width="600" height="400" class="galery" />
                  </div>
                         <div>
                   <img src="ссылка к картинке 11" alt="название" width="600" height="400" class="galery" />
                  </div>
                         <div>
                   <img src="ссылка к картинке 12" alt="название" width="600" height="400" class="galery" />
                  </div>
                         <div>
                   <img src="ссылка к картинке 13" alt="название" width="600" height="400" class="galery" />
                  </div>
</div>
</div>
</body>
</html>
</center>


3) Вносим изменения в исходные файлы:

href="/rotator/style.css" - путь к файлу style.css

src="/rotator/jquery-1.4.3.js" - путь к файлу jquery-1.4.3.js

название слайд шоу - название вашей призентации

src="ссылка к картинке 13" - ставите свою ссылку на вашу картинку

alt="название" - название вашей картинки

width="600" height="400" - размер вашей картинки

все ваши пути и ссылки должны будут выглядить так: "http://адрес сайта/rotator/название картинки или файла"

но это еще не все...весь текст к сожалению не влазиет,а мне так хотелось напугать вас сложностью работы,ну ладно не стану...вобщем,что в конце-концов нужно сделать:

1 создайте папку rotator
2 скачайте вот эту папку себе на компьютер и разархивируйте ее

3 в файле style.css замените размер картинок на свои (width:600px; height:400px;)

4 закачайте на сайт в созданную вами папку rotator
ваши картинки и файлы с папки ( jquery-1.4.3.js
и style.css )

5 измененный вами выше html-code вставьте в нужное место на вашем сайте

ну и на этом все...

данный код не работает там где используется BB-code и нельзя использовать Html




данные предоставлены сайтом InfoPodsolnux.ru
Дата: Воскресенье, 22.05.2011, 21:03 | Сообщение # 3
Группа:
Администратор
Сообщений:
501
Титул:
Знаток
Offline
Есть конечно еще более легкий способ-создать флэш слайд-шоу - на компьютере в программе фотошоп,а потом одним файлом(как одна картинка)установить на нужное вам место,работать будет где угодно!!!
Дата: Вторник, 24.05.2011, 09:32 | Сообщение # 4
Группа:
начинающий
Сообщений:
1
Offline
СПАСИБО!!!
Дата: Вторник, 24.05.2011, 09:40 | Сообщение # 5
Группа:
Администратор
Сообщений:
501
Титул:
Знаток
Offline
Quote (Natalia)
СПАСИБО!!!

не за что,обращайтесь... biggrin
надеюсь было понятно... wink
Дата: Понедельник, 20.08.2012, 23:42 | Сообщение # 6
Группа:
начинающий
Сообщений:
6
Offline
Здравствуйте! Очень старалась четко следовать Вашим рекомендациям, но, к сожалению, мой дилетансткий подход не привел к нужному результату. Укажите, пожалуйста, на мои ошибки.
После переделки кода получила вот это (думаю, что причина кроется именно здесь):

Code
<center>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251 charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="http://itsmathlife.ucoz.ru/ehksperimenty/rotator/style.css"/>
<script type="text/javascript" src="http://itsmathlife.ucoz.ru/ehksperimenty/rotator/jquery-1.4.3.js"></script>
<script type="text/javascript">
$(function(){
setInterval("rotateImages()", 3200);
});
function rotateImages(){
var oCurPhoto = $("#photo div.current");
var oNxtPhoto = oCurPhoto.next();
if(oNxtPhoto.length == 0)
oNxtPhoto = $("#photo div:first");

oCurPhoto.removeClass('current').addClass('previous');
oNxtPhoto.css({opacity: 0.0}).addClass('current').animate({opacity: 1.0}, 1000,
function(){
oCurPhoto.removeClass('previous');
});
}
</script>
<title>Математика</title>
</head>

<body>
<div align="center">
<div id="photo">
<div class="current">
<img src="http://itsmathlife.ucoz.ru/ehksperimenty/rotator/1.jpg" alt="1" width="300" height="200" class="galery" />
</div>
<div>
<img src="http://itsmathlife.ucoz.ru/ehksperimenty/rotator/2.jpg" alt="2" width="300" height="200" class="galery" />
</div>
<div>
<img src="http://itsmathlife.ucoz.ru/ehksperimenty/rotator/3.jpg" alt="3" width="300" height="200" class="galery" />
</div>
</div>
</div>
</body>
</html>
</center>


С нетерпением жду Ваших советов, Елена.
Дата: Вторник, 21.08.2012, 00:55 | Сообщение # 7
Группа:
Администратор
Сообщений:
501
Титул:
Знаток
Offline
и так размер ваших картинок не соответствует действительности.
вы в коде указали,что размер должен быть width="300" height="200"
поэтому и все ваши картинки должны быть токого же размера.
Это можно сделать в программах фотошоп или я рекомендую очень легкую и простую в управлении программу,которой пользуюсь сам FastStone Image Viewer,в ней сами разберетесь - там есть кнопочка "Изменить размер".

далее в файле style.css тоже необходимо изменить размер картинок (width:600px; height:400px;)

Далее просмотрев вашу страницу в виде открытого html-кода я обнаружил,что код для слайд-шоу у вас установлен не весь,а необходимо копировать (в измененном виде) все что я предлогал выше и устанавливать на ваш сайт.
В данном случае на вашей странице жмем глазик для редактирования страницы затем цветную иконку HTML и туда вставляем код.

Остальное вроде бы у вас в исправном состоянии.

После того как проделаете эту работу,просмотрите на результат и дайте ответ.
Дата: Вторник, 21.08.2012, 12:18 | Сообщение # 8
Группа:
начинающий
Сообщений:
6
Offline
Добрый день! А ведь действительно! В html я вставляю весь код:

Code
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251 charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="http://itsmathlife.ucoz.ru/ehksperimenty/rotator/style.css"/>
<script type="text/javascript" src="http://itsmathlife.ucoz.ru/ehksperimenty/rotator/jquery-1.4.3.js"></script>
<script type="text/javascript">
$(function(){
setInterval("rotateImages()", 3200);
});
function rotateImages(){
var oCurPhoto = $("#photo div.current");
var oNxtPhoto = oCurPhoto.next();
if(oNxtPhoto.length == 0)
oNxtPhoto = $("#photo div:first");

oCurPhoto.removeClass('current').addClass('previous');
oNxtPhoto.css({opacity: 0.0}).addClass('current').animate({opacity: 1.0}, 1000,
function(){
oCurPhoto.removeClass('previous');
});
}
</script>
<title>Математика</title>
</head>

<body>
<div align="center">
<div id="photo">
<div class="current">
<img src="http://itsmathlife.ucoz.ru/ehksperimenty/rotator/1.gif" alt="1" width="80" height="80" class="galery" />
</div>
<div>
<img src="http://itsmathlife.ucoz.ru/ehksperimenty/rotator/2.jpg" alt="2" width="80" height="80" class="galery" />
</div>
<div>
<img src="http://itsmathlife.ucoz.ru/ehksperimenty/rotator/3.jpg" alt="3" width="80" height="80" class="galery" />
</div>
<div>
<img src="http://itsmathlife.ucoz.ru/ehksperimenty/rotator/4.jpg" alt="4" width="80" height="80" class="galery" />
</div>
<div>
<img src="http://itsmathlife.ucoz.ru/ehksperimenty/rotator/5.jpg" alt="5" width="80" height="80" class="galery" />
</div>
</div>
</div>
</body>
</html>
</center>

А после сохранения там остается только

Code
<DIV align=center>
<DIV id=photo>
<DIV class=current><BR><IMG class=galery alt=1 src="http://itsmathlife.ucoz.ru/ehksperimenty/rotator/1.gif" width=80 height=80> <BR></DIV><BR>
<DIV><BR><IMG class=galery alt=2 src="http://itsmathlife.ucoz.ru/ehksperimenty/rotator/2.jpg" width=80 height=80> <BR></DIV><BR>
<DIV><BR><IMG class=galery alt=3 src="http://itsmathlife.ucoz.ru/ehksperimenty/rotator/3.jpg" width=80 height=80> <BR></DIV><BR>
<DIV><BR><IMG class=galery alt=4 src="http://itsmathlife.ucoz.ru/ehksperimenty/rotator/4.jpg" width=80 height=80> <BR></DIV><BR>
<DIV><BR><IMG class=galery alt=5 src="http://itsmathlife.ucoz.ru/ehksperimenty/rotator/5.jpg" width=80 height=80> <BR></DIV><BR></DIV><BR></DIV>


Почему?
Дата: Вторник, 21.08.2012, 13:27 | Сообщение # 9
Группа:
Администратор
Сообщений:
501
Титул:
Знаток
Offline
я просто скопировал и установил Ваш код!

Code
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251 charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="http://itsmathlife.ucoz.ru/ehksperimenty/rotator/style.css"/>
<script type="text/javascript" src="http://itsmathlife.ucoz.ru/ehksperimenty/rotator/jquery-1.4.3.js"></script>
<script type="text/javascript">
$(function(){
setInterval("rotateImages()", 3200);
});
function rotateImages(){
var oCurPhoto = $("#photo div.current");
var oNxtPhoto = oCurPhoto.next();
if(oNxtPhoto.length == 0)
oNxtPhoto = $("#photo div:first");

oCurPhoto.removeClass('current').addClass('previous');
oNxtPhoto.css({opacity: 0.0}).addClass('current').animate({opacity: 1.0}, 1000,
function(){
oCurPhoto.removeClass('previous');
});
}
</script>
<title>Математика</title>
</head>

<body>
<div align="center">
<div id="photo">
<div class="current">
<img src="http://itsmathlife.ucoz.ru/ehksperimenty/rotator/1.gif" alt="1" width="80" height="80" class="galery" />
</div>
<div>
<img src="http://itsmathlife.ucoz.ru/ehksperimenty/rotator/2.jpg" alt="2" width="80" height="80" class="galery" />
</div>
<div>
<img src="http://itsmathlife.ucoz.ru/ehksperimenty/rotator/3.jpg" alt="3" width="80" height="80" class="galery" />
</div>
<div>
<img src="http://itsmathlife.ucoz.ru/ehksperimenty/rotator/4.jpg" alt="4" width="80" height="80" class="galery" />
</div>
<div>
<img src="http://itsmathlife.ucoz.ru/ehksperimenty/rotator/5.jpg" alt="5" width="80" height="80" class="galery" />
</div>
</div>
</div>
</body>
</html>
</center>


он работает исправно смотрите сами здесь

код у меня тоже сократился,но остался в рабочем состоянии

Скорее всего Ваша ошибка в не верной установке.

инструкция:
(жмите на картинки для просмотра они увиличиваются)

На вашем сайте на той странице где хотите видеть слайд-шоу(ваша эта) жмем глазик
а затем цветную иконку HTML
вставляем код жмем применить и оК
далее сохроняем страницу жмем сохронить

вот и все...
Дата: Вторник, 21.08.2012, 13:59 | Сообщение # 10
Группа:
начинающий
Сообщений:
6
Offline
Я сделала отдельную страничку, вставила код и, О ЧУДО!!! все заработало! Спасибо большое!
http://itsmathlife.ucoz.ru/index/na_odin_raz/0-35#

Но теперь у меня снова вопросы:
1) Страница черная (цвет фона прописан в коде? можно ли его изменить?)
2) А если я хочу что-то написать на странице? До картинки и после нее?

Елена.
Дата: Вторник, 21.08.2012, 14:14 | Сообщение # 11
Группа:
Администратор
Сообщений:
501
Титул:
Знаток
Offline
пишите все что угодно,посто делайте это с отступом до кода или после кода.
Фон должен быть прозрачный,те то что у вас на сайте есть то и должно остаться...
смотрите сами

если конечно вы не лазели в дизайне кода...

да и вообще сменить этот шаблон,там есть более красивые и подходящие для учителей...

и просмотрите все советы что я давал людям в разделе "Показываем ваш сайт.ucoz.ru"
Дата: Вторник, 21.08.2012, 14:37 | Сообщение # 12
Группа:
начинающий
Сообщений:
6
Offline
Дмитрий, я ничего не меняла в коде! Более того, я его беру прямо отсюда, из сообщения №9. Ну что же это такое??? Я уже голову сломала (Вы, наверное, это сами видите).
Кстати, на страницу "На один раз" текст удалось вставить и до и после текста (как Вы и говорили), только цвет текста нужно было делать белым.
Дата: Вторник, 21.08.2012, 14:44 | Сообщение # 13
Группа:
Администратор
Сообщений:
501
Титул:
Знаток
Offline
попробуйте сменить шаблон сайта,возможно его стили конфликтуют со стилями слайд-шоу

на вашем сайте я отправил вам личное сообщение
Дата: Вторник, 21.08.2012, 15:26 | Сообщение # 14
Группа:
начинающий
Сообщений:
6
Offline
Дмитрий, сообщение прочитала, как исполнительный двоечник принимаю Вашу помощь happy
Дата: Вторник, 21.08.2012, 23:16 | Сообщение # 15
Группа:
Администратор
Сообщений:
501
Титул:
Знаток
Offline
Форум помощи по uCoz » как создать сайт на Ucoz » ваши вопросы » как сделать слайд-шоу картинок на вашем сайте
Страница 1 из 212»
Поиск: