Форум Сайтостроение Веб-строительство

Скрипт изменения картинки без перегрузки страницы

ШO
На сайте с 27.12.2005
Offline
375
ШАНС-ON
1131

Приветствую!

Начал делать один небольшой сайтик и захотелось реализовать возможность просмотра нескольких фотографий без перегрузки страницы. Ну типа "следующее фото".

Страниц будет всего 6, в каждой по 3-5 фоток, так что все можно делать вручную и сложные скрипты с базами, думаю, мне не потребуются.

Слышал, что это реализовывается на Аяксе.

Существуют ли готовые решения, или нужно заказывать скрипт?

Буду ужасно и безмерно благодарен за оказанную помощь!

MoMM
На сайте с 16.06.2006
Offline
727
MoMM
#1

посмотрите по ключевику graybox может подойдет... хотя там немного не так сделано

ап: вот http://orangoo.com/labs/greybox/examples.html

psylosss
На сайте с 23.12.2005
Offline
126
psylosss
#2

не пробовал, но вполне вероятно прокатит такая штука:

<img src="/1.jpg" id="foto">
<input type="button" value="Следующая" onClick="nextFoto()">

<script>
fotos=['1.jpg','2.jpg','3.jpg']; //имена файлов картинок
current_foto=0; //текущий индекс картинки
      
function nextFoto()
{
   document.getElementById('foto').src='/' + fotos[current_foto];   //меняем src у картинки

   
   if (++current_foto >= fotos.length)   //увеличиваем индекс картинки. Если увеличивать  некуда, то сбрасываем в ноль
       current_foto=0;
}
</script>
Веб-разработка. Сложные проекты. Проектирование. Проект-менеджмент. Стартапы.
psylosss
На сайте с 23.12.2005
Offline
126
psylosss
#3

Только что проверил код. FF2, IE6, Opera9 - работает.

ШO
На сайте с 27.12.2005
Offline
375
ШАНС-ON
#4

MoMM, это я вчера видел. Мне нужно на примере сайта досуг.ню :)

Т.е. картинка отображается на странице и при нажании на "следующая" просто перегружается, без перегрузки страницы.

psylosss, :( Не сработал скпирт. Первую картинку показал, при нажании на "следующую" дал ошибку на странице. Но то что Вы показали видимо и есть то, что мне нужно.

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

eTarget 2011:Панельная дискуссия «Стратегия eTarget 2011: Круглый стол Могут ли «плохие» входящие
regta
На сайте с 15.04.2006
Offline
320
regta
#5

вот здесь что-то похожее: http://www.artlebedev.ru/tools/technogrette/js/filmstrip/

Цитируйте, плиз, историю переписки в личке. Спасибо.
ШO
На сайте с 27.12.2005
Offline
375
ШАНС-ON
#6

psylosss, спасибо, код работает! Все же был уверен, что сам что-то не досмотрел, ибо вы программер асс!

А как сделать, чтоб появилась кнопка "предыдущее"?

Может в ЛС перейдем, чтоб Вы свое время не тратили на "халявщика" и там все обсудим?

eTarget 2011:Панельная дискуссия «Стратегия eTarget 2011: Круглый стол Могут ли «плохие» входящие
ШO
На сайте с 27.12.2005
Offline
375
ШАНС-ON
#7

regta, и Вам огромное спасибо!! Очень интересное решение, осталось только выбрать!

Думаю, вариантов хватит!

psylosss
На сайте с 23.12.2005
Offline
126
psylosss
#8
А как сделать, чтоб появилась кнопка "предыдущее"?

кнопка "предыдущее": 

function prevFoto()
{
   document.getElementById('foto').src= '/'+fotos[current_foto];   //меняем src у картинки

   
   if (--current_foto <= 1)   //уменьшаем индекс картинки. Если уменьшать  некуда, то сбрасываем в макс. возможный
       current_foto=fotos.length;
}

Насчет путей: см. строчку '/'+fotos[current_foto]; в функциях: / - это корень. Если тут нужна какая-то другая папка, то просто прописать ее. Например:

'/img/girls/masha/'+fotos[current_foto];

psylosss
На сайте с 23.12.2005
Offline
126
psylosss
#9

Вобщем вот полный рабочий пример:


<html>
<head>
</head>
<body>
<img src="/path/to/foto/yes.gif" id="foto">
<input type="button" value="Предыдущая" onClick="prevFoto()">
<input type="button" value="Следующая" onClick="nextFoto()">

<script>
fotos=['a.gif','b.gif','c.gif']; //имена файлов картинок
current_foto=0; //текущий индекс картинки

function nextFoto()
{
   if (++current_foto >= fotos.length)   //увеличиваем индекс картинки. Если увеличивать  некуда, то сбрасываем в ноль
       current_foto=0;

   document.getElementById('foto').src="/path/to/foto/" + fotos[current_foto];   //меняем src у картинки

   
}

function prevFoto()
{
   if (--current_foto <0)   //уменьшаем индекс картинки. Если уменьшать  некуда, то сбрасываем в макс.возможный
       current_foto=fotos.length-1;

   document.getElementById('foto').src="/path/to/foto/" + fotos[current_foto];   //меняем src у картинки

}
</script>

</body>
</html>

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий