Вернуться   Дизайнерский форум » ВЕБ-ПРОГРАММИРОВАНИЕ » HTML, CSS, JavaScript

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

Обсуждение темы следующая фотография при клике в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; Здравствуйте. Сделал фотогалерею на CSS. Хочу сделать так, чтобы при клике на большую фотографию открывалась бы следующая(большая).Как это можно сделать? Заранее спасибо за ...


Закрытая тема
 
Опции темы
Старый 09.01.2011, 20:26   #1
111

Здравствуйте.
Сделал фотогалерею на CSS. Хочу сделать так, чтобы при клике на большую фотографию открывалась бы следующая(большая).Как это можно сделать? Заранее спасибо за ответ.
http://mikhailkolesniko.narod.ru/fot...1_balkony.html
 
Старый 09.01.2011, 20:26
Ссылки
Старый 10.01.2011, 20:42   #2
первый, первый, я первый!
короче, у 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..
 
Старый 10.01.2011, 23:00   #3
111

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

Цитата:
Было бы неплохо еще сделать вообще большую картинку ссылкой, и поведенеи прописать ссылке, а не <img> (и так грамотнее)
я пытался именно так сделать, но не получилось.
 
Старый 11.01.2011, 11:03   #4
кусочек кода:

Код 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>
 
Старый 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
Только картинки свои вставите.
 
Этот пользователь сказал спасибо Макс-Текс за это полезное сообщение:
111 (12.01.2011)
Старый 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 код соответственно.
 
Старый 12.01.2011, 15:32
Закрытая тема

Метки
css фотогалерея


Опции темы


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Нужна фотография на вебсайт. Готов купить. 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


Текущее время: 13:19. Часовой пояс GMT +4.

Реклама на форуме Условия размещения рекламы
Биржа ссылок Заработай на сайте!
Дизайнерский форум