Электронная библиотека
Программисту веб-дизайнеру
Другие материалы
Библиотека: скачать готовые скрипты Javascript
Как сделать каталог фотографий на одной веб-странице без листания страниц
Посмотрите на работу первого скрипта на отдельной веб-странице (персональный компьютер).
При помощи приводимого ниже клиентского сценария - скрипта Javascript - можно организовать хранение каталога фотографий на одной веб-странице. Скрипт редактируемый: можено менять количество фотографий и оглавление (в виде набора цифр или иконок со ссылками). Файлы могут подключаться любого расширения. В открываемом выше примере файлы имеют названия и путь img/img00001.jpg, img/img00002.jpg, img/img00003.jpg и img/img00004.jpg.
В данном скрипте фотографии перенумерованы одна за другой с именами f1.htm, f2.htm, f3.htm ... f8.htm для количества 8. Выделите мышью приводимый ниже код, скопируйте его (командой Ctrl+C) и вставьте его (командой Ctrl+V) в свою веб-страницу в необходимое место.
<script language="javascript' type=text/javascript>
var p=8 // максимальное число файлов p
var i=1
function next(){
i++
if (i==p+1) i=1 // максимальное число файлов p
s="f"+i+".htm" // имена файлов (может иметь любое расширение, в том числе .gif, .jpg, .htm)
document.all.innerframe.src=s
}
function prev(){
i--
if (i==0) i=p
s="f"+i+".htm"
document.all.innerframe.src=s
}
function GotoNomber(nomber){
i=nomber
s="f"+nomber+".htm"
document.all.innerframe.src=s
}
function nombersShow(){
document.all.raw.style.display=""
document.all.raw.style.visibility="visible"
document.all.nombers.href="javascript:nombersHide()"
}
function nombersHide(){
document.all.raw.style.display="none"
document.all.raw.style.visibility="hidden"
document.all.nombers.href="javascript:nombersShow()"
}
</script>
<p>Каталог фото |
<A href="javascript:prev()">«Предыдущая</A> |
<A href="javascript:nombersShow()" id=nombers title="Оглавление"><B>Список</B></A> |
<A href="javascript:next()">Следующая»</A>
<table><tr id=raw style="DISPLAY: none; VISIBILITY: hidden"><td>Номер фото:
<A href="javascript:GotoNomber(1)">1</A> <!-- комментарии, мини-иконка или номера файлов -->
<A href="javascript:GotoNomber(2)">2</A>
<A href="javascript:GotoNomber(3)">3</A>
<A href="javascript:GotoNomber(4)">4</A>
<A href="javascript:GotoNomber(5)">5</A>
<A href="javascript:GotoNomber(6)">6</A>
<A href="javascript:GotoNomber(7)">7</A>
<A href="javascript:GotoNomber(8)">8</A>
</td></tr>
<tr><td>
<IFRAME frameBorder=0 height="100%" id=innerframe src="f1.htm" width="100%"></IFRAME></td></tr></table>