回答編集履歴
1
ミスがあったため修正。
answer
CHANGED
|
@@ -14,10 +14,62 @@
|
|
|
14
14
|
$( '#swipebox-overlay' ).css( 'background-color', arr[ index ] );
|
|
15
15
|
};
|
|
16
16
|
$( '.swipebox' ).swipebox( {
|
|
17
|
-
|
|
17
|
+
nextSlide: func
|
|
18
|
-
prevSlide: func
|
|
18
|
+
, prevSlide: func // ,が抜けていました、すいません。
|
|
19
19
|
} );
|
|
20
20
|
|
|
21
21
|
} )( jQuery );
|
|
22
22
|
</script>
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
---
|
|
26
|
+
|
|
27
|
+
**追記：**
|
|
28
|
+
|
|
29
|
+
ひとまず下記で動くことを確認しました。
|
|
30
|
+
|
|
31
|
+
```HTML
|
|
32
|
+
<link rel="stylesheet" href="src/css/swipebox.css">
|
|
33
|
+
<script>var arr = [];</script>
|
|
34
|
+
<ul class="columns">
|
|
35
|
+
<li class="a-post">
|
|
36
|
+
<img src="http://placehold.it/50"><a rel="gallery" class="swipebox" href="http://placehold.it/300">001</a>
|
|
37
|
+
<script>arr.push( '#ffa' );</script><!-- li要素の外に置かない -->
|
|
38
|
+
</li>
|
|
39
|
+
<li class="a-post">
|
|
40
|
+
<img src="http://placehold.it/50"><a rel="gallery" class="swipebox" href="http://placehold.it/400">002</a>
|
|
41
|
+
<script>arr.push( '#faf' );</script><!-- li要素の外に置かない -->
|
|
42
|
+
</li>
|
|
43
|
+
<li class="a-post">
|
|
44
|
+
<img src="http://placehold.it/50"><a rel="gallery" class="swipebox" href="http://placehold.it/500">003</a>
|
|
45
|
+
<script>arr.push( '#aff' );</script><!-- li要素の外に置かない -->
|
|
46
|
+
</li>
|
|
47
|
+
<li class="a-post">
|
|
48
|
+
<img src="http://placehold.it/50"><a rel="gallery" class="swipebox" href="http://placehold.it/600">004</a>
|
|
49
|
+
<script>arr.push( '#00a' );</script><!-- li要素の外に置かない -->
|
|
50
|
+
</li>
|
|
51
|
+
<li class="a-post">
|
|
52
|
+
<img src="http://placehold.it/50"><a rel="gallery" class="swipebox" href="http://placehold.it/700">005</a>
|
|
53
|
+
<script>arr.push( '#0a0' );</script><!-- li要素の外に置かない -->
|
|
54
|
+
</li>
|
|
55
|
+
<li class="a-post">
|
|
56
|
+
<img src="http://placehold.it/50"><a rel="gallery" class="swipebox" href="http://placehold.it/800">006</a>
|
|
57
|
+
<script>arr.push( '#a00' );</script><!-- li要素の外に置かない -->
|
|
58
|
+
</li>
|
|
59
|
+
</ul>
|
|
60
|
+
<script src="lib/jquery-2.1.0.min.js"></script>
|
|
61
|
+
<script src="src/js/jquery.swipebox.js"></script>
|
|
62
|
+
<script>
|
|
63
|
+
;( function( $ ) {
|
|
64
|
+
var func = function( index ) {
|
|
65
|
+
$( '#swipebox-overlay' ).css( 'background-color', arr[ index ] );
|
|
66
|
+
};
|
|
67
|
+
$( '.swipebox' ).swipebox( {
|
|
68
|
+
afterOpen: func
|
|
69
|
+
, nextSlide: func
|
|
70
|
+
, prevSlide: func
|
|
71
|
+
} );
|
|
72
|
+
|
|
73
|
+
} )( jQuery );
|
|
74
|
+
</script>
|
|
23
75
|
```
|