Using custom HTML tag attributes

 

Привет всем! Хотел бы обратить внимание будущих авторов Weekly на парочку скриптов, которые я написал с прицелом на то, чтобы все желающие ими пользовались. Они, в частности, применяются в выпусках Weekly108 и 115.

Эти скрипты позволяют открывать фотографии в отдельном окошке с настраиваемым пользователем серым фоном и, при желании, показывать в нём имя автора, подпись к фотографии и название камеры. Открывание в pop-up window может быть легко отменено пользователем, фотографии тогда будут открываться в основном окне непосредственно как JPEG.

Пользоваться скриптами просто, я старался сделать так, чтобы непрограммист легко это делал.

***************************************************************************

Откройте пожалуйста в Вашем browser'е страничку 115 и нажмите View -> Source.


1.
В самом почти верху Вы увидите следующие строчки

<script language="javascript" src="../includes/js/common.js"></script>
<script language="javascript" src="../includes/js/cookie.js"></script>

Первую строчку необходимо включать (между <head> и </head>), если страница содержит фотографии, а вторую - если на ней внизу будет помещён checkbox, который выключает открывание фотографий в отдельном окне.

2.
В opening tag секции <body></body> в самом верху надо включить следующее:

<body
onload="prepareLinks(imagedata, 'imglnk', '../viewpicwindow.htm')"
onunload="closePictWin()">

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

3.
Все линки на фотографии, которые Вы хотите открывать в отдельном окне и только такие линки выглядят следующим образом:

<a
name="imglnk"
href="[адрес (url) фотографии]"
imgtitle="[Подпись к фотографии]"
imgauthor="[Автор фотографии]"
imgcamera="[Название камеры]">[текстовый линк или маленькая картинка-thumbnail]
</a>

Например:
<a name="imglnk" href="images/lev_gorenstein1.jpg" imgtitle="Lev" imgauthor="Vladimir Kelman" imgcamera="Nikon FM2"><img src="images/lev_gorenstein1_sm.jpg" width="156" height="200" border="0" align="left" vspace="2" hspace="15"></a>

Включение custom attribute
name="imglnk"
обязательно, если эта фотография должна открываться в отдельном окошке,
custom attributes imgtitle, imgauthor, imgcamera добавляются по Вашему желанию.

***************************************************************************
Вот, собственно, и всё, что нужно сделать Вам - автору выпуска Weekly. Основная программистская идея тут - использование custom html tag attributes, распознаваемых с помощью JavaScript. О такой возможности мне, в своё время, напомнил Рома Озеров, а вобще-то это известный приём, многие промышленные HTML editor applications его используют. Одна из альтернатив - использование html comments, которые тоже могут быть прочитаны JavaScript, но custom attributes - более изящное решение.

Я старался, чтобы старые browsers, по возможности, тоже позволяли смотреть страничку. У меня применена некая примитивная обработка ошибок, которая выключает открывание фотографий в отдельном окне, если browser не поддерживает эти возможности JavaScript/DHTML.
Большинство пользователей теперь применяют Internet Explorer 5.5+, я лично предпочитаю Mozilla/FireFox. Opera, если не ошибаюсь, отличается дурацким default setting, по которому window.open(url, window_name) открывает не новое окно, а новую tab (как это по-русски?). Это мешает.

Посмотрите JavaScript, котрый я использую, окошко, в котором открываются фотографии вот (используйте View Source). Там тоже есть кое-какие скрипты, ответственные за поведение окошка.

4. (optional)
Кроме того, автоматически генерируются подписи под фотографиями на страничках "все фотографии", как тут, например. Откройте Source Code, и Вы увидите, что вверху вставлена та же строчка

<script language="javascript" src="../includes/js/common.js"></script>

а в открывающем tag'е <body> добавлен вызов ещё одной функции prepareTitles():

<body onload = "prepareLinks(imagedata, 'imglnk', '../viewpicwindow.htm'); prepareTitles(imagedata, 'imgtxt');" onunload = "closePictWin()">

Это довольно примитивная функция, она требует, чтобы страничка типа "все фотографии" была организована так, как http://www.poxod.com/weekly/108/tocllaraju_pict.htm: каждой маленькой картинке типа

<a name = "imglnk" href = "images/kelman/peru_s02_n80_09.jpg" imgtitle = "К лагерю 5200." imgauthor = "Vladimir Kelman" imgcamera = "Nikon N80"><img src = "images/kelman/peru_s02_n80_09_sm.jpg" width = "200" height = "141" border = "0" align = "left" vspace = "2" hspace = "15" ></a>

соответствовало ниже

<span name = "imgtxt" id = "imgtxt"></span>

Тогда в этот <span> будет вставлена правильная подпись к фотографии.

5. (optional)
Если Вы хотите, чтобы пользователь мог включать/выключать открывание фотографий в отдельном окне, то где-нибудь внизу страницы добавьте что-нибудь вроде:

<div id="msg" style="display:none">Фотографии этой странички открываются в отдельном окне, если Вы пользуетесь новым браузером IE или Mozilla/Firefox. Если же Вы хотите, чтобы фотографии открывались просто как JPEG-картинки, поставьте галочку: <input type="checkbox" id="popoff" onclick="setCookie('popoff', (this.checked)? 'yes' : ''); window.location.replace(window.location.href);">.</div>

И, где-нибудь ниже,

<script language="javascript">
if ((typeof(document.getElementById) == 'function') || (typeof(document.getElementById) == 'object')) {
var chckpopoff = document.getElementById('popoff');
chckpopoff.checked = (getCookie('popoff') == 'yes');
document.getElementById('msg').style.display = '';
}
</script>

На странички с фотографиями в <body> tag при этом не забудьте включить

<script language="javascript" src="../includes/js/cookie.js"></script>

Это позволяет показывать checkbox для включения/выключения открывания фотографий в отдельном окне только при просмотре СОВРЕМЕННЫМИ browser'ами со включённой поддержкой JavaScript

 

    Home Page     Developer Page        
   
    ©Vladimir Kelman, 2005