Прямо в Локальной Сети, Intranet или Internet !!

Простой фотоальбом.

 
 
Добавьте страницу
“Простой фотоальбом ”
в Избранное !!
Установите локальную версию goodpc.zip

 

Назначение страницы.

Мой фотоальбом.

Типовая задача, решаемая многими 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.aparyshev.ru/img/arl.eot")}
@font-face {
           font-family:
Arlekino; src: local("Arlekino"), local("Arlekino"),
          
url("http://www.aparyshev.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>&nbsp;</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()
см. предыдущий пример.
-------------------------------------------------------------- */

f
unction 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.

To be continue...





В Начало Страницы:
Простой фотоальбом”.

G

Copyright © 1997 - 2017. By: Апарышев Валерий. All rights reserved.

×µ

For Not Commercial Use !!

µØ

Пошлите Автору Пожалуйста Письмо !!

+


Яндекс.Метрика