teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

ミスがあったため修正。

2016/05/14 10:13

投稿

kei344
kei344

スコア69625

answer CHANGED
@@ -14,10 +14,62 @@
14
14
  $( '#swipebox-overlay' ).css( 'background-color', arr[ index ] );
15
15
  };
16
16
  $( '.swipebox' ).swipebox( {
17
- nextSlide: func
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
  ```