0 A.D. замечательная игра  основаная на историческом, экономическом составляющем. Период игры составляет от 500 до н.э. до 500 н.э.. В игре возможно пройти кампанию, поиграть с ботами или с кем нибудь по интернету. Советаю поиграть всем любителям стратегии.

Скриншоты.

Видео:

Скачать игру

На поле комплексных  чисел определены операции сложения и умножения по правилу:

$(a, b)+(c,d) = (a+c, b+d)$

$(a,b)*(c,d)=(ac-bd, ad+bc)$

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

Нулем называется такое комплексное число $(x,y)$ ,  что для любова   комплексного числа $(a, b)$ выполняется $(a, b)+(x,y)=(a, b)$  отсюда слудует, что (0, 0)

Противоположным числом $(a, b)$  называется такая пара $(x, y)$ , что $(a,b)+(x, y)=(0, 0)$  отсюда следует, что противоположное число $-(a, b)$.

Единицей называется такое комплексное число $(x, y)$ , что  для произвольного числа  $(a, b)$  выполняется  $(a, b)*(x, y) = (a, b)$ видем, что противоположное  число $(1, 0)$

Деление. Что бы решить $\frac{a+bi}{x+yi}$  нужно умножить числитель и знаменатель на $x-yi$ , то есть на сопряженное число.

Тригометрическая форма комплексного числа.

$|Z|$ - норма.

$|Z|= \sqrt{a^2+b^2}$

$\varphi$ - угол.

$\varphi = arctg(b/a)$

$Z = |Z|(cos(\varphi)-isin(\varphi))$

Умножение в тригометрической форме комплексного числа.

$Z_1Z_2 = |Z_1||Z_2|(cos(\varphi +\psi ) + isin(\varphi +\psi )))$

$\varphi$ - угол $Z_1$

$\psi$ - угол $Z_2$

Деление в тригометрической форме комплексного числа.

$\frac{Z_1}{Z_2} = \frac{|Z_1|(cos\varphi + isin\varphi )}{|Z_2|(cos\psi - isin\psi )} = \frac{|Z_1|}{|Z_2|}(cos(\varphi - \psi )+isin(\varphi - \psi ))$

Формула Муавра.

$[|Z|(cos(\varphi+ 2 \Pi k) + isin(\varphi+ 2 \Pi k)]^n = (|Z|^n(cos(n\varphi+ 2 \Pi k) + isin(n\varphi+ 2 \Pi k))$

1) M - множество замкнута относительно этих операций $o_i$. Замкнутость означает $a,b\in M$ и $a o_i b\in M$

2)o_i - бинарная операция.

Моноид это алгебра с одной операцией. $\left \{ M, o \right \}$

Полугруппа.

1) $\left \{ M, o \right \}$ Моноид

2) $(a o b) o c = a o (b o c) a,b,c\in M$ ассоциативность.

Группа.

1) Полугруппа.

2) $\exists e\in M: \forall a\in M;$ $a o e=a$    $e-$нейтральный элемент.

3) $\forall a\in M: \exists a^{-1}\in M$   $a o a^{-1}=e$    $a^{-1}-$ обратный элемент.

Кольцо $\left \{K, o_1, o_2 \right \}$

1)алгебра.

2)$\left \{K, +\right \}$ группа(коммутотивность) $+$ - пример операции.

3)$\left \{K, *\right \}$ полугруппа. $*$ - пример операции.

4) $(a+b)*c=a*c+b*c$ дистрибютивность операций.

Поле $\left \{F, o_1, o_2 \right \}$

1) Кольцо.

2) $\left \{F\setminus \left \{ 0 \right \}, *\right \}$ группа.

3) $\left \{F, +\right \}$ коммутотивная группа.

type vector = array[1..max_size_array] of integer;

procedure selection_sort(var a:vector; var m:vector; size:integer);
var
b,k,i,j:integer;
flag:boolean;
begin

m:=a;
for i:=1 to size-1 do
begin
flag:=true;
k:=i;
for j:=i to  size do
begin
if m[k] > m[j] then
begin
k:=j;
flag:=false;
end;
end;
b:=m[i];
m[i]:=m[k];
m[k]:=b;
if flag then
break;

end;
end;

type vector = array[1..max_size_array] of integer;

procedure buble_sort(var a:vector; var b:vector; size:integer);
var
k, i, j:integer;
flag:boolean;
begin
b:=a;
k:=0;
for i:=1 to (size-1) do
begin
flag:=true;
for j:=1 to (size-i) do
begin
if b[j]>b[j+1] then
begin
k:=b[j];
b[j]:=b[j+1];
b[j+1]:=k;
flag:=false;
end;
end;
if flag then break;
end;
end;

Skitter безумно красивый слайдер на jQuery.

С 26 видами эффектов смены картинки: cube, cubeRandom, block, cubeStop, cubeHide, cubeSize, horizontal, showBars, showBarsRandom, tube, fade, fadeFour, paralell, blind, blindHeight, blindWidth, directionTop, directionBottom, directionRight, directionLeft, cubeStopRandom, cubeSpread, cubeJelly, random, randomSmart.

С двумя типами загрузки xml и html.

С тремя видами навигации: Номерная(Numbers), Миниатюрками(Thumbs) и кружками(Dots).

Подключение Skitter и нужных плагинов.

<pre>
<ol>
<li>// Styles</li>

<li><link href="css/skitter.styles.css" type="text/css" media="all" rel="stylesheet" /></li>

<li>// Scripts</li>

<li><script src="js/jquery-1.5.2.min.js"></script></li>

<li><script src="js/jquery.skitter.min.js"></script></li>

<li><script src="js/jquery.easing.1.3.js"></script></li>

<li><script src="js/jquery.animate-colors-min.js"></script></li>

</ol>

</pre>

Запускаем функцию.

$(function(){
$('.class').skitter();
});

Html

<pre>
<li><div class="box_skitter box_skitter_large"></li>

<li>    <ul></li>

<li>        <li></li>

<li>            <a href="http://thiagosf.net"><img src="images/01.jpg" class="block" /></a></li>

<li>            <div class="label_text"></li>

<li>                <p>Label</p></li>

<li>            </div></li>

<li>        </li></li>

<li>        <li></li>

<li>            <a href="http://cakephp.org"><img src="images/02.jpg" class="cube" /></a></li>

<li>            <div class="label_text"></li>

<li>                <p>Label</p></li>

<li>            </div></li>

<li>        </li></li>

<li>        <li></li>

<li>            <a href="http://jquery.com"><img src="images/03.jpg" class="default" /></a></li>

<li>            <div class="label_text"></li>

<li>                <p>Label</p></li>

<li>            </div></li>

<li>        </li></li>

<li>    </ul></li>

</pre>

Xml

<pre>
<ol>
<li><?xml version="1.0" encoding="utf-8"?></li>

<li><skitter></li>

<li>    <slide></li>

<li>        <link>#directionTop</link></li>

<li>        <image type="directionTop">images/001.jpg</image></li>

<li>        <label><![CDATA[<p>directionTop</p>]]></label></li>

<li>    </slide></li>

<li>    <slide></li>

<li>        <link>#cubeSize</link></li>

<li>        <image type="cubeSize">images/002.jpg</image></li>

<li>        <label><![CDATA[<p>cubeSize</p>]]></label></li>

<li>    </slide></li>

<li>    <slide></li>

<li>        <link>#paralell</link></li>

<li>        <image type="paralell">images/003.jpg</image></li>

<li>        <label><![CDATA[<p>paralell</p>]]></label></li>

<li>    </slide></li>

<li></skitter></li>

</ol>

</pre>

Демо
Скачать

Итак приступим к установки.

1. Заходим сюда и добавляем к себе плагин.

2. После выхода 4 версии Firefox по умолчанию нижний тулбар отключеный, а наш gmail manager живет там, поэтому нужно нижний тулбар  включить.  Чтоб включить его идем View > Toolbars > нажимаем Add-on-Bar. Нижний тулбар включен.

3.  Теперь нам осталось добавить нашу акаунт. Внизу  у нас появился серый конвер. Нажимаем на него правой кнопкой мыши > выбираем Options(Настройки). Выбираем Accounts>Add  Появляются три поля email, alias, password. С email и password  думаю все понятно, alias служит для будет подпись конверта в нижнем тулбаре.

Сегодня сделаем галерею с круглыми миниатюрами.Давайте начнем с создания HTML-структуры. У нас будет довольно много элементов, поэтому мы начнем с главного меню, которое появляется при просмотре полного изображения.

<div id="top_menu">
<span id="description"></span>
<a id="back" href="#"><span></span>back</a>
<div>
<span>Album 1</span>
<span> / Shot 1</span>
</div>
</div>

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

Нам также необходимо погрузчик элемента:

<div id="loader"></div>

Теперь, давайте посмотрим на заголовок элемента, где мы поставим наш главный элемент H1 для галерея название:

<div id="header" style="top:-90px;"><!--top 30 px to show-->
<h1>Bubbleriffic<span>jQuery Image Gallery</span></h1>
</div>

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

Следующий элемент будет эскизы оболочку, которая будет иметь все альбомы миниатюр. Так как мы будем использовать миниатюрами скроллер Манос, мы будем строить нашу разметку на этой структуре. Там будет три прокрутки контейнеры для трех альбомов, которые будут иметь класс "tshf_container":

<div id="thumbnails_wrapper" style="top:-255px;">
<!-- top:110px to show-->

<div id="tshf_container1" >
<div>
<div>

<div>
<div>
<a href="#">
<img src="images/albums/album1/thumbs/1.jpg" alt="Description" />
</a>
<span></span>
</div>
</div>

<div>
...
</div>

</div>
</div>
</div>

<div id="tshf_container2" >
...
</div>

<div id="tshf_container3" >
...
</div>
</div>

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

<div>
<img id="bubble" src="images/bubble.png" alt=""/>
</div>

Предварительный контейнер для полного просмотра изображения с навигации будет иметь следующую структуру:

<div id="preview">
<a id="prev_image" href="#"></a>
<a id="next_image" href="#"></a>
</div>

The footer can be used to add some information:

<div>
<!-- Add something here -->
</div>

<h2>CSS:</h2>

Определим некоторые общие свойства для ссылки, списки и тела:

*{
margin:0;
padding:0;
}
a{
text-decoration:none;
outline:none;
}
ul{
list-style:none;
}
body{
background:#222 url(../bg.jpg) repeat top left;
font-family:"Trebuchet MS", "Myriad Pro", Helvetica, sans-serif;
font-size:13px;
color: #fff;
text-transform:uppercase;
text-shadow:0px 0px 1px #fff;
letter-spacing:1px;
overflow:hidden;
}

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

.top_menu{
height:30px;
line-height:30px;
position:absolute;
top:-30px;
left:0;
width:100%;
overflow:hidden;
background:#010101;
border-bottom:1px solid #000;
z-index:100;
-moz-box-shadow:0px 0px 4px #010101;
-webkit-box-shadow:0px 0px 4px #010101;
box-shadow:0px 0px 4px #010101;
}

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

Ссылка назад будет иметь следующий стиль:

.top_menu .back{
position:absolute;
top:0px;
left:10px;
height:30px;
line-height:30px;
cursor:pointer;
color:#aaa;
}

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

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

Описание появится в центере:

.top_menu span.description{
font-style:italic;
position:absolute;
width:100%;
text-align:center;
top:0px;
left:0px;
height:30px;
line-height:30px;
}

Информация будит находится справа:

.top_menu .info{
float:right;
margin-right:10px;
}

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

.header{
height:80px;
position:absolute;
top:30px;
left:0px;
width:100%;
overflow:hidden;
z-index:90;
background-color:#ffd800;
-moz-box-shadow:0px 0px 10px #010101;
-webkit-box-shadow:0px 0px 10px #010101;
box-shadow:0px 0px 10px #010101;
}
h1{
font-size:60px;
padding-left:20px;
color:#010101;
line-height:80px;
text-shadow:1px 1px 1px #000;
}
h1 span{
font-size:16px;
float:right;
margin-right:20px;
}

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

полное изображение будет позиционироваться абсолютно, но мы создадим свою окончательную позицию в JavaScript:

.preview img{
position:absolute;
left:0;
top:0;
-moz-box-shadow:1px 1px 5px #111;
-webkit-box-shadow:1px 1px 5px #111;
box-shadow:21px 1px 5px #111;
-webkit-box-reflect:
below 5px
-webkit-gradient(
linear,
left top,
left bottom,
from(transparent),
color-stop(0.8, transparent),
to(rgb(255, 216, 0))
);
}

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

.footer{
z-index:100;
height:30px;
line-height:30px;
text-align:center;
font-size:10px;
background:#010101;
border-top:1px solid #000;
position:absolute;
bottom:0px;
left:0px;
width:100%;
-moz-box-shadow:0px 0px 4px #010101;
-webkit-box-shadow:0px 0px 4px #010101;
box-shadow:0px 0px 4px #010101;
}
.footer a{
color:#999;
text-decoration:none;
margin:40px;
}

Загрузка элемента будет размещен в центре страницы, и мы сделаем его вокруг, установив границы радиус до половины его ширина / высота:

.loader{
display:none;
width:200px;
height:200px;
background: #000 url(../images/ajax-loader.gif) no-repeat center center;
position:fixed;
top:50%;
left:50%;
margin:-100px 0px 0px -100px;
opacity: 0.7;
z-index:9999;
-moz-border-radius:100px;
-webkit-border-radius:100px;
border-radius:100px;
}

Элементы навигации будет иметь следующий общий стиль:

a.next_image,
a.prev_image{
width:50px;
height:50px;
position:fixed;
top:50%;
margin-top:-25px;
cursor:pointer;
opacity:0.7;
z-index:999999;
-moz-box-shadow:0px 0px 3px #000;
-webkit-box-shadow:0px 0px 3px #000;
box-shadow:0px 0px 3px #000;
-moz-border-radius:25px;
-webkit-border-radius:25px;
border-radius:25px;
}
a.next_image:hover,
a.prev_image:hover
{
opacity:0.9;
}

И отдельные стили будут

a.next_image{
background:#000 url(../images/next.png) no-repeat center center;
right:-50px;
}
a.prev_image{
background:#000 url(../images/prev.png) no-repeat center center;
left:-50px;
}

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

Теперь, мы будем стиле миниатюр обертку:

.thumbnails_wrapper{
position:absolute;
top:-255px;
left:0px;
width:100%;
-moz-box-shadow:0px 3px 5px #000;
-webkit-box-shadow:0px 3px 5px #000;
box-shadow:0px 3px 5px #000;
}

Пузыря изображение будет расположен в центре страницы и ширину и высоту 0. Мы будем оживить ее  в JavaScript:

.bubble img{
position:fixed;
top:50%;
left:50%;
width:0px;
height:0px;
}

Теперь, мы будем адаптировать стиль миниатюрами скроллер Манос ":

.tshf_container{
height:85px;
position:relative;
width:100%;
background:#ffd800;
}
.tshf_container .thumbScroller{
position:relative;
width:100%;
overflow:hidden;
}
.tshf_container .thumbScroller,
.tshf_container .thumbScroller .container,
.tshf_container .thumbScroller .content{
height:85px;
}
.tshf_container .thumbScroller .container{
position:relative;
left:0;
}
.tshf_container .thumbScroller .content{
float:left;
}
.tshf_container .thumbScroller .content div{
height:100%;
position:relative;
}
.tshf_container .thumbScroller img{
border:none;
}
.tshf_container .thumbScroller .content div a{
display:block;
height:85px;
width:85px;
}
.tshf_container .thumbScroller .content div a img{
width:85px;
}
.tshf_container .thumbScroller .content div a:hover{
border-color:#fff;
}

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

.tshf_container .thumbScroller .content span{
cursor:pointer;
position:absolute;
width:85px;
height:85px;
top:0px;
left:0px;
background:transparent url(../images/thumb_overlay.png) no-repeat top left;
}
.tshf_container .thumbScroller .content div:hover span{
background:transparent url(../images/thumb_overlay_hover.png) no-repeat top left;
}

И это все, стиль. Теперь, давайте добавим волшебство!

<h2>JavaScript</h2>

Включим следующие сценарии:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.thumbnailScroller.js"></script>

Мы начнем с кэшированием некоторые важные элементы и определяющие некоторые показатели:

var $thumbnails_wrapper     = $('#thumbnails_wrapper'),
$thumbs                    = $thumbnails_wrapper.find('.tshf_container').find('.content'),
$top_menu                = $('#top_menu'),
$header                    = $('#header'),
$bubble                 = $('#bubble'),
$loader                    = $('#loader'),
$preview                = $('#preview'),
$thumb_images            = $thumbnails_wrapper.find('img'),
total_thumbs            = $thumb_images.length,
$next_img                = $('#next_image'),
$prev_img                = $('#prev_image'),
$back                    = $('#back'),
$description            = $('#description'),
//текущего альбома и текущих фото
//(индексы tshf_container и содержание элементов)
currentAlbum            = -1,
currentPhoto            = -1;

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

$loader.show();

//показывает главное меню и превью меню
openPhotoAlbums();

function openPhotoAlbums(){
//Презагрузка всех миниатюр
var cnt_loaded = 0;
$thumb_images.each(function(){
var $thumb         = $(this);
var image_src     = $thumb.attr('src');
$('<img/>').load(function(){
++cnt_loaded;
if(cnt_loaded == total_thumbs){
$loader.hide();
createThumbnailScroller();
//показать главное меню и превью меню
$header.stop()
.animate({'top':'30px'},700,'easeOutBack');
$thumbnails_wrapper.stop()
.animate({'top':'110px'},700,'easeOutBack');
}
}).attr('src',image_src);
});
}

Функция "createThumbnailScroller ()" сделают эскизы быть прокручиваемый после сценария Manos, но мы будем к этому позже.
Далее, мы определим, что происходит, когда мы нажмите на миниатюру.

$thumbs.bind('click',function(e){
//показать картинку загрузки
$loader.show();
var $thumb    = $(this),
//источник соответствующие большое изображение
img_src = $thumb.find('img.thumb')
.attr('src')
.replace('/thumbs','');

//отслеживать текущий альбом / фото
currentPhoto= $thumb.index(),
currentAlbum= $thumb.closest('.tshf_container')
.index();
//отображает текущий альбом и текущих фото
updateInfo(currentAlbum,currentPhoto);
//презагрузка больших изображений
$('<img/>').load(function(){
var $this = $(this);
// записываем размер большого изображения
saveFinalPositions($this);
// margin_circle является диаметр
// пузыря изображения
var w_w                = $(window).width(),
w_h                = $(window).height(),
margin_circle    = w_w + w_w/3;
if(w_h>w_w)
margin_circle    = w_h + w_h/3;

// изображение будет расположен по центру,
// с ширина и высота 0px
$this.css({
'width'        : '0px',
'height'    : '0px',
'marginTop'    : w_h/2 +'px',
'marginLeft': w_w/2 +'px'
});
$preview.append($this);
/ / скрыть заголовок
$header.stop().animate({'top':'-90px'},400, function(){
$loader.hide();
// показать главное меню с кнопки "Назад",
// и текущего альбома/спрятать информацию о файле
$top_menu.stop()
.animate({'top':'0px'},400,'easeOutBack');
//анимируем пузырь изображение
$bubble.stop().animate({
'width'        :    margin_circle + 'px',
'height'    :    margin_circle + 'px',
'marginTop'    :    -margin_circle/2+'px',
'marginLeft':    -margin_circle/2+'px'
},700,function(){
//решим проблему размера
$('BODY').css('background','#FFD800');
});
//после 200ms анимация большого изображения
//и видно панель навигации
setTimeout(function(){
var final_w    = $this.data('width'),
final_h    = $this.data('height');
$this.stop().animate({
'width'        : final_w + 'px',
'height'    : final_h + 'px',
'marginTop'    : w_h/2 - final_h/2 + 'px',
'marginLeft': w_w/2 - final_w/2 + 'px'
},700,showNav);
//show the description
$description.html($thumb.find('img.thumb').attr('alt'));
},200);

});
//скрываем миниатюры
$thumbnails_wrapper.stop()
.animate({
'top' : w_h+'px'
},400,function(){
//solve resize problem
$(this).hide();
});

}).attr('src',img_src);
});

Когда мы нажимаем на "Next " элемент навигации, мы хотим, чтобы следующие исполнилось:

$next_img.bind('click',function(){
//приращение currentPhoto
++currentPhoto;
//текущий альбом
var $album        = $thumbnails_wrapper.find('.tshf_container')
.eq(currentAlbum),
//следуйщий элемент
$next        = $album.find('.content').eq(currentPhoto),
$current     = $preview.find('img');
if($next.length == 0 || $current.is(':animated')){
--currentPhoto;
return false;
}
else{
$loader.show();
updateInfo(currentAlbum,currentPhoto);
//презагрузка большого изображения
var img_src = $next.find('img.thumb')
.attr('src')
.replace('/thumbs',''),
w_w        = $(window).width(),
w_h        = $(window).height();

$('<img/>').load(function(){
var $this = $(this);
//запись размера, что большое изображение
//должны, когда это показано
saveFinalPositions($this);
$loader.hide();
$current.stop()
.animate({'marginLeft':'-'+($current.width()+20)+'px'},500,function(){
//the current image gets removed
$(this).remove();
});
// новое изображение будет позиционироваться по центру,
// с ширина и высота 0px
$this.css({
'width'        : '0px',
'height'    : '0px',
'marginTop'    : w_h/2 +'px',
'marginLeft': w_w/2 +'px'
});
$preview.prepend($this);
var final_w    = $this.data('width'),
final_h    = $this.data('height');
$this.stop().animate({
'width'        : final_w + 'px',
'height'    : final_h + 'px',
'marginTop'    : w_h/2 - final_h/2 + 'px',
'marginLeft': w_w/2 - final_w/2 + 'px'
},700);
//видем описание
$description.html($next.find('img.thumb').attr('alt'));
}).attr('src',img_src);
}
});

Сейчас мы определим, что происходит, когда мы нажмите для просмотра предыдущего изображения:

$prev_img.bind('click',function(){
--currentPhoto;
//текущий альбом
var $album        = $thumbnails_wrapper.find('.tshf_container')
.eq(currentAlbum),
$prev        = $album.find('.content').eq(currentPhoto),
$current     = $preview.find('img');
if($prev.length == 0 || $current.is(':animated') || currentPhoto < 0){
++currentPhoto;
return false;
}
else{
$loader.show();
updateInfo(currentAlbum,currentPhoto);
//презагрузка предедущего изображение
var img_src = $prev.find('img.thumb')
.attr('src')
.replace('/thumbs',''),
w_w                = $(window).width(),
w_h                = $(window).height();

$('<img/>').load(function(){
var $this = $(this);
//запись размера, что большое изображение
//должны, когда это показавается
saveFinalPositions($this);

$loader.hide();
$current.stop()
.animate({'marginLeft':(w_w+20)+'px'},500,function(){
// текущее изображение становится удалены
$(this).remove();
});
// новое изображение будет позиционироваться по центру,
// с ширина и высота 0px
$this.css({
'width'        : '0px',
'height'    : '0px',
'marginTop'    : w_h/2 +'px',
'marginLeft': w_w/2 +'px'
});
$preview.append($this);
var final_w    = $this.data('width'),
final_h    = $this.data('height');
$this.stop().animate({
'width'        : final_w + 'px',
'height'    : final_h + 'px',
'marginTop'    : w_h/2 - final_h/2 + 'px',
'marginLeft': w_w/2 - final_w/2 + 'px'
},700);
//увидим описание
$description.html($prev.find('img.thumb').attr('alt'));
}).attr('src',img_src);
}
});

Когда мы изменить размер окна, мы должны пересчитать размер и положение изображения:

$(window).resize(function(){
var $current = $preview.find('img'),
w_w         = $(window).width(),
w_h         = $(window).height();
if($current.length > 0){
saveFinalPositions($current);
var final_w    = $current.data('width'),
final_h    = $current.data('height');
$current.css({
'width'        : final_w + 'px',
'height'    : final_h + 'px',
'marginTop'    : w_h/2 - final_h/2 + 'px',
'marginLeft': w_w/2 - final_w/2 + 'px'
});
}
});

Когда мы нажимаем на ссылку назад, мы хотим, чтобы закрыть предварительное изображение:

$back.bind('click',closePreview)

Функции для отображения и скрытия навигации:

// показывает, кнопки навигации
function showNav(){
$next_img.stop().animate({
'right'    : '10px'
},300);
$prev_img.stop().animate({
'left'    : '10px'
},300);
}

// скрывает кнопки навигации
function hideNav(){
$next_img.stop().animate({
'right'    : '-50px'
},300);
$prev_img.stop().animate({
'left'    : '-50px'
},300);
}

Следующая функция будет обновлять альбом/изображение информация:

// обновление текущего альбома и текущих фото инфо
function updateInfo(album,photo){
$top_menu.find('.album_info')
.html('Album ' + (album+1))
.end()
.find('.image_info')
.html(' / Shot ' + (photo+1))
}

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

function saveFinalPositions($image){
var theImage     = new Image();
theImage.src     = $image.attr("src");
var imgwidth     = theImage.width;
var imgheight     = theImage.height;

// 140, 2 * 60 в следующей / предыдущей кнопки плюс 20 дополнительных полей
var containerwidth     = $(window).width() - 140;
// 150, 30 из заголовка + 30 из колонтитула + дополнительные 90
var containerheight = $(window).height() - 150;

if(imgwidth    > containerwidth){
var newwidth = containerwidth;
var ratio = imgwidth / containerwidth;
var newheight = imgheight / ratio;
if(newheight > containerheight){
var newnewheight = containerheight;
var newratio = newheight/containerheight;
var newnewwidth =newwidth/newratio;
theImage.width = newnewwidth;
theImage.height= newnewheight;
}
else{
theImage.width = newwidth;
theImage.height= newheight;
}
}
else if(imgheight > containerheight){
var newheight = containerheight;
var ratio = imgheight / containerheight;
var newwidth = imgwidth / ratio;
if(newwidth > containerwidth){
var newnewwidth = containerwidth;
var newratio = newwidth/containerwidth;
var newnewheight =newheight/newratio;
theImage.height = newnewheight;
theImage.width= newnewwidth;
}
else{
theImage.width = newwidth;
theImage.height= newheight;
}
}
$image.data({'width':theImage.width,'height':theImage.height});
}

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

function closePreview(){
var $current = $preview.find('img'),
w_w         = $(window).width(),
w_h         = $(window).height(),
margin_circle    = w_w + w_w/3;

if(w_h>w_w)
margin_circle    = w_h + w_h/3;

if($current.is(':animated'))
return false;
//скрыть навигацию
hideNav();
//скрыть верхнее меню
$top_menu.stop()
.animate({'top':'-30px'},400,'easeOutBack');
//скрыть изображение
$current.stop().animate({
'width'        : '0px',
'height'    : '0px',
'marginTop'    : w_h/2 +'px',
'marginLeft': w_w/2 +'px'
},700,function(){
$(this).remove();
});
// анимации пузыря изображения
// Первый набор позиций правильно -
// это могло бы изменение размеров окна
setTimeout(function(){
$bubble.css({
'width'         :    margin_circle + 'px',
'height'     :    margin_circle + 'px',
'margin-top' :    -margin_circle/2+'px',
'margin-left':    -margin_circle/2+'px'
});
$('BODY').css('background','url("bg.jpg") repeat scroll left top #222222');
$bubble.animate({
'width'        :    '0px',
'height'    :    '0px',
'marginTop'    :    '0px',
'marginLeft':    '0px'
},500);
},200);
setTimeout(function(){
$header.stop()
.animate({'top':'30px'},700,'easeOutBack');
$thumbnails_wrapper.stop()
.show()
.animate({'top':'110px'},700,'easeOutBack');
},600);
}

function createThumbnailScroller(){
/*
Параметры ThumbnailScroller функции:
1) идентификатор контейнер (div id)
2) типа миниатюрами скроллер. Значения: "горизонтальные", "вертикальная"
3) первый и последний эскиз маржа (для лучшего взаимодействия курсор)
4) выделите ослабление сумму (0 при отсутствии ослабления)
5) выделите ослабления типа
6) эскизы умолчанию непрозрачности
7) эскизы наведении курсора мыши исчезают скорость (в миллисекундах)
*/
ThumbnailScroller("tshf_container1","horizontal",10,800,"easeOutCirc",0.5,300);
ThumbnailScroller("tshf_container2","horizontal",10,800,"easeOutCirc",0.5,300);
ThumbnailScroller("tshf_container3","horizontal",10,800,"easeOutCirc",0.5,300);
}

Оригинальная статья на английском.

Демо

Скачать

Особенности:

• Можно добавить маркеры
• Отображения HTML-контента, когда маркер нажат
• Карта может быть расположена как вы предпочитаете
• Запоминание последней позиции
• Дисплей заголовок карты
• Кнопки для перемещения в четырех направлениях
• Callback функция

<pre id="line64">$('.map').mobilymap({
position: 'center', // Карта позиции после загрузки - "правом нижнем углу","в правом верхнем углу","верхний левый","X Y", "центр",,, "нижний левый",
popupClass: 'bubble',
markerClass: 'point',
popup: true, // Показать всплывающий окно при нажатие  - true/false
cookies: true, // запоминать последнюю позицию карте - true/false
caption: true, // показывать подписи - true/false
setCenter: true, // sets the map view to the center on marker click
navigation: true, //Кнопки для перемещения в четырех направлениях
navSpeed: 1000, // Скорость панорамирования карты (большее значение для медленных панорамирование)
navBtnClass: 'navBtn',
outsideButtons: false, // селектор, только якоря например. '.map_buttons a'
onMarkerClick: function(){}, // функция запускающаяся после клика
onPopupClose: function(){}, // функция после закрытие скрывающего окна
onMapLoad: function(){} // функция запускающаяся загрузки карты
});</pre>

HTML:

<pre id="line91"><div class="map">
<img src="path_to_image" alt="caption" width="image_width" height="image_height" />
<div class="point" id="p-900-130"> <!-- p-x-y (x is distance from left, y is distance from top) -->
<!-- popup content -->
</div>
<!-- markers -->
</div></pre>

Демо
Скачать

HTML index.html демо:

<!DOCTYPE html> <!-- Defining the document as HTML5 -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>"Shutter Effect" with Canvas and jQuery | Tutorialzine Demo</title>

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

</head>
<body>

<div id="top"></div>

<div id="page">

<h1>Shutter Folio Photography</h1>

<div id="container">
<ul>
<li><img src="assets/img/photos/1.jpg" width="640" height="400" /></li>
<li><img src="assets/img/photos/2.jpg" width="640" height="400" /></li>
<li><img src="assets/img/photos/3.jpg" width="640" height="400" /></li>
<li><img src="assets/img/photos/4.jpg" width="640" height="400" /></li>
</ul>
</div>

</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script src="assets/jquery.shutter/jquery.shutter.js"></script>
<script src="assets/js/script.js"></script>

</body>
</html>

Cтили для страницы и плагин включены в головной части, и файлы сценариев как раз перед закрытием тега тела. #content DIV имеет неупорядоченный список с четырех фотографий, которые будут отображаться в виде слайд-шоу. Если браузер пользователя не поддерживает холст элемент, мы просто цикл через эти образы без отображения затвора эффект.

Когда затвор плагин называется, оно порождает следующую разметку HTML. В нашем примере, мы называем его на #content DIV, поэтому ниже код прилагается к нему.

Генерирущий HTML:

<div style="width: 640px; height: 400px;">
<div
style="height: 15000px; width: 1000px; margin-left: -500px; top: -300px;">

<canvas width="1000" height="1000"></canvas>
<canvas width="1000" height="1000"></canvas>
<canvas width="1000" height="1000"></canvas>
<canvas width="1000" height="1000"></canvas>
<canvas width="1000" height="1000"></canvas>
<canvas width="1000" height="1000"></canvas>
<canvas width="1000" height="1000"></canvas>
<canvas width="1000" height="1000"></canvas>
<canvas width="1000" height="1000"></canvas>
<canvas width="1000" height="1000"></canvas>
<canvas width="1000" height="1000"></canvas>
<canvas width="1000" height="1000"></canvas>
<canvas width="1000" height="1000"></canvas>
<canvas width="1000" height="1000"></canvas>
<canvas width="1000" height="1000"></canvas>
</div>
</div>

Демо

Скачать