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

回答編集履歴

2

修正

2018/04/08 15:05

投稿

退会済みユーザー
answer CHANGED
@@ -131,7 +131,7 @@
131
131
  function expand(index) {
132
132
  var target_image = images.eq(index);
133
133
  var src = target_image.prop('src');
134
- $("#response").attr("src", src);
134
+ $("#response").prop("src", src);
135
135
  }
136
136
  });
137
137
  </script>

1

追記

2018/04/08 15:05

投稿

退会済みユーザー
answer CHANGED
@@ -69,4 +69,72 @@
69
69
  </script>
70
70
  </body>
71
71
  </html>
72
+ ```
73
+
74
+ ---
75
+
76
+ ```html
77
+ <!DOCTYPE HTML>
78
+ <html lang="ja">
79
+ <head>
80
+ <meta charset="UTF-8">
81
+ <title>sample</title>
82
+ <style type="text/css">
83
+ #box img {
84
+ width: 200px;
85
+ }
86
+ </style>
87
+ </head>
88
+ <body>
89
+ <div id="box">
90
+ <img src="https://dummyimage.com/600x400/666666/fff.jpg&amp;text=1" alt="1" />
91
+ <img src="https://dummyimage.com/600x400/666666/fff.jpg&amp;text=2" alt="2" />
92
+ <img src="https://dummyimage.com/600x400/666666/fff.jpg&amp;text=3" alt="3" />
93
+ <img src="https://dummyimage.com/600x400/666666/fff.jpg&amp;text=4" alt="4" />
94
+ <img src="https://dummyimage.com/600x400/666666/fff.jpg&amp;text=5" alt="5" />
95
+ <div>
96
+ <button id="prev" type="button">PREV</button>
97
+ <button id='next' type="button">NEXT</button>
98
+ </div>
99
+ </div>
100
+ <div>
101
+ <img id="response" src="" alt="" />
102
+ </div>
103
+ <script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script>
104
+ <script type="text/javascript">
105
+ $(function () {
106
+ var images = $("#box img");
107
+ var current_index = 0;
108
+ $("#box img").each(function (i) {
109
+ $(this).data('index', i);
110
+ });
111
+ $("#box img").on('click', function (e) {
112
+ current_index = $(this).data('index');
113
+ expand(current_index);
114
+ });
115
+ $("#prev").on('click', function () {
116
+ current_index--;
117
+ if (current_index < 0) {
118
+ current_index = images.length - 1;
119
+ }
120
+ expand(current_index);
121
+ });
122
+ $("#next").on('click', function () {
123
+ current_index++;
124
+ expand(current_index % images.length);
125
+ });
126
+
127
+ /**
128
+ * 拡大処理
129
+ * @returns void
130
+ */
131
+ function expand(index) {
132
+ var target_image = images.eq(index);
133
+ var src = target_image.prop('src');
134
+ $("#response").attr("src", src);
135
+ }
136
+ });
137
+ </script>
138
+ </body>
139
+ </html>
72
140
  ```