網頁設計/JQuery

Jquery Hex Image Gallery

contents

  1. 1. 起源
  2. 2. 下載
    1. 2.1. Demo
  3. 3. 使用
    1. 3.1. html
    2. 3.2. css
  4. 4. 架構
    1. 4.1. hex page
    2. 4.2. als gallery
  5. 5. hexo blog plugin
    1. 5.1. #

起源

六角形的圖片廊道，一開始給定的是提案是做出一個圖片展示櫃，可是想到要放在這個 hexo 部落格，要做到類似的相簿功能其實是很麻煩的，還有必須要關聯 generator 的產生方式，才能製作出相對的 static website，那只好將項目弄成單獨一頁，而這一頁要怎麼製作其實很難捉摸。失敗的設計總是這樣子開始的。

由於圖片量太大的話，變成一開始載入速度會太慢，因此找來了 lazyload.js，但是跟展示窗口銜接上仍有一些問題，無法適時地反映操作，所以需要 call back 操作，否則圖片會載入失敗。再者是原本六角 CSS 問題，找來網路上提供的 CSS，發現更換大型圖片的時候，會造成圖片顯示不正常，因此在這一塊費時了相當長的時間來符合預期的操作。

此項目已經放在我的 Github 上面，同時你也可以在這個 blog 上方的 Picture 中看到 demo，萬萬沒想到居然有人願意 Star 標記，真的是相當令人動容啊，從來沒想過有人對於這樣的蠢製作感興趣。

下載

Download on Github

Demo

使用

仍然以 github 上的 project 為優先版本。以下的內容也許不是最新版本。

html

為了方便產生器運行，產生方式採用 json 的生成方式。相關的動畫製作引入

  • jquery.lazyload.js 圖片動態載入
  • jquery.als.link-1.6.js 幻燈片的展示窗口 (經過修改，來完成跳轉操作)

當前採用 json 的原因是因為可以藉由較簡單的方式，以及往後可能使用 ajax 的方式運作。這樣彈性也許會比較大。

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
<!DOCTYPE html>
<html>
  <head>
    	<meta charset="utf-8"/>
    	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    	<script src="js/jquery.hex.gallery.js" type="text/javascript"></script>	
      	<script src="js/jquery.lazyload.js" type="text/javascript"></script> 
      	<script src="js/jquery.als.link-1.6.js" type="text/javascript"></script> 
    	<link rel="stylesheet" href="css/style.css">	
  </head>
  <body>
  	...
         <script type="text/hex-gallery">
{
  "album" : [
      {
        "cover": {"title": "<h4>THEME</h4><hr /><p>Stephanie Dola</p>", "class": "hex-1"},
        "photo": [
          {"imgur": "http://i.imgur.com/yIoACHc.gif"},
          {"imgur": "http://i.imgur.com/uINck6K.gif"},
          {"imgur": "http://i.imgur.com/zOZJEex.gif"}
        ]
      },
      {
        "cover": {"title": "<h4>THEME</h4><hr /><p>萌～萌～哒～</p>", "class": "hex-2"},
        "photo": [
          {"imgur": "http://i.imgur.com/YSmWA3g.gif"},
        ]
      },
      {
        "cover": {"title": "<h4>THEME</h4><hr /><p>其他</p>", "class": "hex-3"},
        "photo": [
          {"imgur": "http://i.imgur.com/vpKzynV.gif"},
          {"imgur": "http://i.imgur.com/rctEEyS.gif"}
        ]
      }
  ]
}
	   </script>
    ...
  </body>
</html>

css

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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
.hex-container
{
    display: block;
    height: 320px;
    position: relative;
    width: 800px;
}
.hex
{
    animation: animatedBackground 10s linear infinite;
    background-color: #ccc;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    float: left;
    font-family: Georgia,"Microsoft YaHei","Times New Roman",serif;
    font-weight: bold;
    height: 86px;
    margin: 25px 5px;
    moz-animation: animatedBackground 10s linear infinite;
    moz-background-size: cover;
    ms-animation: animatedBackground 10s linear infinite;
    position: relative;
    text-align: center;
    webkit-animation: animatedBackground 10s linear infinite;
    webkit-background-size: cover;
    width: 150px;
    zoom: 1;
}
.hex.hex-gap
{
    margin-left: 86px;
}
.hex a
{
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    text-indent: -9999em;
    top: 0;
    width: 100%;
}
.hex .corner-1
{
    moz-transform: rotate(60deg);
    ms-transform: rotate(60deg);
    o-transform: rotate(60deg);
    transform: rotate(60deg);
    webkit-transform: rotate(60deg);
}
.hex .corner-1:before
{
    moz-transform: rotate(-60deg) translate(-87px,0);
    moz-transform-origin: 0 0;
    ms-transform: rotate(-60deg) translate(-87px,0);
    ms-transform-origin: 0 0;
    o-transform: rotate(-60deg) translate(-87px,0);
    o-transform-origin: 0 0;
    transform: rotate(-60deg) translate(-87px,0);
    transform-origin: 0 0;
    webkit-transform: rotate(-60deg) translate(-87px,0);
    webkit-transform-origin: 0 0;
}
.hex .corner-2
{
    moz-transform: rotate(-60deg);
    ms-transform: rotate(-60deg);
    o-transform: rotate(-60deg);
    transform: rotate(-60deg);
    webkit-transform: rotate(-60deg);
}
.hex .corner-2:before
{
    bottom: 0;
    moz-transform: rotate(60deg) translate(-44px,-12px);
    ms-transform: rotate(60deg) translate(-44px,-12px);
    o-transform: rotate(60deg) translate(-44px,-12px);
    transform: rotate(60deg) translate(-44px,-12px);
    webkit-transform: rotate(60deg) translate(-44px,-12px);
}
.hex .corner-3
{
    moz-transform: rotate(0);
    ms-transform: rotate(0);
    o-transform: rotate(0);
    transform: rotate(0);
    webkit-transform: rotate(0);
}
.hex .corner-3:before
{
    moz-transform: rotate(0) translate(-12px,-44px);
    ms-transform: rotate(0) translate(-12px,-44px);
    o-transform: rotate(0) translate(-12px,-44px);
    transform: rotate(0) translate(-12px,-44px);
    webkit-transform: rotate(0) translate(-12px,-44px);
}
.hex .inner
{
    color: #eee;
    position: absolute;
    right: 0;
    top: 0;
    display: inline;
    float: left;
    width: 98.3333%;
    margin: 0px 0.833333%;
}
.hex .inner a
{
    color: #fff;
    text-indent: 0;
}
.hex h4
{
    margin: 0;
}
.hex hr
{
    border: 0;
    border-top: 1px solid #eee;
    margin: 15px auto;
    width: 60%;
}
.hex p
{
    font-size: 22px;
    margin: 0 auto;
    width: 80%;
}
.hex.hex-1
{
    background: #74cddb;
}
.hex.hex-2
{
    background: #f00;
}
.hex.hex-3
{
    background: #80b971;
}
.hex.hex-back
{
    background: #80b971;
}
.hex.hex-back a
{
    padding: 0 4px;
}
.hex .corner-1,.hex .corner-2,.hex .corner-3
{
    backface-visibility: hidden;
    background: inherit;
    height: 100%;
    left: 0;
    moz-backface-visibility: hidden;
    ms-backface-visibility: hidden;
    o-backface-visibility: hidden;
    overflow: hidden;
    position: absolute;
    top: 0;
    webkit-backface-visibility: hidden;
    width: 100%;
}
.hex .corner-1:before,.hex .corner-2:before,.hex .corner-3:before
{
    backface-visibility: hidden;
    background: inherit;
    background-repeat: no-repeat;
    content: '';
    height: 173px;
    left: 0;
    moz-backface-visibility: hidden;
    ms-backface-visibility: hidden;
    o-backface-visibility: hidden;
    position: absolute;
    top: 0;
    webkit-backface-visibility: hidden;
    width: 173px;
}
.hex-caption
{
    background-color: rgba(0,0,0,0.5);
    color: #fff;
    left: 0;
    moz-transition: all 300ms ease-out;
    ms-transition: all 300ms ease-out;
    o-transition: all 300ms ease-out;
    position: absolute;
    transition: all 300ms ease-out;
    webkit-transition: all 300ms ease-out;
}
.hex:hover .hex-simple-caption
{
    moz-transform: translateY(-100%);
    ms-transform: translateY(-100%);
    o-transform: translateY(-100%);
    transform: translateY(-100%);
    visibility: visible;
    webkit-transform: translateY(-100%);
}
.hex-simple-caption
{
    bottom: -60px;
    display: block;
    height: 30px;
    line-height: 25pt;
    text-align: center;
    visibility: hidden;
    width: 100%;
}
.hex-background
{
    left: -80px;
    position: absolute;
    top: -136px;
    width: 900px;
    z-index: -1;
}
.hex-background .hex
{
    background-color: #708090;
}
.als-viewport
{
    height: 390px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}
.als-wrapper
{
    list-style: none;
    position: relative;
}
.als-item
{
    cursor: pointer;
    display: block;
    float: left;
    position: relative;
    text-align: center;
}
.als-prev,.als-next
{
    clear: both;
    cursor: pointer;
    position: absolute;
}
.als-container
{
    background: none repeat scroll 0% 0% #2d2d2d;
    border-color: #ddd;
    border-style: solid;
    border-width: 1px 0;
    color: #ccc;
    line-height: 25.6px;
    margin: 0 -20px;
    overflow: auto;
    padding: 15px 20px;
    position: relative;
    text-align: center;
    width: 100%;
    z-index: 0;
}
.als-container .als-item
{
    display: block;
    margin: 0 5px;
    margin: 0 auto;
    min-height: 120px;
    min-width: 100px;
    padding: 4px 0;
    text-align: center;
    vertical-align: middle;
}
.als-container .als-prev
{
    font-size: 30px;
    left: 30px;
}
.als-container .als-next
{
    font-size: 30px;
    right: 30px;
}
.als-container .als-prev,.als-container .als-next
{
    top: 175px;
}
.icon-arrow-left
{
    display:inline-block;
    width:32px;
    height:32px;
    line-height:32px;
    border-top:3px solid #aaa;
    border-right:3px solid #aaa;
    -ms-transform:rotate(225deg);
    -moz-transform:rotate(225deg);
    -webkit-transform:rotate(225deg);
    transform:rotate(225deg);
}
.icon-arrow-right
{
    display:inline-block;
    width:32px;
    height:32px;
    line-height:32px;
    border-top:3px solid #aaa;
    border-right:3px solid #aaa;
    -ms-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
}

架構

hex page

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="hex-container">
    <div class="hex-background">
        <div class="hex hex-gap" style="background-image: url();">
            <div class="corner-1"></div>
            <div class="corner-2"></div>
            <div class="corner-3"></div>
            <div class="inner"></div>
        </div>
        <div class="hex" style="background-image: url();">
            <div class="corner-1"></div>
            <div class="corner-2"></div>
            <div class="corner-3"></div>
            <div class="inner"></div>
        </div>
        ...
    </div>
</div>

原本網路提供 hex 只有 corner-1 和 corner-2，這樣的做法無法產生 cover 的圖示，因此這裡增加 corner-3，但仍然會看到一條一條格線在斜邊上，不過已經相當足夠。

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="als-container" id="als-container_0" data-id="als-container_0">
    <div class="als-viewport" data-id="als-viewport_0" style="width: 800px; height: 328px;">
        <ul class="als-wrapper" data-id="als-wrapper_0" style="width: 4800px; height: 328px;">
            <li class="als-item" data-linkid="-6" id="als-item_0_0" style="left: 0px;">
                insert hex page
            </li>
            <li class="als-item" data-linkid="-1" id="als-item_0_0" style="left: 0px;">
                insert hex page
            </li>
            ...
        </ul>
    </div>
</div>

根據原本的 jquery.als-1.6.js 並沒有提供跳轉的操作，也就是說不能直接 shift 到指定位置，只能倚靠往左和往右的觸發，因此特別自己增加了 data-linkid 為操作手段。

hexo blog plugin

我已經把產生方式寫在 hexo-tag-oj 裡頭，下載使用 hexo-tag-plugin

不過相關的 js 還有 css 要自己擺放，請參考上面的描述項目。

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
{\% ojblock hex \%}
{
  "album" : [
      {
        "cover": {"title": "<h4>THEME</h4><hr /><p>Stephanie Dola</p>", "class": "hex-1"},
        "photo": [
          {"imgur": "http://i.imgur.com/yIoACHc.gif"},
          {"imgur": "http://i.imgur.com/4pzxseN.jpg"}
        ]
      },
      {
        "cover": {"title": "<h4>THEME</h4><hr /><p>萌～萌～哒～</p>", "class": "hex-2"},
        "photo": [
          {"imgur": "http://i.imgur.com/YSmWA3g.gif"},
          {"imgur": "http://i.imgur.com/5IHR8bQ.gif"}
        ]
      },
      {
        "cover": {"title": "<h4>THEME</h4><hr /><p>其他</p>", "class": "hex-3"},
        "photo": [
          {"imgur": "http://i.imgur.com/vpKzynV.gif"},
          {"imgur": "http://i.imgur.com/rctEEyS.gif"}
        ]
      }
  ]
}
{\% endojblock \%}

#