-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.php
106 lines (85 loc) · 6.53 KB
/
index.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QuickBox демо</title>
<script type="text/javascript" src="qb/js/jquery-1.4.4.js"></script>
<link rel="stylesheet" href="highlight/styles/foundation.css">
<link rel="stylesheet" href="css/bs.css">
<link rel="stylesheet" href="css/style.css">
<link href="i/favicon.ico" rel="shortcut icon">
<script src="highlight/highlight.js"></script>
<script type="text/javascript" src="highlight/etc.js"></script>
<script src="/js/getscript/getscript.js"></script>
<link rel="stylesheet" href="/js/getscript/getscript.css" type="text/css">
<!--[if lte IE 10]>
<script type="text/javascript" src="qb/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<header class="jumbotron subhead">
<div class="container text-left">
<h1>QuickBox <small>0.5</small></h1>
<p class="lead">Простой и быстрый скрипт для увеличения фотографий.</p>
<div class="row text-left">
<div class="col-lg-4"><a class="btn btn-success btn-large" href="#demo">Посмотреть пример</a></div>
<div class="col-lg-4"><a class="btn btn-success btn-large gscript" href="#getscript" rel="quickbox">Скачать сейчас</a></div>
<div class="col-lg-4"><a class="btn btn-success btn-large" href="http://dedushka.org/scripts">Заказать установку</a></div>
</div>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-lg-4">
<h3>Подойдет всем</h3>
<p>Интернет-магазины, блоги, персональные сайты — скрипт можно использовать на любом ресурсе.</p>
</div>
<div class="col-lg-4">
<h3>Простота</h3>
<p>Установка производится за десять минут, а для работы подойдут даже устаревшие версии jQuery (от 1.4), если вы не хотите ничего кардинально менять.</p></div>
<div class="col-lg-4">
<h3>Удобство</h3>
<p>Управлять просмотром фотографиями можно прямо с клавиатуры. </p><p>Кнопки <code>←</code> и <code>→</code> — листание влево-вправо, а <code>Esc</code> — закрыть просмотрщик.</p>
</div>
</div>
<h2>Что такое QuickBox</h2>
<p>QuickBox — простой скрипт для увеличения фотографий. Для примера его работы я сделал эту страницу с несколькими картинками. Фотографий может быть любое количество. Скрипт подойдёт для любого сайта, в частности для просмотра увеличенных фотографий в интернет-магазинах. QuickBox умеет работать со всеми современными браузерами (Firefox, Opera, Google Chrome, IE10+)</p>
<a name="demo"></a>
<h2>Демо <small>Как работает QuickBox</small></h2>
<p>Это пример того, как ведет себя QuickBox в работе. Смело нажимайте на любую картинку. </p>
<div class="row">
<div class="col-md-4 text-center">
<a class="quickbox" href="i/01.jpg" title=""><img src="i/01s.jpg" alt="Пора спать"></a>
</div>
<div class="col-md-4 text-center">
<a class="quickbox" href="i/02.jpg" title=""><img src="i/02s.jpg" alt="Поход"></a>
</div>
<div class="col-md-4 text-center">
<a class="quickbox" href="i/03.jpg" title=""><img src="i/03s.jpg" alt="Лошадь неодобрительно наблюдает, как желтеют листья"></a>
</div>
<div class="col-md-4 text-center">
<a class="quickbox" href="i/04.jpg" title="На небе только и разговоров, что о море"><img src="i/04s.jpg" alt="На небе только и разговоров, что о море"></a>
</div>
<div class="col-md-4 text-center">
<a class="quickbox" href="i/05.jpg" title=""><img src="i/05s.jpg" alt="Никогда не знаешь, когда придется снова учиться. Стараюсь делать это всегда."></a>
</div>
<div class="col-md-4 text-center">
<a class="quickbox" href="i/06.jpg" title=""><img src="i/06s.jpg" alt="На такой же когда-то ездил Луи де Фюнес"></a>
</div>
</div>
<h2>Подключение</h2>
<p>Чтобы подключить скрипт, закачайте файлы из архива в любую папку к себе на хостинг и добавьте в тег <code>head</code> такие строки:</p>
<pre><script src="qb/js/qb.js"></script></pre>
<p>Убедитесь, что у вас подключён jQuery; если пока нет, то подключите <a href="http://code.jquery.com/jquery-latest.min.js">отсюда</a>. Проверьте что путь к папке с файлами скрипта указан правильно. Для работы QuickBox требуется jQuery версии не ранее 1.4.</p>
<h2>Настройка</h2>
<p>Чтобы изображение открывалось в новом слое при помощи QuickBox, присвойте прямой ссылке на него <code>class="quickbox"</code>. Больше ничего делать не нужно. Подпись под фото будет взята из атрибута <code>title</code> или <code>alt</code>. Вот пример:</p>
<pre><a class="quickbox" href="i/06.jpg" title="Описание фотографии"><br> <img src="i/06s.jpg" alt=""><br></a></pre>
<p>Описание фотографии можно также указывать в атрибуте <code>alt</code> или <code>title</code> для самого фото. Впрочем, можно и не указывать совсем, как вам удобнее. Как видите, перейти на этот скрипт очень просто.</p>
<p>← <a href="http://dedushka.org">Вернуться в блог</a>.</p>
</div>
<script type="text/javascript" src="qb/js/qb.js"></script>
<footer>
<div class="text-center">Назар Токарь · <a href="mailto:a@dedushka.org">a@dedushka.org</a> · <a href="http://dedushka.org">Блог</a> · <a href="http://qbx.me">Форум</a></div>
</footer>
</body>
</html>