следующая фотография при клике

111 · 09.01.2011, 20:26

Здравствуйте.
Сделал фотогалерею на CSS. Хочу сделать так, чтобы при клике на большую фотографию открывалась бы следующая(большая).Как это можно сделать? Заранее спасибо за ответ.
http://mikhailkolesniko.narod.ru/fot...1_balkony.html

iDeViL · 10.01.2011, 20:42

первый, первый, я первый!
короче, у img большой делаешь onclick="next_walpaper(this)"
и в js пишешь
fuction next_walpaper(obj)
{
img_id ++;
if (img_id == img_max) { img_id = 0 };
document.getElementById[this].src = "url картинки" + img_id +".jpg";
}
естественно в начале img_id должен быть равен 1, а img_max - числу картинок. На серве картинки хранятся в виде name1.jpg, name2.jpg

PS - самый простой вариант (правда может не сразу заработает, но должен). Можно значительно сложнее, но вам то зачем такое? Было бы неплохо еще сделать вообще большую картинку ссылкой, и поведенеи прописать ссылке, а не <img> (и так грамотнее)

аа, еще можно хранить имена картинок в виде массива

111 · 10.01.2011, 23:00

Спасибо за совет. Но, к сожалению не все понял, а если честно, то ничего. Я не силен в энтом деле.Если можно, то кусочек кода , а я потом попытаюсь разобраться и продолжу.

Цитата:

Было бы неплохо еще сделать вообще большую картинку ссылкой, и поведенеи прописать ссылке, а не <img> (и так грамотнее)

я пытался именно так сделать, но не получилось.

Макс-Текс · 11.01.2011, 11:03

кусочек кода:

Код HTML:

<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<style type="text/css">
img {
border: 0px;
}
</style>

<script type="text/javascript">
var img_id = 1;
var img_max = 6;
function nextimg(obj)
{
  img_id ++;
  if (img_id == img_max) { img_id = 1 };
  document.getElementById(obj).src = "/dynamicbook" + img_id +".gif";
}
</script>

</head>
<body>

<a href="#" onclick="nextimg('tst')"><img id="tst" src="/dynamicbook1.gif" /></a>

</body>
</html>

111 · 12.01.2011, 10:24

спасибо! сейчас буду пробовать!

Добавлено через 17 часов 53 минуты

что-то не справился я со скриптом. Извините за назойливость, но если можно, дайте строчку в коде.
<script type="text/javascript">
var img_id = 1;
var img_max = 6;
function nextimg(obj)
{
img_id ++;
if (img_id == img_max) { img_id = 1 };
document.getElementById(obj).src = "/dynamicbook" + img_id +".gif";
}
</script>

</head>
<body>
<h1>Галерея №2. Переключение картинок на click.</h1>
<div id="gallery2">
<ul id="tabs2">
<li><a href="#pic1"><img src="http://mikhailkolesniko.narod.ru/foto_balkony/b1967.jpg" alt="" /></a></li>
<li><a href="#pic2"><img src="http://mikhailkolesniko.narod.ru/foto_balkony/b145.jpg" alt="" /></a></li>
<li><a href="#pic3"><img src="images/pic3s.jpg" alt="" /></a></li>
<li><a href="#pic4"><img src="images/pic4s.jpg" alt="" /></a></li>
</ul>
<div id="fullPicBlock">
<div><a name="pic1"></a><img src="http://mikhailkolesniko.narod.ru/foto_balkony/b1967.jpg" alt="" /></div>
<div><a name="pic2"></a><img src="http://mikhailkolesniko.narod.ru/foto_balkony/b145.jpg" alt="" /></div>
<div><a name="pic3"></a><img src="images/pic3.jpg" alt="" /></div>
<div><a name="pic4"></a><img src="images/pic4.jpg" alt="" /></div>

</div> </div>

</body>
сама страничка здесь
Хочется сделать так, чтобы при клике на большую фотку, открывалась следующая(большая)

Макс-Текс · 12.01.2011, 11:39

Не стал разбираться в ваших наворотах.
Сделал по своему, только ваш CSS код не трогал.
Вот ссылка примера решения вашей задачи:
http://www.dobry-dom.ru/testimg2.html
Только картинки свои вставите.

111 · 12.01.2011, 15:09

неа. у меня не получается. единственное отличие в том, что у меня картинки в .jpg, а у Вас в .gif
попробовал в Вашем коде поменять gif на jpg, но все равно не получается. Наверное, мне надо фотки переводить в gif ?

Макс-Текс · 12.01.2011, 15:19

Можно оставить картинки в JPG формате.
Только имена файлов-картинок должны быть в виде:

Малые картинки:
dynamicbook1.jpg
...
dynamicbook4.jpg

Большие картинки:
dynamicbook11.jpg
...
dynamicbook14.jpg

Или можете поменять формат имен файлов-картинок на свой.

111 · 12.01.2011, 15:26

то есть в имени моей картинки должно быть обязательно dynamicbook1.gif ???

Макс-Текс · 12.01.2011, 15:32

Для того примера, что я сделал, конечно.
Можете изменить на свой формат имена картинок.

Малые x1.jpg .. x4.jpg
Большие x11.jpg .. x14.jpg

но тогда нужно изменить JS и HTML код соответственно.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Нужна фотография на вебсайт. Готов купить.	AlexiKO	Фотография	0	26.10.2016 11:32
Как на JavaScript сделать, чтобы при клике открывался другой сайт	74ivan74	HTML, CSS, JavaScript	0	28.12.2009 16:23
java-скрипт для увеличения картинки при клике на мини-изображение	Apologet	HTML, CSS, JavaScript	3	19.07.2009 02:04
Фотография	EL_Sopuro	Растровая графика	5	26.01.2004 14:25

09.01.2011, 20:26	#1
111	Здравствуйте. Сделал фотогалерею на CSS. Хочу сделать так, чтобы при клике на большую фотографию открывалась бы следующая(большая).Как это можно сделать? Заранее спасибо за ответ. http://mikhailkolesniko.narod.ru/fot...1_balkony.html

10.01.2011, 20:42	#2
iDeViL	первый, первый, я первый! короче, у img большой делаешь onclick="next_walpaper(this)" и в js пишешь fuction next_walpaper(obj) { img_id ++; if (img_id == img_max) { img_id = 0 }; document.getElementById[this].src = "url картинки" + img_id +".jpg"; } естественно в начале img_id должен быть равен 1, а img_max - числу картинок. На серве картинки хранятся в виде name1.jpg, name2.jpg PS - самый простой вариант (правда может не сразу заработает, но должен). Можно значительно сложнее, но вам то зачем такое? Было бы неплохо еще сделать вообще большую картинку ссылкой, и поведенеи прописать ссылке, а не <img> (и так грамотнее) аа, еще можно хранить имена картинок в виде массива Последний раз редактировалось iDeViL; 10.01.2011 в 20:47..

12.01.2011, 10:24	#5
111	спасибо! сейчас буду пробовать! Добавлено через 17 часов 53 минуты что-то не справился я со скриптом. Извините за назойливость, но если можно, дайте строчку в коде. <script type="text/javascript"> var img_id = 1; var img_max = 6; function nextimg(obj) { img_id ++; if (img_id == img_max) { img_id = 1 }; document.getElementById(obj).src = "/dynamicbook" + img_id +".gif"; } </script> </head> <body> <h1>Галерея №2. Переключение картинок на click.</h1> <div id="gallery2"> <ul id="tabs2"> <li><a href="#pic1"><img src="http://mikhailkolesniko.narod.ru/foto_balkony/b1967.jpg" alt="" /></a></li> <li><a href="#pic2"><img src="http://mikhailkolesniko.narod.ru/foto_balkony/b145.jpg" alt="" /></a></li> <li><a href="#pic3"><img src="images/pic3s.jpg" alt="" /></a></li> <li><a href="#pic4"><img src="images/pic4s.jpg" alt="" /></a></li> </ul> <div id="fullPicBlock"> <div><a name="pic1"></a><img src="http://mikhailkolesniko.narod.ru/foto_balkony/b1967.jpg" alt="" /></div> <div><a name="pic2"></a><img src="http://mikhailkolesniko.narod.ru/foto_balkony/b145.jpg" alt="" /></div> <div><a name="pic3"></a><img src="images/pic3.jpg" alt="" /></div> <div><a name="pic4"></a><img src="images/pic4.jpg" alt="" /></div> </div> </div> </body> сама страничка здесь Хочется сделать так, чтобы при клике на большую фотку, открывалась следующая(большая) Последний раз редактировалось 111; 12.01.2011 в 10:24.. Причина: Добавлено сообщение

12.01.2011, 11:39	#6
Макс-Текс	Не стал разбираться в ваших наворотах. Сделал по своему, только ваш CSS код не трогал. Вот ссылка примера решения вашей задачи: http://www.dobry-dom.ru/testimg2.html Только картинки свои вставите.

12.01.2011, 15:09	#7
111	неа. у меня не получается. единственное отличие в том, что у меня картинки в .jpg, а у Вас в .gif попробовал в Вашем коде поменять gif на jpg, но все равно не получается. Наверное, мне надо фотки переводить в gif ?

12.01.2011, 15:19	#8
Макс-Текс	Можно оставить картинки в JPG формате. Только имена файлов-картинок должны быть в виде: Малые картинки: dynamicbook1.jpg ... dynamicbook4.jpg Большие картинки: dynamicbook11.jpg ... dynamicbook14.jpg Или можете поменять формат имен файлов-картинок на свой.

12.01.2011, 15:26	#9
111	то есть в имени моей картинки должно быть обязательно dynamicbook1.gif ???

12.01.2011, 15:32	#10
Макс-Текс	Для того примера, что я сделал, конечно. Можете изменить на свой формат имена картинок. Малые x1.jpg .. x4.jpg Большие x11.jpg .. x14.jpg но тогда нужно изменить JS и HTML код соответственно.