Как сделать каталог фотографий на одной веб-странице без листания страниц Посмотрите на работу первого скрипта на отдельной веб-странице. (кликай по правой мыши - открыть ссылку в новой вкладке) При помощи приводимого ниже клиентского сценария — скрипта 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>
Источник: http://www.mat.net.ua/computer/java-script/java-script-0510.htm |