SimpleCoding.org » HTML http://www.simplecoding.org Блог о программировании Fri, 27 Jan 2012 18:27:45 +0000 en hourly 1 http://wordpress.org/?v= jQuery: обработка параметров URL http://www.simplecoding.org/jquery-obrabotka-parametrov-url.html http://www.simplecoding.org/jquery-obrabotka-parametrov-url.html#comments Fri, 19 Aug 2011 07:45:55 +0000 Владимир http://www.simplecoding.org/?p=1225 jquery parsequery

Приветствую всех!

Сегодня хочу показать небольшой пример использования библиотеки jQuery для работы с параметрами ссылок.

Предположим на нашей странице есть ссылка, клик по которой отправляет запрос на выполнение некоторой операции. Пускай это будет удаление какого-нибудь объекта.

HTML разметка такой ссылки может выглядеть следующим образом.

<a class="delete" href="http://www.simplecoding.org/script.php?action=delete_object&object_id=1">Удалить</a>

Как видите, ссылка содержит два параметра (action и object_id), значения которых PHP скрипт сможет получить из массива $_GET.

Теперь, мы хотим выполнить удаление объекта с помощью AJAX запроса. Изменять ради него ссылку нет никакой необходимости. Просто назначаем обработчик для события click.

$('a.delete').click(function() {
  return false;
});

Этот код блокирует отправку обычного запроса при клике по ссылке. Нам нужно получить параметры и отправить AJAX запрос.

В обработчике события click получить значение атрибута href ссылки можно следующим образом.

$(this).attr('href')

Затем нужно найти в этой строке параметры. Тут есть два варианта.

1) Если вам достаточно параметров, указанных в атрибуте href и вы не хотите их изменять, то просто передать методам $.ajax (или $.post, или $.get) строку с параметрами запроса.

Т.е. код будет выглядеть примерно так

var params = $(this).attr('href').split('?');
$.post('ajax_delete.php', params[1], function(response) {
    console.log(response);
} );

Здесь мы с помощью метода split разбили запрос на две части (по знаку вопроса), и передали методу $.post второй элемент массива params. Для данного примера он выглядит так
action=delete_object&object_id=1

2) Если перед отправкой AJAX запроса нужно изменить/удалить/добавить какие-то параметры, то удобнее всего преобразовать строку с параметрами в хеш.

Для этих целей существует специальный плагин – parseQuery

Использовать его можно так.

var params = $.parseQuery($( this ).attr( 'href' ).split('?'));

В результате вы получите хеш

{
	action: delete_object,
	object_id: 1
}

Код отправки AJAX запроса при этом не изменяется. Точно также передаёте переменную params во втором параметре метода $.post.

В заключение посмотрите код обработчика целиком.

$(document).ready(function() {
	$('a.delete').click( function() {
		var params = $(this).attr('href').split('?');
		$.post('ajax_delete.php', params[1], function(response) {
			console.log(response);
		});
		return false;
	});
});

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

Если есть вопросы или замечания, пишите.

Успехов!

Интересно почитать

Платежный модуль Robokassa для Magento с поддержкой.

Нужна фотокнига? В наличие фотокниги образцы, множество видов дизайна и верстки

]]> http://www.simplecoding.org/jquery-obrabotka-parametrov-url.html/feed 8 HTML5: загрузка файлов с помощью Drag & Drop http://www.simplecoding.org/html5-zagruzka-fajlov-s-pomoshhyu-drag-drop.html http://www.simplecoding.org/html5-zagruzka-fajlov-s-pomoshhyu-drag-drop.html#comments Thu, 21 Jul 2011 13:13:41 +0000 Владимир http://www.simplecoding.org/?p=1222 html5 drag&drop upload

Приветствую всех!

В этой статье хочу рассказать о нескольких своих экспериментах с HTML5. Начну издалека. Всем нам периодически приходится работать с различными web интерфейсами и часто возникает ощущение, что эта работа могла бы быть организована более эффективно.

Возможно, в каких-то случаях виноваты разработчики сервиса, но часто проблема заключается в ограничениях, которые накладывают браузеры. Рассмотрим загрузку файлов на сервер. В большинстве случаев вам предложат стандартное поле с кнопкой выбора файла с вашего компьютера и/или поле, в котором можно указать URL файла, размещенного где-нибудь в Сети.

Загрузку файлов с локального компьютера трогать пока не будем, я планирую опубликовать отдельный пост на эту тему, разберем загрузку с удалённого сервера.

Проблемы начинаются с первого же шага. Даже если вы четко понимаете, где искать URL и хорошо умеете пользоваться инструментами вроде firebug, то всё равно потребуется несколько кликов мышкой чтобы получить нужный адрес. Было бы гораздо удобнее просто перетянуть нужную картинку из одного окна браузера в другое.

Пример реализации такого интерфейса я покажу в этой статье. Если хотите, можете посмотреть, как он работает на демонстрационной страничке или скачать архив с исходниками.

демонстрационный примерархив с исходным кодом

Обратите внимание! Данный пример работает только в браузере Google Chrome. По-идее, поддержка всех необходимых технологий есть в Firefox и Safari, но с ними я пока не разбирался.
В качестве объектов для «перетягивания» я брал в основном картинки с википедии. Было замечено несколько проблем связанных с не латинскими символами в URL картинок, но чтобы не перегружать пример проверками и преобразованиями я их оставил как есть.

Принцип работы

Стандарт HTML5 предусматривает поддержку «перетягивания» объектов страницы (Drag and Drop). Кстати, пример простейшей реализации D&D я уже показывал – Drag & Drop с использованием HTML5. И, кроме того, есть довольно много JavaScript библиотек, реализующих поддержку D&D.

Но тут важно понимать, что если необходимо «перетягивать» картинки со сторонних ресурсов, то использовать библиотеки не получится. Т.к. вы не сможете добавить свой JS код на чужую страницу. А для того, чтобы загрузить картинку, нам нужно получить её URL, т.е. браузер должен вместе с перетягиваемым объектом передавать и его параметры (например, атрибут src картинки или весь тег img).

В этом случае мы можем создать на своей странице «приёмник» картинок. Это будет обычный div которому назначен обработчик события drop. Если пользователь «сбросит» картинку над этим div'ом, то будет вызван обработчик и в первом параметре он получит объект, содержащий информацию о перетягиваемой картинке.

Дальше всё достаточно просто. Если мы получили нужный URL, то можно отправить AJAX-запрос серверному скрипту, который выполнит загрузку файла.

Реализация

Начнём со страницы нашего приложения.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Images Upload</title>
		<link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body>
		<div id="images"></div>
		<div id="img_target"></div>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
		<script src="main.js"></script>
    </body>
</html>

На ней размещены два блока: images – здесь будем показывать загруженные изображения и img_target – на этот блок нужно перетягивать картинки.

Внизу страницы подключаем библиотеку jQuery и скрипт main.js, который будет отправлять информацию о перетянутых изображениях на сервер.

Рассмотрим main.js

$(function() {
    $('#img_target')
        .bind('dragenter', function(event) {
            $(this).addClass('drop_here');
            return false;
        })
        .bind('dragleave', function(event) {
            $(this).removeClass('drop_here');
            return false;
        })
        .bind('dragover', function(event) {
            return false;
        })
        .bind('drop', function(event) {
            $(this).removeClass('drop_here');
			var srcRegex = /src=\"([^\s]+)\"/ig;
            var data = event.originalEvent.dataTransfer.getData('text/html');
			var img_data = srcRegex.exec(data);
			$.post('upload.php', {'file_url':img_data[1]}, function(res) {
				var response = eval('(' + res + ')');
				$('#images').append($('<img src="' + response.file_url + '" />'));
			});
            return true;
        });
});

Здесь мы назначаем обработчики событиям dragenter, dragleave и dragover. Все они должны просто возвращать false и, чтобы как-то проинформировать пользователя о том, что можно «сбрасывать» картинку, в обработчике dragenter устанавливаем CSS класс drop_here для блока-приёмника.

Основная часть работы выполняется в обработчике события drop. При возникновении этого события мы читаем информацию о «сброшенном» объекте и «вырезаем» значение атрибута src, т.е. URL картинки (строки 16-18). Информация передается в объекте event.originalEvent.dataTransfer (строка 17).

Затем формируем обычный AJAX запрос и в качестве параметра передаём ему найденный URL.

Серверный скрипт (upload.php) получит URL изображения на удалённом сервере и загрузит его. А в ответе на AJAX запрос он отправит новый URL загруженной картинки.

В свою очередь, обработчик AJAX-запроса создаст тег img и вставит его в блок images. Таким образом, загруженные картинки будут появляться над полем загрузки.

Рассмотрим upload.php

<?php

define('BASE_URL', 'http://localhost/tests/images-upload/');

function upload_from_url($file_url) {
	$url_segments = explode('/', $file_url);
	$file_name = urldecode(end($url_segments));
	if (false !== $file_name) {
		$file_name_parts = explode('.', $file_name);
		if (in_array(strtolower(end($file_name_parts)), array('jpeg','jpg','png','gif'))) {
			$destination=fopen("upload/".$file_name,"w");
			$source=fopen($file_url,"r");
			$maxsize=300*1024;
			$length=0;
			while (($a=fread($source,1024))&&($length<$maxsize)) {
				$length=$length+1024;
				fwrite($destination,$a);
			}
			fclose($source);
			fclose($destination);
		}
	}
	$new_file_url = BASE_URL.'upload/'.$file_name;
	return $new_file_url;
}

$res = array('err' => 'Не указан URL файла');

if (isset($_POST['file_url'])) {
	$new_url = upload_from_url($_POST['file_url']);
	$res = array('file_url' => $new_url);
}

echo json_encode($res);

Принцип работы следующий. Читаем URL картинки и пытаемся её загрузить (строки 29-32).

Если картинка загружена, сохраняем её в папку upload. Получение картинки с удалённого сервера осуществляется с помощью функций fread. Файл читаем блоками по 1кБ (строки 15-18). Такой подход позволяет прервать загрузку файла, если его размер превышает заданный предел (в данном случае 300кБ).

После загрузки файла формируем для него URL и отправляем браузеру в формате JSON.

Как видите, реализовать такой загрузчик несложно. И пользоваться им достаточно удобно. Естественно, основным недостатком является поддержка HTML5 браузерами, точнее её отсутствие ;)

Тем не менее, если вы создаёте интерфейс для сотрудников какой-нибудь компании, и можете оговорить тип браузера, то HTML5 вполне можно использовать.

Успехов!

Интересно почитать.

Фотокнига — фантастический сюрприз для любимого мужчины. Попробуйте сами!

Правильно подготовим 3-ндфл при покупке квартиры за 2011 год, дадим инструкции для получения вычета

Нужно распарсить сайт? Интересный пример как написан парсер на php. Можно даже скачать скрипт парсера.

]]> http://www.simplecoding.org/html5-zagruzka-fajlov-s-pomoshhyu-drag-drop.html/feed 9 Как показать на Google Maps объекты, находящиеся в заданной области http://www.simplecoding.org/kak-pokazat-na-google-maps-obekty-naxodyashhiesya-v-zadannoj-oblasti.html http://www.simplecoding.org/kak-pokazat-na-google-maps-obekty-naxodyashhiesya-v-zadannoj-oblasti.html#comments Tue, 28 Jun 2011 09:48:03 +0000 Владимир http://www.simplecoding.org/?p=1214 google maps

Показать пример решения такой задачи меня попросили в комментариях к одной из предыдущих статей о Google Maps. С выполнением этой просьбы я довольно сильно затянул, но, надеюсь, эта статья кому-нибудь пригодится :)

Начнём с постановки задачи

Предположим, у нас есть данные о группе объектов (их названия и координаты). Необходимо отметить их на карте с помощью маркеров. При этом, показать нужно не все объекты, а только те, которые находятся внутри заданной области.

Будем считать, что заданная область представляет собой окружность, т.е. мы знаем координаты её центра и радиус. А координаты объектов находятся в KML файле (это XML формат, разработанный для описания объектов на Google maps).

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

1) Читаем координаты объекта из KML файла.
2) Рассчитываем расстоянием между центром окружности и текущим объектом.
3) Если это расстояние меньше радиуса окружности, ставим маркер, если больше – пропускаем объект.

Переходим к решению.

Посмотреть, как работает этот пример, можно на демонстрационной страничке или установив скрипты на своем сервере.

демонстрационный пример архив с исходным кодом

Серверная часть

Начнем с серверного скрипта, который формирует страницу с картой (index.php).

<?php
$organizations = simplexml_load_file('doc.kml');

$organizations_data = array();

foreach ($organizations->Folder->Placemark as $organisation) {
    $organizations_data[] = array(
        'name' => (string)$organisation->name,
        'coordinates' => (string)$organisation->Point->coordinates,
    );
}
?>

<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8" />
    <title>Объекты на Google Maps</title>
    <script>
<?php
    echo 'var organizations = '.json_encode($organizations_data).';';
?>
    </script>
</head>

<body>

<h1>Google Maps: отображение объектов, которые находятся в заданной области</h1>

<div id="my_map" style="width:600px;height:400px"></div>

<script src="main.js"></script>
</body>
</html>

Прежде всего, загружаем данные из KML файла (строка 2). Т.к. это обычный XML файл, то мы можем использовать любую библиотеку для работы с этим форматом. В данном случае – SimpleXML.

Затем, необходимо обеспечить доступ к этим данным на клиентской стороне, т.к. настройка Google Maps выполняется с помощью JavaScript.

Для этого мы формируем массив с необходимыми данными (строки 6-11), преобразовываем его в JSON формат (строка 22) и присваиваем переменной organizations (строка 22) в теге script. Таким образом, мы получаем JavaScript массив с координатами всех объектов из KML файла.

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

Подробно разбирать работу с SimpleXML, думаю, смысла не имеет. Для данного примера достаточно понимать, что после загрузки файла вы получите объект, имеющий такую же структуру как и xml-документ.

Т.е. вызов $organizations->Folder->Placemark вернет вам содержимое тега <Placemark> в документе с такой структурой

<kml xmlns="…" xmlns:kml="…" xmlns:atom="…">
<Folder>
	<Placemark>
	…
	</Placemark>
</Folder>
</kml>

Обратите внимание! Библиотека чувствительна к регистру тегов в xml-файле.

На самой странице мы создаём блок для карты (my_map).

И подключаем файл main.js, который и будет выполнять настройку карты.

Клиентская часть

Сразу посмотрим на весь скрипт целиком.

var map, circle, circleOptions, setCenter, marker, organizations_markers;

function initialize() {
    var centerPoint = new google.maps.LatLng(48.67, 44.47); //Волгоград
    var myOptions = {
        zoom: 12,
        center: centerPoint,
        mapTypeId: google.maps.MapTypeId.HYBRID
    }
    map = new google.maps.Map(document.getElementById("my_map"), myOptions);

    //радиус окружности - 5 км
    var radius = 5;

    circleOptions = {
        center: centerPoint,
        fillColor: "#00AAFF",
        fillOpacity: 0.5,
        strokeColor: "#FFAA00",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        clickable: false,
        radius: radius*1000
    }

    //рисуем окружность
    circle = new google.maps.Circle(circleOptions);
    circle.setMap(map);

    //устанавливаем маркеры организаций
    organizations_markers = [];
    for (var i = 0; i < organizations.length; i++) {
        var ll = organizations[i].coordinates.split(',');
        var latlng = new google.maps.LatLng(ll[1], ll[0]);
        if (distHaversine(latlng, centerPoint) < radius) {
            organizations_markers[i] = new google.maps.Marker({
                    position:latlng,
                    clickable:true
                });
            organizations_markers[i].setMap(map);
        }
    }
}

function loadScript() {
    var script = document.createElement("script");
    script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
    document.body.appendChild(script);
}

rad = function(x) {return x*Math.PI/180;}

//эта функция используются для определения расстояния между точками на
//поверхности Земли, заданных с помощью географических координат
//результат возвращается в км
distHaversine = function(p1, p2) {
    var R = 6371; // earth's mean radius in km
    var dLat  = rad(p2.lat() - p1.lat());
    var dLong = rad(p2.lng() - p1.lng());

    var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
            Math.cos(rad(p1.lat())) * Math.cos(rad(p2.lat())) * Math.sin(dLong/2) * Math.sin(dLong/2);
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
    var d = R * c;

    return d.toFixed(3);
}

window.onload = loadScript;

В первую очередь мы создаём карту и устанавливаем её основные параметры (координаты центра, приближение). Для этого, назначаем обработчик событию window.onload (строка 69). Этот обработчик добавляет на страницу тег script в параметре src которого передается адрес имя метода, который будет вызван после загрузки Google Maps (в данном случае – initialize). Таким образом, все наши настройки выполняются в этом методе.

Выполняем установку параметров карты (строки 4-10). Мы указали: центральную точку (centerPoint), приближение (zoom) и тип карты (mapTypeId).

Теперь рисуем окружность (строки 13-28). Её центр совпадает с центром карты, а радиус равен 5 км. В настройках окружности указываем толщину и цвет линии, цвет и прозрачность фона и другие параметры.

После этого расставляем маркеры объектов.

Напомню, что координаты этих объектов находятся в массиве organizations, который был сформирован серверным скриптом.

Т.е. нам нужно пройтись по всем элементам этого массива и рассчитать расстояние от центра окружности до текущего объекта (строки 31-42).

Расчет расстояний для точек на поверхности Земли выполняется с помощью функции гаверсинусов (distHaversine). Её реализацию на JavaScript я взял здесь.

Если это расстояние меньше заданного, создаём маркер и показываем его на карте (строки 36-40). В противном случае – переходим к следующему объекту.

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

Если есть вопросы или замечания, пишите, постараюсь ответить в комментариях ;)

Успехов!

Интересно почитать

Хотите создать свой сайт? Template CMS – быстрая и маленькая CMS! Поможет решить эту задачу с минимальными затратами времени и ресурсов.

В раздумьях, что подарить на свадьбу друзьям? Попробуйте свадебную фотокнигу.

Заполним 3-ндфл за 2011 год за 1 день, от 500 рублей!

]]> http://www.simplecoding.org/kak-pokazat-na-google-maps-obekty-naxodyashhiesya-v-zadannoj-oblasti.html/feed 2 JavaScript XSS: получение данных от facebook и вконтакте http://www.simplecoding.org/javascript-xss-poluchenie-dannyx-ot-facebook-i-vkontakte.html http://www.simplecoding.org/javascript-xss-poluchenie-dannyx-ot-facebook-i-vkontakte.html#comments Sun, 22 May 2011 11:02:21 +0000 Владимир http://www.simplecoding.org/?p=1211 facebook vkontakte

О виджетах популярных социальных сетей знают практически все web мастера. Использовать их достаточно просто. В большинстве случаев нужно вставить блок с JavaScript кодом в шаблон страницы.

Но что мы получаем в результате? Стандартную кнопку, позволяющую посетителю быстро опубликовать ссылку на текущую страницу в социальной сети и обычно счетчик таких публикаций.

При этом, внешний вид такого виджета полностью определяется разработчиком и изменить его довольно проблематично, т.к. он находится внутри iframe, который загружен с другого домена. То есть ваши стили не будут применяться к этому iframe'у.

Безусловно, такие виджеты выглядят очень не плохо и, самое главное, они узнаваемы. Большинство посетителей прекрасно понимает как ими пользоваться безо всяких дополнительных подсказок.

Тем не менее, бывают ситуации когда нужно изменить внешний вид виджета, да и грузить JavaScript код социальных сетей не очень хочется.

В этом случае придется создать свой виджет и обеспечить правильную его работу с социальными сетями.

Именно о таком решении я хочу рассказать в этой статье. В качестве примера возьмем facebook и вконтакте. Выбор этот сделан не случайно, разница между API этих сервисов довольно ощутимая. Чуть ниже вы поймете почему.

Условно, виджет можно разбить на две части.

1) Кнопка публикации.
2) Счетчик публикаций.

Рассмотрим их подробнее.

Кнопка публикаций

Здесь все предельно просто. В обоих случаях информация передаётся в параметрах GET запроса. Т.е. достаточно сформировать ссылки следующего вида.

Для facebook:

<a href="http://www.facebook.com/sharer.php?u=url&t=text" target="_blank">facebook</a>

Для вконтакте:

<a href="http://vkontakte.ru/share.php?url=url" target="_blank">вконтакте</a>';

Вместо url и text нужно подставить адрес и описание страницы, соответственно.

Счетчик публикаций

Здесь код будет немного сложнее. В обоих случаях для получения значений счетчика нужно отправить запрос серверу социальной сети. И тут начинаются варианты.

В большинстве источников, которые я видел в Сети, предлагают отправлять такой запрос со своего сервера (с помощью PHP) и затем кэшировать результат. Мне этот подход не нравится по нескольким причинам.

1) Любой запрос занимает какое-то время, которое прибавляется к общему времени формирования страницы. Кэширование в какой-то степени решает эту проблему (запросы будут отправляться не при каждом просмотре страницы), но не полностью.

2) При большом количестве запросов, социальная сеть может заблокировать ваш IP (зависит от политики социальной сети).

3) Создаётся дополнительная нагрузка на ваш сервер.

Второй вариант – отправлять запросы со стороны клиента, с помощью JavaScript.

В этом случае запрос уйдет из браузера посетителя и, по крайней мере, IP адреса таких запросов будут отличаться. Кроме того, запрос можно отправить после полной загрузки страницы и работа вашего сайта ни коим образом не будет зависеть от доступности социальной сети.

Но, при реализации такого подхода, возникают две проблемы.

1) Встроенная защита браузеров от кросс-доменных запросов.

Т.е. вы не можете отправить AJAX запрос на другой домен, но можно вставить в страницу тег script и в его атрибуте src указать адрес нужного скрипта на другом домене. В результате браузер загрузит нужный вам скрипт и выполнит код, находящийся в нём.

При использовании jQuery задача решается с минимумом усилий. Например, так:

$.getJSON('http://vkontakte.ru/share.php?act=count&index=1&url=page_url&callback=?', function(response) {
	…
});

Обратите внимание на параметр callback=?. Если он указан, то jQuery вставит тег script внутрь страницы. Вообще параметр callback разработан для поддержки JSONP и указывает серверу, что ответ в JSON формате нужно передать в качестве параметра указанной функции. Имя этой функции jQuery формирует автоматически и подставляет вместо знака вопроса.

Естественно, JSONP должен поддерживаться на стороне сервера. И сейчас мы разберем какие ответы мы получим от социальных сетей на практике.

2) Формат ответа социальной сети.

С facebook всё отлично. Эта социальная сеть поддерживает JSONP и если мы отправим запрос вида.

$.getJSON('http://graph.facebook.com/' + encodeURI(page_url)
		+ '&callback=?', function(response) {
	if (response.shares !== undefined) {
		fb_counter = response.shares;
	}
	$('#facebook_count').html(response.shares);
});


То получим следующий ответ.

jQuery16105957901661749929_1306057803097({
   "id": "http://www.smashingmagazine.com/",
   "shares": 5454
});


jQuery16105957901661749929_1306057803097 – имя функции, которое сгенерировала jQuery.

В первом параметре этой функции передаётся строка в JSON формате с адресом страницы и количеством публикаций.

В результате, в обработчик запроса будет передан JS объект с нужными данными. В этом примере он называется response, т.е. получить количество публикаций ссылки можно с помощью вызова response.shares.


В случае с вконтаке всё сложнее. Эта социальная сеть JSONP не поддерживает и на запрос


$.getJSON('http://vkontakte.ru/share.php?act=count&index=1&url='
	+ encodeURI(page_url) + '&callback=?', function(response) {});


отвечает следующей строкой:


VK.Share.count(1, 9);


Естественно, это приводит к возникновению ошибки


VK is not defined


Вообще ответ сервера вконтакте – это обычный вызов метода count, присвоенного параметру Share объекта VK. Откуда берется этот объект? Его создаёт скрипт, который нужно подключить при использовании стандартного виджета. Но этот скрипт нам не нужен, т.к. виджет мы не используем, а количество публикаций ссылки нужно вставить в заранее подготовленный блок о котором стандартный скрипт ничего не знает.


Т.е. нам нужен собственный объект VK с соответствующими параметрами. Создать его совсем не сложно.


var VK = {
    Share: {
        count: function(value, count) {
            $('#vkontakte_count').html(count);
        }
    }
}


Теперь, после получения ответа от сервера вконтакте, будет вызвана анонимная функция, установленная для параметра count. Во втором параметре она получит количество публикаций страницы.


Обратите внимание – этот код должен находится в глобальной области видимости.


Привожу весь код целиком.


Страницы со счетчиками


<!DOCTYPE html>
<html>
<head>
    <title>Счетчики</title>
    <meta charset="utf-8" />
</head>

<body>
    <div>Facebook <span id="facebook_count"></span></div>
    <div>ВКонтакте <span id="vkontakte_count"></span></div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script src="social_counters.js"></script>
</body>
</html>


Скрипт social_counters.js


jQuery(document).ready(function($) {
    var fb_counter = 0;
    var vk_counter = 0;
    var page_url = 'http://www.smashingmagazine.com/';

	$.getJSON('http://vkontakte.ru/share.php?act=count&index=1&url='
		+ encodeURI(page_url) + '&callback=?', function(response) {});

	$.getJSON('http://graph.facebook.com/' + encodeURI(page_url)
			+ '&callback=?', function(response) {
		if (response.shares !== undefined) {
			fb_counter = response.shares;
		}
		$('#facebook_count').html(response.shares);
	});
});

var VK = {
    Share: {
        count: function(value, count) {
            $('#vkontakte_count').html(count);
        }
    }
}


В заключение пара замечаний


1) Поддержка JSONP значительно упрощает жизнь разработчикам и в конечном итоге способствует популяризации социальной сети или сервиса.


2) Отсутствие этой поддержки не означает, что вы не сможете интегрировать ваш сайт с данной социальной сетью. Главное, чтобы была возможность получить нужные данные в какой-нибудь форме. Естественно, при этом придётся написать какое-то количество дополнительного кода.


Если вы заметили ошибку или знаете более удачное решение данной проблемы, пишите, будет интересно обсудить.

Успехов!


Интересно почитать


Не знаете, что подарить подруге на день рождения? Фотоальбом с ее лучшими снимками!

]]>
			http://www.simplecoding.org/javascript-xss-poluchenie-dannyx-ot-facebook-i-vkontakte.html/feed
		7
		
		
		JavaScript виджет: бесконечная загрузка твитов
		http://www.simplecoding.org/javascript-vidzhet-beskonechnaya-zagruzka-tvitov.html
		http://www.simplecoding.org/javascript-vidzhet-beskonechnaya-zagruzka-tvitov.html#comments
		Tue, 05 Apr 2011 18:59:36 +0000
		Владимир
				
		
		
		

		http://www.simplecoding.org/?p=1200
		
			load on scroll
 


В последнее время я часто замечаю на различных сайтах виджеты, которые подгружают контент при определённых действиях посетителя. Такой подход позволяет с одной стороны, сократить количество данных на странице, а с другой – при необходимости показывать практически неограниченный объем информации.


Рассмотрим небольшой практический пример.


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


На первый взгляд всё предельно просто, twitter предоставляет API, с помощью которого можно получить твиты любого пользователя (если они открыты). Вставить их сайдбар тоже не проблема.


Но на практике возникает несколько интересных моментов.



1) Информация от twitter не является основным контентом сайта и не должна влиять на скорость загрузки страницы. Кроме того, доступность сервиса также не должна влиять на работу сайта.


2) Твиты могут появляться довольно быстро, поэтому чтобы информация в виджете была всегда актуальной от кеширования придётся отказаться.


3) Т.к. твиты не являются основным содержимым страницы, то посетитель скорее всего не заметит если они появятся через некоторое время после загрузки основной части страницы.


4) Не ясно, сколько именно твитов нужно выводить. Части посетителей эта информация будет не интересна вообще, но пользователи этого сервиса, возможно, захотят прочитать несколько десятков сообщений.


5) Количество места, выделенного под виджет, обычно ограничено. И необходимо чтобы загрузка новых твитов не «ломала» дизайн.


Таким образом, нам нужно загружать твиты после загрузки страницы и желательно, чтобы от посетителя требовался минимум действий для загрузки новых твитов.


Теперь рассмотрим сам виджет.


Начнём с алгоритма.


1) Создаём на странице область с фиксированной высотой и вертикальным полосой прокрутки.


2) После загрузки страницы подгружаем в эту область твиты с помощью JavaScript.


3) Если пользователь переместит ползунок скролла в крайнее нижнее положение – загружаем следующую «порцию» твитов.


Посмотреть как работает такой виджет можно на демонстрационной страничке. И сразу же даю ссылку на архив с этим примером.


демонстрационный пример архив с исходным кодом


Разметка виджета с твитами может выглядеть следующим образом.


<div id="tweets">
    <div class="loader hidden"></div>
</div>


Как видите, после первоначальной загрузки внутри виджета будет находится только один элемент – картинка с изображением загрузчика. Стили для неё мы установим таким образом, чтобы она всегда находилась в центре виджета.


.loader {
    background-image: url('ajax-loader.gif');
    width: 400px;
    height: 300px;
    background-repeat: no-repeat;
    background-position: center center;
    position: fixed;
}


Значения width и height должны совпадать с соответствующими значениями, установленными для виджета (div#tweets).


#tweets {
    height: 300px;
    width: 400px;
    overflow: auto;
    position: relative;
    border: solid 1px #999;
    margin: 3em auto 0 auto;
}


Переходим к загрузке твитов


Основная сложность заключается в том, что нам нужно с помощью JavaScript выполнить кросс-доменный запрос к серверу twitter’а. Такие запросы запрещены политикой безопасности браузеров, поэтому использовать обычный AJAX запрос не получится.


Тем не менее, благодаря тому, что Twitter API поддерживает JSONP задача решается достаточно просто.


$(function() {
    //параметры для получения твитов
    var user_id = '24147920';
    var tweets_url = 'http://api.twitter.com/1/statuses/user_timeline.json';
    var page = 1;
    var tweets_num = 10;

    //список твитов и картинка загрузчика
    var container = $('#tweets');
    var loader = $('.loader');

    //шаблон для поиска ссылок в твитах (упрощенный)
    var pattern = /(http\S+)/gi;

    //загружаем первую страницу твитов
    get_tweets(page);

    //обработчик события scroll
    container.scroll(function() {
        //это условие выполняется когда ползунок находится в крайнем нижнем положении
        if  (container[0].scrollTop == container[0].scrollHeight - container[0].clientHeight){
            //показываем загрузчик
            loader.removeClass('hidden');
            //загружаем очередную страницу твитов
            page = page + 1;
            get_tweets(page);
        }
    });

    //эта функция загружает твиты, ищет ссылки и ставит для них
    //соответствующий тег <a href="...">, вставляет твиты в список
    function get_tweets(page) {
        $.getJSON(
            //формируем запрос на получение твитов (используется JSONP)
            tweets_url + '?user_id=' + user_id + '&page=' + page + '&count=' + tweets_num + '&callback=?',
            function(data) {
                $(data).each(function(i, tweet) {
                    //формируем ссылки
                    var text = tweet.text.replace(pattern, '<a href="$1" target="_blank">$1</a>');
                    //вставляем твит в список
                    container.append('<div class="tweet">' + text + '</div>');
                });
                //прячем загрузчик
                loader.addClass('hidden');
            }
        );
    }
});


Прежде всего, мы подготавливаем данные, которые нужны для работы с Twitter API (строки 3-6). Для данного примера я использовал свою собственную ленту твитов, но вы можете вывести любую другую. Также не принципиально сколько твитов загружать за раз, главное, чтобы после первоначальной загрузки появилась полоса прокрутки.


Для получения твитов используем метод getJSON (строки 33-46, библиотека jQuery).


В первом её параметре передаём запрос на получение твитов. В него мы включаем:

- id пользователя ('?user_id=' + user_id);

- номер страницы ('&page=' + page);

- количество твитов на странице ('&count=' + tweets_num);

- имя функции, которая будет вызвана после получения данных ('&callback=?') – его jQuery формирует автоматически и подставляет вместо знака вопроса.


После получения твитов нам остается только добавить их в список (строки 36-42). При этом, мы ищем ссылки в тексте твитов и обрамляем их тегом <a>.


Завершающий этап – установка обработчика для события scroll (строки 19-28).


Здесь нужно только проверить достигнут конец списка или нет. Если достигнут, показываем загрузчик (убираем класс hidden) и вызываем функцию get_tweets, которой передаём номер нужно страницы. В противном случае, не делаем ничего.


Всё. Можно считать, что виджет в рабочем состоянии. Конечно, перед размещением на рабочем сайте нужно будет его немного доработать, например, добавить вывод сообщение об ошибке при отсутствии доступа к twitter'у. Но, думаю, с этой задачей вы легко справитесь сами ;) 


Успехов!


Интересное


Глянцевая и матовая печать фотокниг и свадебных фотоальбомов


Любителям страйкбола будет интересно почитать про камуфляж Горка его расцветки и разновидности.

]]>
			http://www.simplecoding.org/javascript-vidzhet-beskonechnaya-zagruzka-tvitov.html/feed
		16
		
		
		Небольшой эксперимент с использованием data: URL
		http://www.simplecoding.org/nebolshoj-eksperiment-s-ispolzovaniem-data-url.html
		http://www.simplecoding.org/nebolshoj-eksperiment-s-ispolzovaniem-data-url.html#comments
		Mon, 21 Mar 2011 08:52:15 +0000
		Владимир
				
		
		

		http://www.simplecoding.org/?p=1196
		
			data uri
 


В последнее время всё больше внимания уделяется клиентской оптимизации сайтов. Я не могу сказать, что раньше ею никто не занимался, скорее, наоборот, с появлением широкополосного доступа к Internet часть проблем решилась сама собой. Но появление новых технологий, предоставляет новые возможности, которыми имеет смысл пользоваться.


К сожалению, не всегда есть возможность проигнорировать устаревшие браузеры (главным образом речь идет о IE6 и 7). И это сильно замедляет использование новых стандартов.


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


Поэтому оптимальным решением было бы автоматическое переключение технологий в зависимости от возможностей браузера.


Об одной из таких технологий и пойдёт речь в этой статье. Называется она data: URL.




data:URL представляет собой схему, позволяющую включать произвольные данные непосредственно в строку URL. Т.е. можно разместить небольшие картинки, которые используются для оформления страницы, прямо в файл стилей и, тем самым, уменьшить количество запросов к серверу.


Для себя задачу я ставил достаточно просто. Проверить, насколько сложно будет обеспечить одинаковый вид страницы во всех браузерах, начиная с IE6.


Сразу выкладываю ссылку на архив с примером, который я использовал для экспериментов.


архив с исходным кодом


Рассмотрим тестовую страницу


<!DOCTYPE html>

<html>
<head>
    <title>CSS clip</title>
    <meta charset="utf-8" />
</head>

<body>

<div id="social_icons">
    <a href="#" class="twitter icon"></a>
    <a href="#" class="facebook icon"></a>
    <a href="#" class="bobrdobr icon"></a>
    <a href="#" class="memori icon"></a>
    <a href="#" class="delicious icon"></a>
    <a href="#" class="stumbleupon icon"></a>
</div>

</body>
</html>


Она содержит шесть ссылок, которые нужно показать в виде иконок на социальные сервисы.


Делается это достаточно просто. Для каждой ссылки задаётся ширина, высота и фоновое изображение (иконка).


При этом браузер загрузит каждый файл, который будет указан в свойстве background-image. Т.е. если у нас шесть иконок, то будет отправлено шесть запросов серверу. Учитывая, что размеры иконок редко превышают несколько кБ, загружать их по одной не выгодно.


Наиболее распространённым методом оптимизации в таких случаях является использование CSS спрайтов. При этом все картинки объединяются в одну, а нужный фрагмент показывают с помощью свойства background-position.


Именно этот вариант я решил использовать для браузеров IE6 и 7, а для новых – передать иконки с помощью data: URL.


Подготовка данных для использования в data: URL


Тут всё достаточно просто. Нужно закодировать содержимое файла с картинкой с помощью base64 и вставить полученную строку в CSS файл.


В моем случае, исходное изображение выглядит следующим образом.


icons sprites
 


Примечание. Я использовал коллекцию бесплатных иконок от wpzoom.


На практике можно воспользоваться одним из сервисов, выполняющих эту операцию. Например, duris.ru или dopiaza.org.


В результате у меня получилась такая таблица стилей.


@charset 'utf-8';

.icon {
	width: 64px;
	height: 64px;
	display: block;
	float: left;
	margin: 10px;
}

div#social_icons a {
	background-image: url("data:image/png;base64,iVBORw......");
	background-repeat:no-repeat;
}
.twitter {
	background-position: 0 0;
}
.facebook {
	background-position: 0 -64px;
}
.bobrdobr {
	background-position: 0 -128px;
}
.memori {
	background-position: 0 -192px;
}
.delicious {
	background-position: 0 -256px;
}
.stumbleupon {
	background-position: 0 -322px;
}


Обратите внимание. Здесь не важно кодируете вы один файл со всеми иконками или каждую отдельно. Все данные будут переданы внутри CSS файла.


Рассмотрим стили подробнее.


Для каждой ссылки мы указываем высоту (width) и ширину (height). При этом, нужно сделать ссылку блоковым элементом (display: block), иначе длина и высота применятся не будут. Чтобы расположить иконки в один ряд, используем обтекание (float: left).


Далее каждой ссылке устанавливаем фоновое изображение (background-image). В качестве значения url вставляем результат преобразования картинки. Я его сократил, т.к. он занимает около 19 кБ.


Затем с помощью background-position показываем нужный фрагмент картинки. В данном случае все иконки имеют размер 64х64 px и расположены вертикально, поэтому просто изменяем вертикальную координату на 64 px.


Остаётся подключить файл стилей к странице.


<link rel="stylesheet" type="text/css" href="styles.css" />


Всё. В современных браузерах иконки отображаются правильно.


Для формирования страницы браузер выполняет два запроса к серверу. Первый – получение самой страницы, второй – получения файла стилей. При этом, файл стилей занимает 19,1 кБ (если его сжать, получится 14,4 кБ).


Поддержка IE6 и 7


Есть несколько вариантов решения этой задачи. Подробно они рассмотрены в статье Кроссбраузерное использование data:URL.


Я покажу один из самых простых вариантов, с заменой файла стилей.


Идея предельно простая. С помощью условных комментариев, браузерам IE6 и 7 указываем свой собственный CSS файл.


Выглядит это следующим образом.


<!--[if lt IE 8]><link rel="stylesheet" type="text/css" href="ie_6_7_styles.css" /><![endif]-->
<!--[if gte IE 8]><link rel="stylesheet" type="text/css" href="styles.css" /><![endif]-->
<!--[if !IE]>--><link rel="stylesheet" type="text/css" href="styles.css" /><!--<![endif]-->


В результате, современные браузеры загрузят файл styles.css, а шестая и седьмая версии IE – ie_6_7_styles.css.


В этих стилях отличается только свойство background-image. Вместо data:URL указываем файл с иконками.


div#social_icons a {
    background-image: url("icons/icons_sprites.png");
    background-repeat:no-repeat;
}


Теперь во всех браузерах иконки отображаются одинаково.


Результаты


Должен отметить, что в данном случае, результаты получились не очень впечатляющие.


Безусловно, при использовании data: URL количество запросов уменьшилось (на один), но объём передаваемых данных увеличился практически на 5 кБ (исходный файл icons_sprites.png «весит» 13,9 кБ, а после base64 преобразования он занимает около 19 кБ).


Т.е. получается, что если фоновые изображения хорошо укладываются в CSS спрайты, то эффект от применения data: URL будет минимальным. Точнее, в некоторых случаях можно получить полностью противоположный эффект, т.к. время загрузки файла со стилями увеличится, и посетитель будет какое-то время смотреть на страницу без стилей вообще.


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


С другой стороны, в этой статье рассмотрен очень простой пример. Для сложного сайта файлов со спрайтами может получиться довольно много и в этом случае эффект от использования data: URL будет выше за счёт уменьшения количества запросов.


К тому же, если бы не нужна была поддержка IE6, 7, то можно было бы вообще не заниматься созданием файла со спрайтами и установкой background-position, а просто передавать изображения в background-image для соответствующих элементов.


В целом, я не уверен, что в ближайшее время начнется массовое использование data: URL. Тем не менее, технология очень интересная.


Успехов!


Интересно почитать


Хотите сделать карьеру в IT? Курсы программистов будут хорошей стартовой точкой.


Нужна декларация  3-ндфл «продажа квартиры»? Заполним за сутки и вышлем на емейл.

]]>
			http://www.simplecoding.org/nebolshoj-eksperiment-s-ispolzovaniem-data-url.html/feed
		8
		
		
		Galleria – плагин для создания галерей с картинками
		http://www.simplecoding.org/galleria-plagin-dlya-sozdaniya-galerej-s-kartinkami.html
		http://www.simplecoding.org/galleria-plagin-dlya-sozdaniya-galerej-s-kartinkami.html#comments
		Mon, 07 Mar 2011 21:09:17 +0000
		Владимир
				
		
		
		

		http://www.simplecoding.org/?p=1188
		
			galleria
 


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


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


Можно, конечно, написать собственную реализацию такого плагина, но это процесс трудоемкий (если делать качественно) и, скорее всего, код процентов на 90 будет повторять то, что есть в других плагинах.


В таких случаях гораздо предпочтительнее использовать фреймворки. Об одном из них и пойдет речь в этой статье.



Фреймворк называется Galleria и представляет собой плагин для библиотеки jQuery.


Его основными преимуществами являются поддержка тем оформления, собственный API и большое количество настроек.


Подключить Galleria не сложнее чем любой другой плагин, но внешний вид галереи будет зависеть от используемой темы.


Чтобы получить более полное представление о фреймворке рассмотрим небольшой пример, который включает создание собственной темы и использование нескольких очень полезных возможностей Galleria.


Примечание. Эта статья ни в коем случае не заменяет официальную документацию и не содержит описание всех возможностей фреймворка. С другой стороны, некоторые вопросы интеграции фреймворка со страницей здесь рассмотрены более подробно.


Постановка задачи


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


Т.е. должно получиться примерно следующий результат.


демонстрационный пример


Если интересно, можете скачать архив с этим примером.


архив с исходным кодом


Теперь рассмотрим как решается эта задача с помощью Galleria.


Подключаем фреймворк.


На страницу добавляем блок для галереи и ссылку с помощью которой будем эту галерею открывать.


<div id="content">
    <a href="#" id="openGallery">Открыть галерею</a>
    <div id="gallery"></div>
</div>


После этого распаковываем архив с фреймворком в папку galleria и подключаем 3 JS-файла.


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="galleria/galleria-1.2.2.min.js"></script>
<script src="init.js"></script>


Здесь все как обычно. Сначала загружаем jQuery, затем плагин Galleria и скрипт init.js (он выполняет подключение и настройку галереи).


Подготовка данных для галереи


В нашем случае миниатюр картинок на странице нет, поэтому фреймворку необходимо каким-то образом передать информацию о них. Для этого создадим JS объект с их данными.


    var images = [
        {
            image: 'images/spring_1.jpg',
            thumb: 'images/spring_1t.jpg',
            title: 'Первая картинка',
            description: 'Описание первой картинки',
            size: '450x338',
            link: 'images/spring_1.jpg'
        },
        {
            image: 'images/spring_2.jpg',
            thumb: 'images/spring_2t.jpg',
            title: 'Вторая картинка',
            description: 'Описание второй картинки',
            size: '450x360',
            link: 'images/spring_2.jpg'
        },
...
    ];



Думаю, несложно догадаться почему разработчиками выбран именно такой вариант передачи данных. Если вы получаете данные от сервера в JSON формате, то получить такой объект можно с помощью одного вызова функции eval.


Обратите внимание! Не все поля в этой структуре обязательные, вы можете добавлять сколько угодно своих собственных полей с данными. В минимальном варианте для работы плагина необходимо поле image и, если вы хотите показать слайдер с миниатюрами картинок – thumb.


Теперь подключаем галерею


    var gallery = $("#gallery");

    Galleria.loadTheme('galleria/themes/simplecoding/galleria.simplecoding.js');

    $('#openGallery').click(function() {
        $("#gallery").galleria({
            data_source: images,
            width: 800,
            height: 500,
            clicknext: true
        });
        return false;
    });



Перед подключением галереи необходимо загрузить тему. Её создание мы рассмотрим чуть ниже, сейчас только отметим, что для загрузки необходимо указать основной JS-файл темы.


Т.к. нам нужно чтобы галерея открывалась по клику на ссылке, устанавливаем соответствующий обработчик, и в нём вызываем метод galleria для блока в котором будет находится галерея (строка 6).


В параметрах этого метода передаём настройки галереи. Здесь:


data_source – имя переменной в которой находятся данные рисунков;

width и height – длина и ширина галереи;

clicknext – если этот параметр равен true, то клик по картинке будет показывать следующую картинку (дублирует кнопку Next).


Вообще параметров довольно много, их полный список можно посмотреть здесь.


Оформление галереи (создание собственной темы)


Создать тему не сложно. В папке galleria/themes/ создаёте папку с названием вашей темы (в данном случае – simplecoding). В этой папке должен находится основной файл темы – galleria.simplecoding.js.


Практически наверняка вы захотите добавить файл стилей и различные картинки и иконки для оформления галереи.


В качестве основы для данного примера я взял код из официальной документации, а также картинки и стили из темы classic, которая поставляется вместе с плагином (стили, естественно, пришлось немного изменить и дополнить).


Рассмотрим основной скрипт – galleria.simplecoding.js


(function($) {
Galleria.addTheme({
    name: 'simplecoding',
    author: 'Statsenko Vladimir, http://www.simplecoding.org',
    version: 1,
    css: 'galleria.simplecoding.css',
    defaults: {
        transition: 'fade',
        imagecrop: true,
        _my_color: 'black'
    },
    init: function(options) {

        //добавляем заголовок
		this.addElement('title');
		this.prependChild('container', 'title');

		//добавляем кнопку "Закрыть"
		this.addElement('close');
		this.prependChild('container', 'close');
		this.$('close').html('<a href="#"> </a>');

        //добавляем поле для описания и размера картинки
		this.addElement('desc');
		this.appendChild('stage', 'desc');

        var overlay = $('<div id="overlay"></div>');
        overlay.add('.galleria-close').click(this.proxy(function(e) {
            this.$('container').toggleClass('hidden');
            overlay.toggleClass('hidden');
            e.stopPropagation();
            return false;
        }));

        this.$('container')
            .css('background-color', options._my_color)
            .parent().parent().append(overlay);

        // bind a loader animation:
        this.bind(Galleria.LOADSTART, function(e) {
            if (!e.cached) {
                this.$('loader').show();
            }
        });
        this.bind(Galleria.LOADFINISH, function(e) {
            this.$('loader').hide();
            var imageData = this.getData();
			this.$('title').html(imageData.title);
			this.$('desc').html(imageData.description + ' ' + imageData.size);
        });
    }
});
}(jQuery));


Как видите, для создание темы используется метод addTheme (строка 2) в параметрах которого мы указываем её название, имя автора, имя файла стилей (строка 6), различные параметры и метод инициализации (параметр init, строка 12).


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


Рассмотрим этот метод подробнее.


Прежде всего, взгляните на разметку галереи, которая создаётся по-умолчанию.


В нашем случае необходимо добавить название картинки и кнопку «Закрыть» над картинкой и текст с подробным описанием – под ней.


Поэтому мы добавляем 3 поля – title, close и desc (строки 14-25). При этом используются методы addElement (создает новый элемент), prependChild (вставляет новый элемент перед указанным элементом) и appendChild (вставляет новый элемент после указанного объекта).


В первом параметре методов prependChild и appendChild необходимо указать имя блока перед (после) которого нужно вставить новый элемент. При этом учтите, что плагин добавляет ко всем названиям блоков приставку galleria- . Т.е. если вы посмотрите на разметку с помощью firebug, то блоки будут выглядеть примерно так.


<div class="galleria-title">Пятая картинка</div>


Теперь рассмотрим код, позволяющий закрыть галерею (строки 27-38).


В данном случае мы используем немного нестандартное решение. У нас есть кнопка «Закрыть», которую мы поместили в правый верхний угол галереи. В дополнение к этой кнопке создадим полупрозрачный слой (overlay), который с одной стороны будет затенять страницу, а с другой – закрывать галерею при клике по нему.


Для создания слоя используем функцию $ библиотеки jQuery. Затем назначаем ему и кнопке «Закрыть» обработчик события click.


Обратите внимание, при создании этого обработчика мы используем метод proxy объекта Galleria (строка 28). Этот метод позволяет обращаться к текущему экземпляру объекта Galleria внутри обработчика клика с помощью this. Если не использовать proxy, то this внутри обработчика клика будет указывать либо на кнопку «Закрыть», либо на overlay.


Также отметьте, как выполняется обращение к элементам галереи. Например, переключение класса hidden у контейнера.


this.$('container').toggleClass('hidden');


Здесь вызывается метод $ плагина, а не функция $ библиотеки jQuery. Но, также как и стандартная функция, этот метод возвращает объект jQuery, т.е. вы сможете использовать весь функционал этой библиотеки.


Теперь добавляем обработчики ещё для двух событий.


При возникновении события Galleria.LOADSTART (начало загрузки изображения) показываем анимированный загрузчик (строки 40-44).


А после загрузки изображения (событие Galleria.LOADFINISH) устанавливаем заголовок и описание текущей картинки (строки 45-50).


Информацию, связанную с текущей картинкой (мы её указали при в файле init.js), можно получить с помощью метода this.getData(). После этого можно обращаться к любым полям структуры, например, так imageData.title.


CSS стили


Я не буду подробно описывать все стили, которые здесь используются. Большинство из них взято из темы classic. Приведу те, которые использовались для оформления новых элементов.


#overlay {
    width: 100%;
    height: 100%;
    z-index: 9;
    background-color: #000;
    opacity: 0.3;
    position: absolute;
    top: 0;
    left: 0;
}

.hidden {
    display: none;
}

.galleria-close {
	background-image: url(classic-map.png);
	background-position: -753px -11px;
	width: 9px;
	height: 9px;
	margin: 0.5em;
	float: right;
}

.galleria-close a {
	display: block;
	text-decoration: none;
}

.galleria-title, .galleria-desc {
	color: #fff;
	font-family: Verdana, sans-serif;
	text-align: center;
	padding: 3px;
}


Как видите, никаких особых хитростей здесь нет.


Для полупрозрачного слоя используем абсолютное позиционирование и 100% длину и ширину, чтобы он закрыл всё окно. С помощью z-index размещаем его под галереей.


Блок с галереей делаем невидимым с помощью класса hidden.


Для кнопки «Закрыть» указываем фоновое изображение и соответствующий размер.


А для дополнительных надписей устанавливаем параметры шрифтов и отступы.


Заключение


Возможно, после прочтения этой статьи у вас возник вопрос: «Зачем так заморачиваться?». Действительно, большинство плагинов для создания галерей можно просто подключить и они будут работать. При этом никаких тем создавать не нужно.


Но это простота кажущаяся. Как только вы захотите что-нибудь изменить в таком «простом» плагине, сразу столкнетесь с необходимостью править его исходники, а это занятие гораздо более трудоёмкое чем создание темы для Galleria.


К тому же, у вас появляется возможность создать действительно оригинальное решение для работы с картинками и сделать ваш ресурс действительно запоминающимся!


Всех читательниц поздравляю с Праздником весны!

Удачи и хорошего настроения!


Интересно почитать


Обучение программированию поможет стать настоящим IT специалистом.


Заполнение  3-ндфл 2011 на продажу автомобиля плюс инструкции «Как отчитаться в налоговой»

]]>
			http://www.simplecoding.org/galleria-plagin-dlya-sozdaniya-galerej-s-kartinkami.html/feed
		24
		
		
		JavaScript и jQuery: перемещение блоков
		http://www.simplecoding.org/javascript-i-jquery-peremeshhenie-blokov.html
		http://www.simplecoding.org/javascript-i-jquery-peremeshhenie-blokov.html#comments
		Sat, 08 Jan 2011 09:08:51 +0000
		Владимир
				
		
		

		http://www.simplecoding.org/?p=1167
		
			jquery blocks movement
 


В этот раз я покажу пример небольшого скрипта, позволяющего перемещать HTML блоки на странице.


Когда возникает подобная задача, первое что приходит в голову (по крайней мере мне ;)  ) – использовать готовые плагины. Например, jQuery Sortable. Что ни говори, решение довольно удобное, от пользователя требуется только перетащить объект с помощью мышки.


Но тут есть один недостаток. Если размеры блоков, которые нужно перемещать достаточно большие (например, больше половины высоты окна браузера), то пользоваться такими плагинами становится не удобно.


В такой ситуации, на мой взгляд, лучше добавить к каждому блоку ссылки «Вверх» и «Вниз» с помощью которых и будет выполняться перемещение блоков.


Именно такой вариант мы рассмотрим в этой статье.


Посмотреть результат можно на демонстрационной страничке



демонстрационный пример


И, если есть желание, можете скачать архив с исходниками.


архив с исходным кодом


Начнём с разметки страницы


Чтобы сделать блоки достаточно большими я просто разместил в них картинки, точнее в данном случае каждая картинка представляет собой отдельный блок.


<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <title>Перемещение блоков с помощью JS</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
    <div id="images">
        <img src="images/1t.jpg" alt="картинка 1" />
        <img src="images/2t.jpg" alt="картинка 2" />
        <img src="images/3t.jpg" alt="картинка 3" />
    </div>

    <script src="http://yandex.st/jquery/1.4.4/jquery.js"></script>
    <script src="main.js"></script>
</body>
</html>


Как видите, разметка предельно простая. На странице находятся три картинки и подключены два JS файла (библиотека jQuery и наш скрипт main.js, с кодом для перемещения блоков).


Обратите внимание, я не вставлял ссылки «Вверх», «Вниз» на страницу. Перемещение блоков выполняется с помощью JavaScript, поэтому если у пользователя отключена поддержка JS, то и ссылки видеть ему не нужно.


Теперь рассмотрим перемещение блоков


Скрипт main.js.


$(function() {
    var images = $('img');
    images.wrap('<div class="controls" />');
    $('<a class="down" href="#">Вниз</a>').insertAfter(images);
    $('<a class="up" href="#">Вверх</a>').insertAfter(images);

    $('.up').click(function() {
        var currentImgBlock = $(this).parent();
        var prevImgBlock = currentImgBlock.prev();
        swap(currentImgBlock, prevImgBlock);
        return false;
    });

    $('.down').click(function() {
        var currentImgBlock = $(this).parent();
        var nextImgBlock = currentImgBlock.next();
        swap(nextImgBlock, currentImgBlock);
        return false;
    });
});

function swap(a, b) {
    if (a.size() > 0 && b.size() > 0) {
        a.insertBefore(b);
    }
}


Прежде всего, необходимо добавить ссылки. И, чтобы было удобнее выполнять перемещение, вокруг каждого изображения создадим div и ссылки будем добавлять в него.


Все эти операции выполняются с помощью четырёх строк кода (строки 2-5). В результате для каждого получим такую разметку.


<div class="controls">
    <img alt="картинка 1" src="images/1t.jpg">
    <a href="#" class="up">Вверх</a>
    <a href="#" class="down">Вниз</a>
</div>


Теперь назначаем обработчики для ссылок «Вверх» и «Вниз».


Код этих обработчиков практически одинаков, за исключением того, что при клике по ссылке «Вверх» мы должны получить текущий блок (в котором находится ссылка) и предыдущий, а при клике по ссылке «Вниз» – текущий и следующий.


После этого, передаём эти блоки функции swap, которая и выполняет их перемещение. Обратите внимание, что порядок в котором передаются блоки важен. Функция использует метод insertBefore, поэтому первым необходимо передавать блок, который должен оказаться выше.


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


Если есть вопросы, замечания или советы, пишите. Буду рад обсудить!


Успехов!

]]>
			http://www.simplecoding.org/javascript-i-jquery-peremeshhenie-blokov.html/feed
		16
		
		
		Google Maps: выделение областей на карте
		http://www.simplecoding.org/google-maps-vydelenie-oblastej-na-karte.html
		http://www.simplecoding.org/google-maps-vydelenie-oblastej-na-karte.html#comments
		Mon, 27 Dec 2010 08:20:47 +0000
		Владимир
				
		
		

		http://www.simplecoding.org/?p=1164
		
			google maps circle logo
 


О сервисах Google Maps и Яндекс.Карты слышали, наверное, практически все пользователи интернета. Но если для рядового пользователя их возможности ограничиваются стандартным интерфейсом, то для разработчиков всё гораздо интереснее.


Оба сервиса предоставляют API, который позволяет получить дополнительную информацию, изменить внешний вид и работу карт.


Сегодня я хочу показать небольшой пример, позволяющий посетителю выделить область на карте (использоваться будут Google Maps). В дальнейшем, эту область можно сохранить в базе данных вашего сайта.


Прежде всего, сформулируем задачу.


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


Т.к. для обоих случаев API практически одинаков, рассмотрим вариант с окружностью.


Итак, принцип работы будет следующий.



1) Посетитель кликает по произвольной точке на карте, мы ставим на неё маркер (чтобы удобнее было ориентироваться) и считаем её центром области.


2) Посетитель кликает по любой точке на границе области. Мы рассчитываем расстояние от неё до центра (радиус) и строим окружность.


Если посетитель захочет изменить область, то ему будет достаточно снова сделать два клика. Мы убираем старую окружность и строим новую.


Поэкспериментировать с этим примером можно на демонстрационной страничке или, если хотите, качайте архив с исходными файлами.


демонстрационный пример архив с исходным кодом


Переходим к реализации.


Прежде всего, создадим страницу с картой.


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Окружности на Google Maps</title>
</head>
<body>
    <div id="my_map" style="width:600px;height:400px"></div>
    <script src="main.js"></script>
</body>
</html>


Здесь всё предельно просто. Создаём блок для карты (my_map), указываем его размеры (600х400 px) и подключаем файл со скриптами (main.js), которые будут выполнять всю работу.


Рассмотрим подробнее main.js.


В первую очередь нам нужно подключить карту.


var map, circle, circleOptions, setCenter, marker;

function initialize() {
    var myLatlng = new google.maps.LatLng(50.45127, 30.523368); //Kiev
    var myOptions = {
        zoom: 9,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.HYBRID
    }
    map = new google.maps.Map(document.getElementById("my_map"), myOptions);
}

function loadScript() {
    var script = document.createElement("script");
    script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
    document.body.appendChild(script);
}

window.onload = loadScript;


Работает этот код следующим образом. При возникновении события window.onload (завершена загрузка страницы) будет вызвана функция loadScript, которая добавит в конец страницы тег script, подключающий Google Maps.


Обратите внимание на GET параметр callback. В нём передаётся название функции (initialize), которая будет вызвана сразу после загрузки скрипта.


В этой функции (initialize) мы указываем настройки (координаты центра, приближение, тип карты) и создаём карту (строка 10).


В результате внутри блока my_map появится обычная карта Google.


Переходим к созданию окружности.


Прежде всего, немного теории.


С точки зрения API Google Maps, окружность (также как и многоугольник) является оверлеем (overlay). Для её создания используется класс google.maps.Circle, а однозначно задать её размещение можно с помощью центральной точки – center (объект типа LatLng в котором хранится широта и долгота) и радиуса – radius (в метрах).


Кроме того, в большинстве случаев желательно указать цвет окружности, её заливку и прозрачность. Параметры – fillColor, fillOpacity, strokeColor и strokeOpacity.


В нашем случае посетитель строит окружность с помощью кликов по карте, значит, нужно установить обработчик события click и в нём выполнять настройку и создание окружности.


Обработчик события click получит параметр event, который содержит координаты точки, по которой кликнул посетитель.


После второго клика мы получим координаты второй точки и сможем рассчитать расстояние между ними, т.е. радиус окружности.


Теперь взгляните на код.


function initialize() {
    ......
    setCenter = true;

    circleOptions = {
        fillColor:"#00AAFF",
        fillOpacity:0.5,
        strokeColor:"#FFAA00",
        strokeOpacity:0.8,
        strokeWeight:2,
        clickable:false
    }

    google.maps.event.addListener(map, 'click', function(event) {
        if (setCenter) {
            if (marker != undefined) {
                marker.setMap(null);
            }
			marker = new google.maps.Marker({
				position:event.latLng,
				clickable:false
			});
			marker.setMap(map);
            circleOptions.center = event.latLng;
            setCenter = false;
        }
        else {
            //рассчитываем расстояние между точками
            var radius = distHaversine(circleOptions.center, event.latLng)
            circleOptions.radius = radius*1000;
            if (circle != undefined) {
                circle.setMap(null);
            }
            circle = new google.maps.Circle(circleOptions);
            circle.setMap(map);
            setCenter = true;
        }
    });
}


Нам нужно отличить первый клик от второго. Для этого используем переменную setCenter. Если она равна true, то в данный момент выполняется установка центра окружности.


В переменной circleOptions сохраняем хеш с начальными настройками окружности (цвет, прозрачность и т.п.).


После этого устанавливаем обработчик события click (строка 14).


Логика работы здесь следующая. Если setCenter == true (установка центра окружности), то мы убираем старый маркер (строки 16-18) и создаём новый в указанной точке (строки 19-23).


Затем, сохраняем центр окружности (параметр circleOptions.center) и присваиваем setCenter значение false (т.е. запоминаем, что следующий клик по карте укажет радиус окружности).


После второго клика мы рассчитываем расстояние (функция distHaversine, о ней чуть ниже) и устанавливаем параметр circleOptions.radius.


Затем убираем старую окружность (если она есть) и создаём новую (строки 31-35).


В результате на карте появится новая окружность.


Обратите внимание, что переменные map, circle, circleOptions, setCenter и marker объявлены в глобальной области видимости. Это необходимо, чтобы их значения сохранялись между вызовами обработчиков событий.


Теперь разберём функцию расчета расстояний между точками.


rad = function(x) {return x*Math.PI/180;}

distHaversine = function(p1, p2) {
    var R = 6371; // earth's mean radius in km
    var dLat  = rad(p2.lat() - p1.lat());
    var dLong = rad(p2.lng() - p1.lng());

    var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
            Math.cos(rad(p1.lat())) * Math.cos(rad(p2.lat())) * Math.sin(dLong/2) * Math.sin(dLong/2);
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
    var d = R * c;

    return d.toFixed(3);
}


Это реализация формулы гавернсинусов на JavaScript. Взял я её здесь. Формула позволяет определить расстояние между двумя точками на поверхности сферы (длину дуги).


Если вас интересует эта тема, почитайте статью Вычисление расстояния и начального азимута между двумя точками на сфере.


В нашем случае удобно, что приведённая функция правильно работает с объектом LatLng.


И в заключение, пару замечаний о хранении данных.


После кликов посетителя координаты области будут находиться в объекте circleOptions. Их можно передать на сервер, например, с помощью AJAX запроса. Таким образом, при повторном входе посетителя на сайт, можно будет восстановить область.


Вообще, применений этих возможностей масса, главное творчески подойти к их использованию ;) 


Успехов!


Интересно почитать


Муляжи блюд – реклама кафе, которая убивает наповал.

]]>
			http://www.simplecoding.org/google-maps-vydelenie-oblastej-na-karte.html/feed
		13
		
		
		jQuery и плагины: решения для просмотра больших изображений
		http://www.simplecoding.org/jquery-i-plaginy-resheniya-dlya-prosmotra-bolshix-izobrazhenij.html
		http://www.simplecoding.org/jquery-i-plaginy-resheniya-dlya-prosmotra-bolshix-izobrazhenij.html#comments
		Sat, 25 Dec 2010 18:41:21 +0000
		Владимир
				
		
		
		
		

		http://www.simplecoding.org/?p=1161
		
			jquery img zoom
 


Приветствую всех!


В этот раз речь пойдет о нескольких плагинах для jQuery, которые помогают организовать просмотр больших изображений на сайте.


Думаю, с этой проблемой в какой-то момент сталкиваются все веб мастера.


Представьте, у вас есть высококачественные изображения с высоким разрешением (фотографии, скриншоты и т.п.) и их нужно показать на сайте. Понятно, что вставить их, не меняя размеры, не получится. Картинки просто «порвут» дизайн. Поэтому предварительно нужно их уменьшить, но и возможность просмотра полноразмерного изображения необходимо обеспечить.


Классическое решение этой задачи – сделать каждую миниатюру ссылкой на полноразмерное изображение. Т.е. использовать разметку вида.


<a href="1.jpg"><img src="1_thumb.jpg" /></a>


где 1_thumb.jpg – уменьшенное изображение 1.jpg.


Главный недостаток такого подхода – посетитель покидает страницу, а затем должен на неё вернуться с помощью кнопки «Назад».


На данный момент существует множество решений, которые позволяют получить более красивое решение этой задачи.


Для этого примера я решил остановиться на плагинах к библиотеке jQuery. Т.к. на данный момент она одна из самых популярных и, кроме того, аналоги можно найти для всех распространённых JS библиотек.


Хочу сразу отметить, что плагинов для работы с изображениями – сотни, и многие дублируют друг друга.


Я же хочу показать основные подходы с примерами для решения задачи и обсудить их достоинства и недостатки, а какой именно плагин использовать – решать вам.



Чтобы было нагляднее, все описанные здесь примеры я разместил на демонстрационной страничке


демонстрационный пример


Вариант 1. Предпросмотр при наведении мышки на изображение.


Есть несколько разновидностей таких плагинов, которые различаются в основном визуальными эффектами. В простейшем случае, для реализации подойдет любой плагин создания подсказок (tooltips). Например, Image Preview.


Использовать его не сложно. Размещаете на странице миниатюры со ссылками на полноразмерные изображения, подключаете jQuery и плагин, добавляете несколько CSS стилей и всё, можно пользоваться.


Рассмотрим пример.


Разметка страницы


<a href="images/1.jpg" class="preview"><img src="images/1t.jpg" alt="image 1" /></a>
<a href="images/2.jpg" class="preview"><img src="images/2t.jpg" alt="image 2" /></a>
<a href="images/3.jpg" class="preview"><img src="images/3t.jpg" alt="image 3" /></a>


Здесь ссылкам добавлен класс preview, чтобы плагин мог выбрать только те изображения, которые нужно увеличить.


Подключение JS файлов:


<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="tooltip.js"></script>


И CSS стили:


a img {
    border: none;
}

#preview {
    background: none repeat scroll 0 0 #333333;
    border: 1px solid #CCCCCC;
    color: #FFFFFF;
    display: none;
    padding: 5px;
    position: absolute;
}


Их вы можете поменять. Главное – сохраните абсолютное позиционирование для блока предпросмотра (position: absolute). Иначе полноразмерная картинка будет вставлена внутрь страницы и испортит дизайн.


Теперь о достоинствах и недостатках.


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


Я специально выбрал картинки с большим разрешением, чтобы был виден главный недостаток. Полноразмерное изображение не всегда полностью помещается на экране и его положение зависит от положения миниатюры на странице.


Второй недостаток в том, что посетитель не всегда ожидает такого поведения и может случайно навести мышку на миниатюру, в результате часть текста окажется закрытой картинкой, а это раздражает.


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


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


Вариант 2. Увеличение картинки на весь экран.


Реализовать можно с помощью плагинов для создания галерей. Пример для этой статьи я сделал с помощью плагина Fancy Zoom.


В данном случае, при клике по миниатюре она увеличивается до размеров окна браузера (плагин контролирует эту величину), а остальная часть страницы затеняется.


Подключение и настройка плагина достаточно простые.


Разметка страницы должна позволять выбрать нужные изображения с помощью jQuery селекторов. Например, так:


<div id="fancy">
    <a href="images/1.jpg"><img src="images/1t.jpg" alt="image 1" /></a>
    <a href="images/2.jpg"><img src="images/2t.jpg" alt="image 2" /></a>
    <a href="images/3.jpg"><img src="images/3t.jpg" alt="image 3" /></a>
</div>


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


<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery.shadow.js"></script>
<script type="text/javascript" src="jquery.ifixpng.js"></script>
<script type="text/javascript" src="jquery.fancyzoom.min.js"></script>
<script type="text/javascript">
	$(function() {
		$('#fancy a').fancyzoom();
	});
</script>


Плагины shadow и ifixpng используются для создания тени вокруг полноразмерного изображения и исправления проблем IE при работе с png изображениями, соответственно.


Fancy Zoom имеет несколько полезных настроек, на которых я останавливаться не хочу, т.к. они достаточно подробно описаны в документации.


Теперь о достоинствах и недостатках.


Кликните по любому изображению во втором ряду на демонстрационной страничке. Картинка плавно увеличится и в правом верхнем углу появится кнопка «Закрыть».


Безусловным преимуществом тут является то, что можно удобно просматривать довольно большие изображения без использования скролла.


Кроме того, ни о каких случайных срабатываниях тут речь не идёт. Картинка будет увеличена только в ответ на явное действие пользователя – клик мышкой.


Но читать текст на странице уже не получится. Т.е. посетитель может смотреть либо на картинку, либо – на содержимое страницы.


Вариант 3. Увеличение картинки в отдельном блоке.


Для демонстрации этого решения я выбрал плагин jqZoom.


Посмотреть как он работает можно на демонстрационной страничке (последний ряд). Когда вы наводите указатель мыши на изображение на нём появляется полупрозрачный прямоугольник, показывающий какая именно область картинки сейчас увеличена. Справа появится блок с увеличенным фрагментом изображения. Естественно, плагин не растягивает миниатюру, а просто показывает фрагмент полноразмерной картинки.


Разметка страницы для использования этого плагина не отличается от предыдущих вариантов.


<a href="images/2.jpg" class="jqzoom" title="image 2">
	<img src="images/2t.jpg" alt="image 2" />
</a>


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


<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jqzoom.pack.1.0.1.js"></script>
<script type="text/javascript">
	$(function() {
		$(".jqzoom").jqzoom();
	});
</script>


С помощью дополнительных параметров можно указать размеры области предпросмотра, её положение, масштаб и другие параметры. Подробнее читайте на официальном сайте.


Теперь подумаем, что даёт использование такого плагина.


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


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


Недостатком можно считать просмотр картинки по частям. Но, с другой стороны, если оригинал действительно большой, то просмотреть его в натуральную величину без скролла всё равно не получится.


И, конечно, использование этого плагина потребует изменения дизайна страницы. В нём должна быть предусмотрена область для просмотра увеличенной картинки. Предыдущие плагины можно просто подключить к любой странице, и они никак не повлияют на её дизайн.


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


В заключение, хочу отметить, что в этой статье рассмотрены далеко не все варианты решения задачи. Я выбрал те, которые считаю наиболее универсальными (подходят для большинства сайтов) и простые в использовании.


Если вам приходилось решать подобные задачи, и вы хотите о нём рассказать, пишите, буду рад обсудить ;) 


Интересно почитать


Как привлечь клиентов в кафе и убедить их заказать больше чем обычно?

]]>
			http://www.simplecoding.org/jquery-i-plaginy-resheniya-dlya-prosmotra-bolshix-izobrazhenij.html/feed
		22