На многих сайтах можно встретить “красивое” увеличение картинок по клику, а также слайдшоу, перемещение между изображениями и некоторые другие функции. При этом особенно удачно иногда используется затемнение оставшейся части экрана. Получается lightbox (дословно что-то вроде “светлая коробка”).

Рассмотрим некоторые инструменты, с использованием которых можно легко разместить всплывающие изображения в lightbox у себя на сайте.

Собственно lightbox (ныне Lightbox 2)
Скрипт использует библиотеки prototype.js и scriptaculous.js Если не считать их, то размер скрипта довольно мал. http://www.lokeshdhakar.com/projects/lightbox2/

Lightview
Скрипт использует JavaScript-библиотеки prototype.js и scriptaculous.js
Сайт и демо: http://www.nickstakenburg.com/projects/lightview/

LightWindow
Также использует упомянутые библиотеки javascript. Вполне функционален.
http://stickmanlabs.com/lightwindow/

jQuery lightBox plugin
фактически плагин для Jquery с функционалом, аналогичным lightbox-оригиналу.
http://leandrovieira.com/projects/jquery/lightbox/

Highslide.js
Не использует дополнительных javascript-фреймворков. Полностью автономный скрипт с довольно внушительным функционалом. Позволяет внедрять не только изображения, но и страницы, HTML-код, flash. Удобно реализована работа с галереями изображений - предпросмотр
http://highslide.com/

FancyBox для JQuery
Похоже, лучшее решение для jquery - куча возможных вариантов анимации, работа с галереями изображений. В общем, смотреть примеры на
http://fancybox.net/

jsImageBox
очень компактный автономный скрипт без использования фреймворков
http://jsimagebox.ru/

Shadowbox.js
Решение может использовать как любой из нескольких популярных фреймворков, так и обходиться без них - нужный вариант можно загрузить с сайта
http://shadowbox-js.com/

Конечно, такое количество lightbox-скриптов не обязательно использовать на собственных сайтах. Вполне достаточно освоить один из вариантов. Хотя, знать о существовании альтернатив иногда бывает полезно.

Задача:

Используя javascript динамически формировать options у html элемента select.

Вариант решения с использованием свойства innerHTML:

html:
<select id="select1"><option value="val1">text1</option></select>

javascript:
myselect = document.getElementById('select1');
select1.innerHTML = '<option value="val2">text2</option><option value="val3">text3</option>';

Такое решение не везде работает  (mozilla firefox этот код обрабатывает. Opera и IE отказались напрочь)

http://support.microsoft.com/kb/276228 - с официального сайта Microsoft про innerHTML у Select. Там же варианты “обхода” этого бага.

Вариант 1 - использование js массива .options[] у элемента select:
select1.options[i] = new Option(i,i);

Вариант 2 - замена innerHTML у родительского элемента (т.е. HTML должен включать сам тэг select):
<div id="out1"><select ..> </select></div>
js: document.getElementById ('out1').innerHTML = '<select id="select1" name="select1"><option ...>...</option></select>';

ps. Все-таки наткнулся на решение на одном из лучших (на мой взгляд) ресурсов по web:
Javascript SELECT - динамические списки

UPD2 Вариант получения данных для формирования элемента select через ajax: Для передачи в JavaScript пар ID:значение используем responseText в формате JSON, значение которого вычисляем при помощи функции eval.


data = eval (transport.responseText);
for (i=0; i< =data.length-1; i++)
myElement.options[i]=new Option(data[i][1],data[i][0])
При этом скрипт должен отдавать массив в виде:
[
['1','название первого элемента'],
['2','название второго элемента'],
]

Prototype.js - один из популярных javascript фреймворков.
www.prototypejs.org - официальный сайт Prototype - там есть как документация, так и примеры.

http://www.prototypejs.org/learn/json -

Сразу скажу, что  “нормально” реализовать json на prototype у меня не получилось… -примеры с официального сайта “не пошли”.
prototype version 1.5.0

person = '/*-secure-\n{"name": "Violet", "occupation": "character"}\n*/'.evalJSON()
person.name;
//-> "Violet"

Такого рода конструкция работала только через eval():

var d='{ "name":"Violet","occupation":"character" }'; //json string
d = eval('(' + d + ')');
alert (d.name);

В итоге, вместо json принял решение использовать старый добрый innerHTML:

$("result").innerHTML= transport.responseText;

Возможно, дело в кривых руках (отсутствии документации, времени, мозгов ), однако, не исключено, что в “Last updated on May 1st, 2007″…

Да.. почему prototype.. Проект изначально построен с его использованием…

Потребовалось перед отправкой формы изменить “адресат” - action у формы. По идее ничего сложного -
document.form1.action = 'new_address.html';
или аналогичные

document.getElementById('form1').action = 'new_address.html';
document.forms[0].action = 'new_address.html';

однако, такого рода конструкция работает везде, кроме internet explorer…
Объясняется это тем, что в IE нет различий между свойствами и атрибутами.
Поиск подсказал, что для изменения action у формы можно использовать setAttribute
document.form1.setAttribute("action","'new_address.html")
Но и в этом случае, internet explorer не порадовал.
Однако, различия, все-таки обнаружены - оба варианта для internet explorer:
- для случая “form1.action = …” браузер выдал ошибку “object doesn’t support …”;
- для случая “form1.setAttribute();” ie отправляет по старому адресу;

После очередной порции поисков по интернету, размышления над JavaScript мануалами изобразил что-то вроде:

o=document.getElementById('form1');
o.setAttribute("action","new_address.html"); // в IE "пустышка", но ошибку не выдает
// рабочая конструкция для IE - изменяет action для формы путем перебора всех атрибутов
for (var i=0; i < o.attributes.length; i++) {
if (o.attributes[i].nodeName == 'action') {
o.attributes[i].nodeValue = 'new_address.html';
break;
}
}

Понимаю, что решение далеко от идеального, однако, работает
Да здравствует IE!..
ps. В очередной раз встает вопрос “А для кого стандарты?”

Довольно часто приходится сталкиваться с тем, что в сети появляются сайты как две капли воды похожие на оригиналы.. Конечно, обычно справедливость быстро торжествует, и такой сайт существует не очень долго..

Но сейчас не об этом.

Как защитить сайт от копирования?

0. Первое и самое главное, что следует усвоить: Если сайт можно просмотреть, то его можно и скопировать. Поэтому, вся так называемая защита от копирования, обычно помогает от пользователя неискушенного. Хотя, чаще всего, именно такие и хотят “скопировать” текстовую информацию или картинки с сайта.

Ну что ж.. А теперь перейдем к приемам, которые помогут защитить Ваш сайт от копирования:

1. Запрещаем кэширование страниц сайта. Это можно сделать несколькими способами:
Тэг HTML:
<meta http-equiv="Pragma" content="no-cache" />
или:
<meta http-equiv="Cache-Control" content="no-cache" />
Или
<meta http-equiv="no-cache" />
HTTP-заголовок (header):

Прочитать более подробно о кэшировании страниц

2. Запрещаем вызов контекстного меню в Internet Explorer
<body oncontextmenu="return false;" ondragstart="return false;">

3. Запрещаем выделение текста для копирования в Internet Explorer:

<script language="JavaScript">
document.onselectstart = returnfalse;
//запрещаем выделение
document.ondragstart = returnfalse;
//запрещаем перетаскивание
function returnfalse() {
return false;
}
</script>

4. пользуемся функциями escape | unescape
<script language="javascript">
mystring = "%u0412%u0441%u0442%u0430%u0432%u044C%u0442%u0435%20%u0442%u0435%u043A%u0441%u0442.";
document.write (unescape(mystring));
</script>

5. Для защиты изображений от копирования рекомендуется использовать так называемые водяные знаки или ватермарки (watermark) - наложение на изображение “полупрозрачного” изображения с названием своего сайта, или любого другого изображения, которое “идентифицирует” Вас, как владельца. Многие владельцы сайтов отказываются от копирования изображений с водяными знаками, на которых указан сайт “оригинал”.

6. Для защиты текста сайта от копирования  существуют сервисы, отслеживающие уникальность текста. Например CopyScape.com. Конечно же, по сути, сервис напрямую не защищает текст от копирования, однако, если в сети появится сайт с текстом, который “очень похож” на текст Вашего сайта, Вы об этом узнаете, и сможете сообщить “куда надо”

Чтобы подключить на одной странице два (или более) редактора FCKEditor можно “дублированием кода” создать дополнительный объект, задать требуемый параметр name формы (при создании) и вывести код в нужное место.

$fckeditor= new FCKeditor('description');
//устанавливаем  все настройки для первого fckeditor
$fckeditor->BasePath = '/fckeditor/';
$fckeditor->Height = '400px';
$fckeditor->Value = $value['description'];
$fckeditor->Create();  //выводим HTML-код первого редактора fckeditor
unset ($fckeditor); //не обязательно

$fckeditor= new FCKeditor(’full_description’); // второй редактор
//устанавливаем  все настройки для первого fckeditor
$fckeditor->BasePath = ‘/fckeditor/’;
$fckeditor->Height = ‘400px’;
$fckeditor->Value = $value[’full_description’];
$fckeditor->Create();  //выводим HTML-код первого редактора fckeditor
unset ($fckeditor); //не обязательно

Способ, возможно, не самый рациональный, но рабочий. В общем-то ничего сложного, но может оказаться полезным для установки второго (третьего..) редактора “на скорую руку”

В очередной раз стала актуальной задача с подготовкой бланков. Однако, способ с бланком в формате rtf не подходит - файл .doc весит ~2 Мб, файл же rtf ~ 34 Мб. Видимо, зависит от хранения рисунков…

Работать с COM-объектом Word можно непосредственно из PHP:

// Код PHP
$word=new COM("Word.application") or die("Couldn't start Word!");
//после создания объект невидимый
//сделаем его видимым и активизируем (разумеется, для работы на сервере это необязательно)
$word->visible =1;
$word->Activate();
//Создать документ по шаблону:
$word->Documents->Add("c:\\template.dot");
// действия - найти-заменить и т.д. Описаны в документации по VisualBasic for Application - в справке MS Word (по умолчанию не устанавливается)
$word->ActiveDocument->SaveAs("C:\\".$fname);
$word->Quit();

Однако, подобный способ подходит только для Windows-серверов.

Еще один вариант - работа с COM-объектом на стороне клиента через Active-X при помощи JavaScript:


><script language="javascript">
// Создание объекта MS Word:
word = new ActiveXObject ("Word.Application");
// Создание документа и установка параметров страницы:
with (word) {
Documents.Open('c:\\0.doc');
ActiveDocument.Label1.Caption = < ?=$sum?>;
ActiveDocument.SaveAs ('c:\\1.doc');
Quit (); // завершает работу MS Word
}
</script>

Предварительно следует сохранить документ-шаблон на диск C:\ с именем 0.doc.
В шаблоне - создать “Label”-ы и расположить их в соответствии с нужным расположением текста.
С учетом специфики задачи - получаем еще один небольшой выйгрыш - “основной” файл не качается с сервера.
Технология, думаю, понятна. Вариации - насколько фантазии хватит.

ps. Не забудьте поставить разрешения в свойствах обозревателя.

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

А в Надежные узлы следует добавить “Наш” сайт - где формируются бланки.

Имеем несколько элементов input типа radio (знакомые с формами Windows иногда кличут их radiobutton). Требуется получить значение value “выбранного” элемента.

<input type="radio" value="value" />
<input type="radio" value="value2" />
<script type="text/javascript" language="javascript">
input = document.getElementsByTagName('input');
for(i=0;i<(input).length;i++){
if(input[i].getAttribute('type')=='radio'&&input[i].checked){
alert(input[i].getAttribute('value'));
}
}
</script>

Без перебора элементов совсем не обойтись. Однако, можно сократить количество элементов для перебора в пределах формы:

<script language="JavaScript" type="text/javascript">
function showStatus(f) {
var s = "";
for (var i=0; i<f.elements["radiobutton"].length; i++) {
var btn = f.elements["radiobutton"][i];s += btn.value + ": " + btn.checked + "\n";
}
window.alert(s);
}
</script>
<form>
<input type="radio" name="radiobutton" value="First" />1
<input type="radio" name="radiobutton" value="Second" />2
<input type="radio" name="radiobutton" value="Third" />3
<input type="button" value="Show status" onclick="showStatus(this.form);" />
</form>

Загрузка изображений при помощи javascript - часто используется для смены картинок, чтобы после загрузки основной части страницы не “расстраивать” пользователя временнОй задержкой, требующейся для загрузки картинки.
<script type="text/javascript" language="javascript">
//загрузка изображений (preload images)
var pictures = new Array('pic1.jpg','pic2.jpg','pic3.jpg');
for (i=1;i<pictures.length; i++) {
t = new Image();
t.src = pictures[i];
}
</script>

Ссылки вида mailto: становятся объектом поиска компаний, занимающихся массовых рассылок. Естественно, ищут они не вручную, а при помощи программ или скриптов. Чаще всего алгоритм поиска прост - ищем подстроку вида mailto:__EMAIL__ и выделяем из неё часть после двоеточия.

Способы обхода: Читать целиком »