Доброе утро
аватар

Я Немного о себе Присягу перед Родиной выполнил и вышел в запас на гражданку. В свободное время увлекаюсь WEB-дизайном (для души). Создал сайт
для лиц старшего поколения и несколько блогов различной тематики. Всегда рад друзьям, новым знакомым и единомышленникам. Пишите на email (Задать вопрос).

Создай визитку
               
Не возможно "оживить" web-страницу без HTML и CSS.
Это инструментальный ящик для WEB-мастеров. Здесь я делюсь некоторыми хитростями по созданию WEB страниц в интернете, о пользовании компьютером и о работе с программами.

Оригинальная фотогалерея на сайт(блог)

Фотогалерея

В интернете изложено много образцов фотогалерей, но я решил создать свою по принципу картотеки (я о ней писал здесь), т.к., на мой взгляд, это не сложно. Этот вариант фотогалереи можно использовать для добавления сразу множества фотографий на страницу. Она позволит эффектно оформить портфолио, показать фото ваших работ или просто создать семейный альбом.


Все логотипы ведут к серии фото (клик)
каждое фото в серии открывает/закрывает оригинал





Ниже изложена HTML страница с использованием одного JavaScript открывающего фото

<HTML> <head> <title>Фотогалерея</title> <script language="JavaScript" type="text/javascript"> <!-- Copyright 2007, Sandeep Gangadharan --> <!-- For more free scripts go to http://www.sivamdesign.com/scripts/ --> <!-- var alfavit = new Array("x1","x2","x3","x4","x5","x6"); // тут ID-шки логотипов function onOff(masSiv,theIDn) { for(var j=0; j < masSiv.length; j++) { if (masSiv[j] == theIDn) { if (document.getElementById(theIDn).style.display == "block") { document.getElementById(theIDn).style.display = "none"; } else { document.getElementById(theIDn).style.display = "block"; } } else { document.getElementById(masSiv[j]).style.display = "none"; } } } </script> </head> <body bgcolor="#D9EAFA"> <br> <h2 ALIGN=CENTER><b>Все логотипы ведут к серии фото (клик)<br> каждое фото в серии открывает/закрывает оригинал</b></h2> <noscript> <h3 align="center">ВНИМАНИЕ!!!<br> В Вашем браузере отключен или не поддерживается JavaScript! Для отображения всех элементов страницы включите JavaScript или обновите браузер.</h3> </noscript> <table ALIGN=CENTER><tr><td bgcolor="#ffffff"> <fieldset ALIGN=CENTER> <br> <span onClick="onOff(alfavit,'x1')" class="liter"> <img border="0" height="50" src="адрес картинки логотипа/A1.jpg"></span> <span onClick="onOff(alfavit,'x2')" class="liter"> <img border="0" height="50" src="адрес картинки логотипа/B1.jpg"></span> <span onClick="onOff(alfavit,'x3')" class="liter"> <img border="0" height="50" src="адрес картинки логотипа/C1.jpg"></span> <span onClick="onOff(alfavit,'x4')" class="liter"> <img border="0" height="50" src="адрес картинки логотипа/D1.jpg"></span> <span onClick="onOff(alfavit,'x5')" class="liter"> <img border="0" height="50" src="адрес картинки логотипа/E1.jpg"></span> <br> <div id="x1" style="display:none"> <hr size="1" color="#999999"><br> <A target="_blank" TITLE="A1" HREF="адрес оригинала фото/A1.html"> <img border="0" height="150" src="адрес картинки в серии/A1.jpg"></A> <A target="_blank" TITLE="A2" HREF="адрес оригинала фото/A2.html"> <img border="0" height="150" src="адрес картинки в серии/A2.jpg"></A> <A target="_blank" TITLE="A3" HREF="адрес оригинала фото/A3.html"> <img border="0" height="150" src="адрес картинки в серии/A3.jpg"></A> <A target="_blank" TITLE="A4" HREF="адрес оригинала фото/A4.html"> <img border="0" height="150" src="адрес картинки в серии/A4.jpg"></A> <A target="_blank" TITLE="A5" HREF="адрес оригинала фото/A5.html"> <img border="0" height="150" src="адрес картинки в серии/A4.jpg"></A> </div> <div id="x2" style="display:none"> <hr size="1" color="#999999"><br> <A target="_blank" TITLE="B1" HREF="адрес оригинала фото/B1.html"> <img border="0" height="150" src="адрес картинки в серии/B1.jpg"></A> <A target="_blank" TITLE="B2" HREF="адрес оригинала фото/B2.html"> <img border="0" height="150" src="адрес картинки в серии/B2.jpg"></A> <A target="_blank" TITLE="B3" HREF="адрес оригинала фото/B3.html"> <img border="0" height="150" src="адрес картинки в серии/B3.jpg"></A> <A target="_blank" TITLE="B4" HREF="адрес оригинала фото/B4.html"> <img border="0" height="150" src="адрес картинки в серии/B4.jpg"></A> <A target="_blank" TITLE="B5" HREF="адрес оригинала фото/B5.html"> <img border="0" height="150" src="адрес картинки в серии/B5.jpg"></A> </div> <div id="x3" style="display:none"> <hr size="1" color="#999999"><br> <A target="_blank" TITLE="C1" HREF="адрес оригинала фото/C1.html"> <img border="0" height="150" src="адрес картинки в серии/C1.jpg"></A> <A target="_blank" TITLE="C2" HREF="адрес оригинала фото/C2.html"> <img border="0" height="150" src="адрес картинки в серии/C2.jpg"></A> <A target="_blank" TITLE="C3" HREF="адрес оригинала фото/C3.html"> <img border="0" height="150" src="адрес картинки в серии/C3.jpg"></A> <A target="_blank" TITLE="C4" HREF="адрес оригинала фото/C4.html"> <img border="0" height="150" src="адрес картинки в серии/C4.jpg"></A> <A target="_blank" TITLE="C5" HREF="адрес оригинала фото/C5.html"> <img border="0" height="150" src="адрес картинки в серии/C5.jpg"></A> </div> <div id="x4" style="display:none"> <hr size="1" color="#999999"><br> <A target="_blank" TITLE="D1" HREF="адрес оригинала фото/D1.html"> <img border="0" height="150" src="адрес картинки в серии/D1.jpg"></A> <A target="_blank" TITLE="D2" HREF="адрес оригинала фото/D2.html"> <img border="0" height="150" src="адрес картинки в серии/D2.jpg"></A> <A target="_blank" TITLE="D3" HREF="адрес оригинала фото/D3.html"> <img border="0" height="150" src="адрес картинки в серии/D3.jpg"></A> </div> <div id="x5" style="display:none"> <hr size="1" color="#999999"><br> <A target="_blank" TITLE="E1" HREF="адрес оригинала фото/E1.html"> <img border="0" height="138" src="адрес картинки в серии/E1.jpg"></A> <A target="_blank" TITLE="E2" HREF="адрес оригинала фото/E2.html"> <img border="0" height="138" src="адрес картинки в серии/E2.jpg"></A> <A target="_blank" TITLE="E3" HREF="адрес оригинала фото/E3.html"> <img border="0" height="138" src="адрес картинки в серии/E3.jpg"></A> <A target="_blank" TITLE="E4" HREF="адрес оригинала фото/E4.html"> <img border="0" height="138" src="адрес картинки в серии/E4.jpg"></A> <A target="_blank" TITLE="E5" HREF="адрес оригинала фото/E5.html"> <img border="0" height="138" src="адрес картинки в серии/E5.jpg"></A> <A target="_blank" TITLE="E6" HREF="адрес оригинала фото/E6.html"> <img border="0" height="138" src="адрес картинки в серии/E6.jpg"></A> <A target="_blank" TITLE="E7" HREF="адрес оригинала фото/E7.html"> <img border="0" height="138" src="адрес картинки в серии/E7.jpg"></A> <A target="_blank" TITLE="E8" HREF="адрес оригинала фото/E8.html"> <img border="0" height="138" src="адрес картинки в серии/E8.jpg"></A> <A target="_blank" TITLE="E9" HREF="адрес оригинала фото/E9.html"> <img border="0" height="138" src="адрес картинки в серии/E9.jpg"></A> <A target="_blank" TITLE="E10" HREF="адрес оригинала фото/E10.html"> <img border="0" height="138" src="адрес картинки в серии/E10.jpg"></A> <A target="_blank" TITLE="E11" HREF="адрес оригинала фото/E11.html"> <img border="0" height="138" src="адрес картинки в серии/E11.jpg"></A> <A target="_blank" TITLE="E12" HREF="адрес оригинала фото/E12.html"> <img border="0" height="138" src="адрес картинки в серии/E12.jpg"></A> </div> <br> </fieldset> </td></tr></table> </body> </HTML>

Здесь HTML страница фото оригинала, которую JavaScript закрывает при клике

<html> <head> <title>Фото А1</title> <script language="JavaScript" type="text/javascript"> <!-- if (window.event) { window.captureEvents(Event.ONMOUSEDOWN); } function closeSelf() { window.close(); } document.onmousedown = closeSelf; // --> </script> </head> <body> <img border="0" src="адрес фото оригинала/A1.jpg" width="100%"> </body> </html>

Как видите это простейший вариант создания эффектной фотогалереи

...Дерзайте...

Рейтинг@Mail.ru