|
| |
Назначение страницы.
Мой фотоальбом.
Типовая задача, решаемая многими WEB
программистами: Создать Фотоальбом, для 5 и более фотографий.
- Вывести название Фотоальбома.
- Загрузить "образы" фотографий.
- Обозначить, что фотография ещё не загружена.
- После загрузки фотографии:
- Обозначить факт загрузки фотографии;
- При наведении мышкой на фотографию, выводить дополнительную
информацию;
- При клике мышкой открывать новое окно.
Исходный код вы можете найти в
Zip архиве, файл
album_big.htm.
<!-- Стиль Заголовка альбома. Автор использует "внедрение"
Embedded Open Type (EOT) и True Type (TTF) шрифтов -->
<style>
.AlbumZag {
font-family: Arlekino, Arial ;color: #800000;
font-size:16pt;
text-align: center;
width: 100%; height: 20pt; margin-top:0;
margin-bottom:0;
letter-spacing:1pt
;
font-weight: 700}
@font-face {
font-family:
Arlekino; font-style: normal; font-weight: normal;
src: url("http://www.goodpc.narod.ru/img/arl.eot")}
@font-face {
font-family:
Arlekino;
src: local("Arlekino"), local("Arlekino"),
url("http://www.goodpc.narod.ru/img/Arlekino.ttf")
format("truetype");}
</style>
<!-- Только для Internet
Explorer -->
<!--[if IE]>
<style>
.AlbumZag {
font-family: Arlekino, Arial ;color: #FFFF00;
font-size:16pt;
text-align: center;
filter: glow(Color=#FF0000,Strength=3)
DropShadow(Color=#C0C0C0,
OffX=6, OffY=6); width: 100%;
height: 20pt;
margin-top:0; margin-bottom:0; letter-spacing:1pt ;
font-weight: 400}
</style>
<![endif]-->
<script language=javascript>
// Пример создания Таблицы и внедрения Object Images Function.
// Copyright © By: Апарышев Валерий Павлович. All rights reserved.
// Глобальные данные, пользователя.
// Создаём Объект свойств Фотоальбома.
var FotoAlbum=new
Object()
// Название ФотоАльбома
FotoAlbum.AlbumName="Фотография
и Рисунок."
FotoAlbum.MaxCol
= 3 // Количество рисунков в строке.
// Интернет адрес расположения рисунков
FotoAlbum.ImgPath="http://img-fotki.yandex.ru/get/"
FotoAlbum.ImgUrl=new
Array(
// Url Адрес рисунка.
"11/goodpc.4/0_57a7_eaaed_M.jpg","10/goodpc.4/0_5792_d4bb44d6_M.jpg",
"20/goodpc.5/0_78ed_8bdadb02_M.jpg","10/goodpc.4/0_5793_e89150d5_M.jpg",
"9/goodpc.4/0_57e5_6d007912_M.jpg","9/goodpc.4/0_5e31_792c5a07_M.jpg",
"9/goodpc.3/0_52cc_f3e6c095_M.jpg","9/goodpc.4/0_5785_41233a13_M.jpg")
// Интернет адрес вызова альбомов
FotoAlbum.PagePath="http://fotki.yandex.ru/users/goodpc/album/"
FotoAlbum.PageUrl=new
Array( // Адрес перехода. Третья нет Вызова!
"17240/","19967/","","19967/","19967/","20096/","20096/","20096/")
FotoAlbum.Nadpise=new
Array(// Подпись рисунка.
"В
бальном платье", "Горный
Властелин","Мужчина в
доспехах",
"Стела,
Фентази","Боцман","Дворец
Кусково",
"Башня
и надвратная церковь - Волоколамский Иосифов монастырь",
"Стела
- Кусково, Космос, Фентази")
// Служебные данные
FotoAlbum.ImgId
= "oIMGMainAlbum"
// Определение базового id рисунка.
FotoAlbum.nSize
=
FotoAlbum.ImgUrl.length
// Общее количество рисунков
// Количество рисунков в столбце
FotoAlbum.MaxRow
= Math.ceil(FotoAlbum.nSize/FotoAlbum.MaxCol)
// Конец Объекта свойство Фотоальбома.
// Конец Глобальные данных пользователя.
// Тело программы и её функций.
function fGenTable(oPar)
{ // Создание таблицы.
// Елементы
таблицы.
sTdIMG = "<td><img
id=" +oPar.ImgId+"%s></td>"
sTdNoIMG = "<td> </td>"
sTR = "<tr><td
colspan="+oPar.MaxCol+"><hr></td></tr>"
// sGenTable - формируемый код
таблицы.
sGenTable = "<table
border=0 width='100%' style='text-align: center'>"
nCount =0
// Счётчик рисунка.
for (iRow
=
1;
iRow <=oPar.MaxRow;
iRow ++){ //
Строки таблицы.
sGenTable += "<tr>"
for (iCol = 1;
iCol <=oPar.MaxCol;
iCol ++){ //
Столбцы таблицы.
if (nCount <
oPar.nSize)
{ // Вывод ячейки с рисунком.
sGenTable += sTdIMG.replace(/%s/, nCount)
nCount += 1}
else { // Вывод ячейки без рисунка.
sGenTable +=sTdNoIMG}
} // Столбец сформирован.
if (iRow <
oPar.MaxRow){
// Вывод пустой строки разделения.
sGenTable +=sTR}
else { // Последняя строка
в таблице.
sGenTable += "</tr>"}
}
// Строка сформирована.
sGenTable += "</table>"
return (sGenTable)}
// end function fGenTable
function OpNewWin(oPageUrl)
{// Открыть новое окно
MyOpWin=window.open(oPageUrl,"WinFirstName")
MyOpWin.focus() //
Окно на передний план
window.event.returnValue =
false
}
function
fYesPar(sPar){
/* Проверка параметра вызова,
Если параметр не определён возвращает "",
Иначе значение параметра. */
sTemp
= ((sPar
==
undefined)
||(sPar ==null)||(sPar
==" ")) ? "" :
sPar
return sTemp}
// end function fYesPar
function fActiveIMG(oAlbum,par)
{ /* Переменные вызова:
Объект Фотоальбом, номер Рисунка.
Проверка и установка отсутствующих переменных вызова.*/
var
sImgUrl=fYesPar(oAlbum.ImgUrl[par])
if (sImgUrl=="")
{ // Нет переменных вызова!
window.alert("Установите
правильно параметры вызова!")
return (0)}
/* Интернет адрес
расположения рисунков,
Интернет адрес и Адрес
перехода вызова альбома,
Подпись рисунка.
Определение Объекта Рисунок. */
var sImgPath
= fYesPar(oAlbum.ImgPath)
var
sPagePath = fYesPar(oAlbum.PagePath)
var
sPageUrl = fYesPar(oAlbum.PageUrl[par])
var
sNadpise =fYesPar(oAlbum.Nadpise[par])
var
oImg =
oAlbum.ImgId +
par
with (document.images[oImg]){
onload=function()
{ // Обработчик события - Загрузка рисунка.
style.filter=""//
Стиль рисунка
Сообщение.
if (sPageUrl == ""){
// Cтраницы для вызова нет
style.cursor=""
// курсор по умолчанию
alt=((sNadpise
== "") ? "" : "Фотография:
"+sNadpise+"."
) }
else { // Есть страница для вызова
style.cursor="hand"
alt=((sNadpise
== "") ? "" : "Фотография:
"+sNadpise+".\n"
)+
"Кликни: Вызов фотоальбома."}
// Обработчики других событий. После загрузки рисунка!
onmouseover=function()
{// Мышка на рисунке. "Статус" сообщение.
window.status="Фотография:
"+height
+ " X
" + width
+" px,
"
+ Math.ceil(fileSize/1024)
+ "
Kb."}
onmouseout=function()
{// Мышка ушла с рисунка.
window.status=""}
if (!(sPageUrl == ""))
{
// Есть страница для вызова
onclick= function() {// Клик мышкой, Вызов новой страницы.
OpNewWin(sPagePath +
sPageUrl)} //
Окно на передний план.
}
// end if
}
// End OnLoad.
// Вывод рисунка и его атрибутов.
style.border="0";
style.cursor="wait"//
Стиль рисунка.
style.filter="alpha(Opacity=50),
gray()"
alt="Загружается..
" // Сообщение.
src=sImgPath+sImgUrl
// Определение рисунка.
} //end with.
} //end function fActiveIMG.
function fActiveIMGAll(oPar)
{ // Вставка и Управление всеми Фото.
for (nCount
=
0;
nCount <
oPar.nSize ;
nCount ++){
fActiveIMG(oPar,
nCount) } // end for nCount
} //end function fActiveIMGAll
function fWrNameAlbum(oPar,
sClass){//
Названия Фотоальбома
var
sTemp = "<p
class="+sClass+">"
// вывод
sTemp
+= "ФотоАльбом:
"+oPar.AlbumName+"</p>"
return
(sTemp)}
// Вывод документа. Все вызовы оперируют с объектом
// свойств Фотоальбома (FotoAlbum) !
document.write(fWrNameAlbum(FotoAlbum,"AlbumZag"))//
Название
// Фотоальбома. Стиль AlbumZag см: определение
стилей
// <style>...</style>
document.write(fGenTable(FotoAlbum))
// Создание таблицы
fActiveIMGAll(FotoAlbum)
// Вставка и Управление всеми Фотографиями
</script>
Нетрудно видеть, что при
увеличении объёма отображаемых образов фотографий (Объекта
свойств Фотоальбома), объём HTML страницы будет уменьшаться. При этом,
если создать Объект свойств Фотоальбомов (для
нескольких фотоальбомов) - Object Data Parameters,
то одна страница может отображать разные фотоальбомы. Этот принцип реализован на
странице
Мобильное фото. Исходный "листинг" вы
можете найти в
Zip архиве, файл
album_obj.htm. Далее приводится упрощённый
HTML и Script "листинг".
<style>
.AlbumZag
{ } /* См. предыдущий пример */
</style>
<script
language=javascript>
/* Пример создания Таблицы, внедрения Object Images Function
и создания
объекта Фотоальбомы - Object Data Parameters.
Copyright © By: Апарышев
Валерий Павлович. All rights reserved.
Глобальные данные, пользователя.
Создаём Объект свойств Фотоальбомов. */
var FotoAlbum=new
Object()
FotoAlbum.Kolichestvo
/* Количество фотоальбомов.
Адрес Страницы Фотоальбома, не обязательно определять
параметр. По умолчанию, этаже страница. */
FotoAlbum.UrlBacesPage
//= "album_obj.htm"
FotoAlbum.FotoKol // Всего количество фотографий.
/* Структура Фотоальбома (FotoAlbum[NNN]).
Данные формируемые пользователем,
тип данных смотри предыдущий пример:
AlbumName - Название Фотоальбома.
AlbumComent - Комментарий к Фотоальбому, не
обязательный параметр.
MaxCol - Количество столбцов в отображаемом
Фотоальбоме.
ImgPath - Интернет адрес расположения рисунков.
ImgUrl - Url Адрес рисунка. Полный адрес:
ImgPath+ImgUrl
PagePath - Интернет адрес вызова страниц.
PageUrl - Адрес перехода. Полный адрес:
PagePath+PageUrl,
не обязательный параметр.
Nadpise - Подпись (Название) рисунка, не
обязательный параметр.
Служебные данные, формирующиеся программно:
nSize - Общее количество рисунков в Фотоальбоме.
MaxRow - Количество строк в Фотоальбоме.
ImgId - Базовое определение id рисунка. */
// Фотоальбом №0.
FotoAlbum[0]=new
Object()
// аналогично для других Фотоальбомов.
// Конец Глобальные данных пользователя.
// Служебные данные
var nKol = 0 //
Всего количество фотографий.
var props //
Специальный параметр, одновременно счётчик.
for (props
in FotoAlbum){
// Определение служебных данных.
FotoAlbum[props].nSize
= FotoAlbum[props].ImgUrl.length
FotoAlbum[props].MaxRow
= Math.ceil(FotoAlbum[props].nSize/
FotoAlbum[props].MaxCol)
FotoAlbum[props].ImgId
= "oIMGMainAlbum"
nKol
+= FotoAlbum[props].nSize}
// end for
FotoAlbum.Kolichestvo=props
// Количество фотоальбомов.
FotoAlbum.FotoKol=nKol
// Всего количество фотографий.
// Адрес Страницы Фотоальбома вычисляется, если не определён.
if (!FotoAlbum.UrlBacesPage)
{ FotoAlbum.UrlBacesPage = fUrlMainPage()
}
// Конец Описания свойств Фотоальбомов.
// Тело программы и её функций.
function fUrlMainPage(){ // Определение базового
sTemp=location.href
// Url ФотоАльбома
if (sTemp.indexOf("?")
> 0) {
sTemp =
sTemp.substr(0,sTemp.indexOf("?"))}
return sTemp}
/* --------------------------------------------------------------
Тело
функций:
fGenTable()
OpNewWin()
fYesPar()
fActiveIMG()
fActiveIMGAll()
fWrNameAlbum()
см.
предыдущий пример.
-------------------------------------------------------------- */
function fAlbum(){//
Получение № Фотоальбома
var
nTemp = 0
// вывод
return
(nTemp)}
var nAlbum
= fAlbum() // №
фотоальбома определяется как некоторая функция
var MainAlbum=FotoAlbum[nAlbum]
// Вывод документа. Все вызовы оперируют с объектом
// свойств Фотоальбома (MainAlbum) !
document.write(fWrNameAlbum(MainAlbum,"AlbumZag"))//
Название
// Фотоальбома. Стиль AlbumZag см: определение
стилей
// <style>...</style>
document.write(fGenTable(MainAlbum))
// Создание таблицы
fActiveIMGAll(MainAlbum)
// Вставка и Управление всеми Фотографиями
</script>
Простой Фотоальбом на 3 - 4 фотографии см:
Пример использования -
Object Images Function.
|
