質問編集履歴

2

諦めます

2019/08/05 13:20

投稿

wpwbs585
wpwbs585

スコア19

test CHANGED
File without changes
test CHANGED
@@ -1,157 +1 @@
1
- <!DOCTYPE html>
2
-
3
- <html>
4
-
5
- <head>
6
-
7
- <meta charset=utf-8>
8
-
9
- <meta name="apple-mobile-web-app-capable" content="yes">
10
-
11
- <meta name="apple-touch-fullscreen" content="yes">
12
-
13
- <title>FlipPage</title>
14
-
15
-
16
-
17
- <!-- jQuery -->
18
-
19
- <script src="../jquery.min.js"></script>
20
-
21
-
22
-
23
- <!-- Flippage -->
24
-
25
- <script src="../jquery.flippage.min.js"></script>
26
-
27
- <link href="../jquery.flippage.css" type="text/css" rel="stylesheet" />
28
-
29
-
30
-
31
- <style>
32
-
33
- body > .main {width:960px;height:540px;
34
-
35
- display: block;
36
-
37
-
38
-
39
- }
40
-
41
-
42
-
43
-
44
-
45
- .exemples > .main {
46
-
47
- background-color: white;
48
-
49
- }
50
-
51
- </style>
52
-
53
- <script>
54
-
55
- (function($){
56
-
57
- $(document).ready(function(){
58
-
59
- $('.exemples:eq(0)').flippage({
60
-
61
- width: 960,//ここにmin-width:100%,
62
-
63
- height: 540//ここにmin-height:100%
64
-
65
- });
66
-
67
-
68
-
69
- $('.exemples:eq(1)').flippage({
70
-
71
- width: 300,
72
-
73
- height: 150
74
-
75
- });
76
-
77
- });
78
-
79
- })(jQuery);
80
-
81
-
82
-
83
-
84
-
85
- </script>
86
-
87
- </head>
88
-
89
- <body>
90
-
91
- <h1>Page d'exemples d'utilisation du plugin FlipPage</h1>
92
-
93
- <div class="main">
94
-
95
- <h2>Exemple 1</h2>
96
-
97
- <div class="exemples">
98
-
99
- <div><img src="img/car.jpg" style="margin-left: 0px;"></div>
100
-
101
- <div><img src="img/car.jpg" style="margin-left: -480px;"></div>
102
-
103
- <div><img src="img/car02.jpg" style="margin-left: 0px;"></div>
104
-
105
- <div><img src="img/car02.jpg" style="margin-left: -480px"></div>
106
-
107
- <div><img src="img/car03.jpg" style="margin-left: 0px;"></div>
108
-
109
- <div><img src="img/car03.jpg" style="margin-left: -480px;"></div>
110
-
111
- <div><img src="img/car04.jpg" style="margin-left: 0px;"></div>
112
-
113
- <div><img src="img/car04.jpg" style="margin-left: -480px;"></div>
114
-
115
- <div><img src="img/car05.jpg" style="margin-left: 0px;"></div>
116
-
117
- <div><img src="img/car05.jpg" style="margin-left: -480px;"></div>
118
-
119
- </div>
120
-
121
- <div><a href="#" onclick="$('.exemples:eq(0)').trigger('previous'); return false;">Previous</a> - <a href="#" onclick="javascript:$('.exemples:eq(0)').trigger('next'); return false;">Next</a></div>
122
-
123
- </div>
124
-
125
- <div>
126
-
127
- <h2>Exemple 2</h2>
128
-
129
-
130
-
131
- <div class="exemples">
132
-
133
- <div><h3>Page 1</h3></div>
134
-
135
- <div><h3>Page 2</h3> <a href="#" onclick="alert('Pages are clickable !'); return false;">Test me</a></div>
136
-
137
- <div><h3>Page 3</h3></div>
138
-
139
- <div><h3>Page 4</h3></div>
140
-
141
- <div><h3>Page 5</h3></div>
142
-
143
- <div><h3>Page 6</h3></div>
144
-
145
- <div><h3>Page 7</h3></div>
146
-
147
- <div><h3>Page 8</h3></div>
148
-
149
- </div>
150
-
151
- </div>
152
-
153
-
154
-
155
- </body>
156
-
157
- </html>
1
+ 諦めます。flippageはもう使わないので、諦めます。スマホ対応ではないのであきらめます。

1

画像が小さいのでフルスクリーンで表示させたい。

2019/08/05 13:20

投稿

wpwbs585
wpwbs585

スコア19

test CHANGED
@@ -1 +1 @@
1
- flippageのレスポンシブ化教えてください。
1
+ flippageのscriptの中にmin-width:100%;min-height:100%;と同等なタグをいれたいのですが
test CHANGED
@@ -58,13 +58,11 @@
58
58
 
59
59
  $('.exemples:eq(0)').flippage({
60
60
 
61
- width: 960,
61
+ width: 960,//ここにmin-width:100%,
62
62
 
63
- height: 540
63
+ height: 540//ここにmin-height:100%
64
64
 
65
- variableWidth:true
66
-
67
- });
65
+ });
68
66
 
69
67
 
70
68