scratch – Diff between revs 117 and 119
?pathlinks?
| Rev 117 | Rev 119 | |||
|---|---|---|---|---|
| Line 67... | Line 67... | |||
| 67 | <div class="slides"></div> |
67 | <div class="slides"></div> |
|
| 68 | <h3 class="title"></h3> |
68 | <h3 class="title"></h3> |
|
| 69 | <a class="prev">‹</a> |
69 | <a class="prev">‹</a> |
|
| 70 | <a class="next">›</a> |
70 | <a class="next">›</a> |
|
| 71 | <a class="play-pause"></a> |
71 | <a class="play-pause"></a> |
|
| 72 | <ol class="indicator"></ol> |
72 | <!-- <ol class="indicator"></ol> --> |
|
| 73 | </div> |
73 | </div> |
|
| Line 74... | Line 74... | |||
| 74 | |
74 | |
|
| 75 | <div class="swiper-container"> |
75 | <div class="swiper-container"> |
|
| 76 | <div id="links" class="swiper-wrapper"> |
76 | <div id="links" class="swiper-wrapper"> |
|
| 77 | </div> |
- | ||
| 78 | <!-- If we need pagination --> |
- | ||
| 79 | <div class="swiper-pagination"></div> |
- | ||
| 80 | |
77 | </div> |
|
| 81 | <!-- If we need navigation buttons --> |
78 | <!-- If we need navigation buttons --> |
|
| 82 | <div class="swiper-button-prev"></div> |
79 | <div class="swiper-button-prev"></div> |
|
| 83 | <div class="swiper-button-next"></div> |
- | ||
| 84 | |
- | ||
| 85 | <!-- If we need scrollbar --> |
- | ||
| 86 | <div class="swiper-scrollbar"></div> |
80 | <div class="swiper-button-next"></div> |
|
| 87 | </div> |
81 | </div> |
|
| 88 | </div> |
82 | </div> |
|
| Line 89... | Line 83... | |||
| 89 | </div> |
83 | </div> |
|
| Line 139... | Line 133... | |||
| 139 | }; |
133 | }; |
|
| Line 140... | Line 134... | |||
| 140 | |
134 | |
|
| 141 | $.getJSON('gallery.php', { |
135 | $.getJSON('gallery.php', { |
|
| 142 | timestamp: window.performance.now() |
136 | timestamp: window.performance.now() |
|
| 143 | }).then((data) => { |
- | ||
| 144 | //alert(JSON.stringify(data, null, 4)); |
- | ||
| 145 | |
137 | }).then((data) => { |
|
| 146 | // Create slides. |
138 | // Create slides. |
|
| 147 | var index = 0; |
139 | var indexPage = 0; |
|
| 148 | data.chunk(50).forEach((page) => { |
140 | data.chunk(50).forEach((page) => { |
|
| 149 | document.getElementById('links') |
141 | document.getElementById('links') |
|
| 150 | .insertAdjacentHTML( |
142 | .insertAdjacentHTML( |
|
| 151 | 'beforeend', |
143 | 'beforeend', |
|
| 152 | '<div id="swiper-slide-' + index + '" class="swiper-slide"></div>' |
144 | '<div id="swiper-slide-' + indexPage + '" class="swiper-slide"></div>' |
|
| 153 | ); |
145 | ); |
|
| 154 | page.forEach((link) => { |
146 | page.forEach((link) => { |
|
| 155 | // Generic icon for text / html items. |
147 | // Generic icon for text / html items. |
|
| 156 | switch(link.type) { |
148 | switch(link.type) { |
|
| 157 | case 'text/plain': |
149 | case 'text/plain': |
|
| 158 | link.preview ='img/text.png'; |
150 | link.preview ='img/text.png'; |
|
| 159 | break; |
151 | break; |
|
| 160 | } |
152 | } |
|
| 161 | document.getElementById('swiper-slide-' + index) |
153 | document.getElementById('swiper-slide-' + indexPage) |
|
| 162 | .insertAdjacentHTML( |
154 | .insertAdjacentHTML( |
|
| 163 | 'beforeend', |
155 | 'beforeend', |
|
| 164 | '<a href="' + |
156 | '<a href="' + |
|
| 165 | link.url + |
157 | link.url + |
|
| Line 168... | Line 160... | |||
| 168 | '"><img src="' + |
160 | '"><img src="' + |
|
| 169 | link.preview + |
161 | link.preview + |
|
| 170 | '" width="60" height="40"></a>' |
162 | '" width="60" height="40"></a>' |
|
| 171 | ); |
163 | ); |
|
| 172 | }); |
164 | }); |
|
| - | 165 | |
||
| - | 166 | |
||
| 173 | ++index; |
167 | ++indexPage; |
|
| 174 | }); |
168 | }); |
|
| - | 169 | |
||
| - | 170 | // Initialize gallery. |
||
| 175 | document.getElementById('links').onclick = function (event) { |
171 | document.getElementById('links').onclick = function (event) { |
|
| 176 | event = event || window.event; |
172 | event = event || window.event; |
|
| 177 | var target = event.target || event.srcElement, |
173 | var target = event.target || event.srcElement, |
|
| 178 | link = target.src ? target.parentNode : target, |
174 | link = target.src ? target.parentNode : target, |
|
| 179 | options = { |
175 | options = { |
|
| 180 | index: link, |
176 | index: link, |
|
| 181 | event: event, |
177 | event: event, |
|
| 182 | carousel: true, |
178 | carousel: true, |
|
| 183 | container: '#blueimp-gallery-carousel', |
179 | container: '#blueimp-gallery-carousel', |
|
| 184 | stretchImages: true, |
180 | stretchImages: true, |
|
| 185 | startSlideshow: false, |
181 | startSlideshow: false, |
|
| 186 | onslideend: function(index, slide) { |
182 | onslideend: function(index, slide) { |
|
| 187 | // Set the URL. |
183 | // Set the URL. |
|
| Line 189... | Line 185... | |||
| 189 | location.protocol |
185 | location.protocol |
|
| 190 | .concat("//") |
186 | .concat("//") |
|
| 191 | .concat(window.location.hostname) |
187 | .concat(window.location.hostname) |
|
| 192 | .concat("/").concat(data[index].url) |
188 | .concat("/").concat(data[index].url) |
|
| 193 | ); |
189 | ); |
|
| 194 | |
190 | |
|
| 195 | // Check if OpenGraph should be enabled. |
191 | // Check if OpenGraph should be enabled. |
|
| 196 | switch(data[index].opengraph) { |
192 | switch(data[index].opengraph) { |
|
| 197 | case true: |
193 | case true: |
|
| 198 | // Enable the facebook button. |
194 | // Enable the facebook button. |
|
| 199 | $('#btn-facebook') |
195 | $('#btn-facebook') |
|
| Line 203... | Line 199... | |||
| 203 | // Disable the facebook button. |
199 | // Disable the facebook button. |
|
| 204 | $('#btn-facebook') |
200 | $('#btn-facebook') |
|
| 205 | .prop("disabled", true); |
201 | .prop("disabled", true); |
|
| 206 | break; |
202 | break; |
|
| 207 | } |
203 | } |
|
| 208 | |
204 | |
|
| 209 | // Change the URL to OpenGraph when the user clicks the button. |
205 | // Change the URL to OpenGraph when the user clicks the button. |
|
| 210 | $('#btn-facebook').on('click', () => { |
206 | $('#btn-facebook').on('click', () => { |
|
| 211 | $('#URL') |
207 | $('#URL') |
|
| 212 | .val( |
208 | .val( |
|
| 213 | location.protocol.concat("//") |
209 | location.protocol.concat("//") |
|
| Line 225... | Line 221... | |||
| 225 | }; |
221 | }; |
|
| Line 226... | Line 222... | |||
| 226 | |
222 | |
|
| 227 | new Swiper ('.swiper-container', { |
223 | new Swiper ('.swiper-container', { |
|
| 228 | // Optional parameters |
224 | // Optional parameters |
|
| - | 225 | direction: 'horizontal', |
||
| 229 | direction: 'horizontal', |
226 | // Creates duplicate element IDs if set to true. |
|
| Line 230... | Line 227... | |||
| 230 | loop: true, |
227 | loop: false, |
|
| 231 | |
228 | |
|
| Line 232... | Line 229... | |||
| 232 | // If we need pagination |
229 | // If we need pagination |
|
| 233 | pagination: '.swiper-pagination', |
230 | //pagination: '.swiper-pagination', |
|
| 234 | |
231 | |
|
| Line 235... | Line 232... | |||
| 235 | // Navigation arrows |
232 | // Navigation arrows |
|
| 236 | nextButton: '.swiper-button-next', |
233 | nextButton: '.swiper-button-next', |
|
| 237 | prevButton: '.swiper-button-prev', |
234 | prevButton: '.swiper-button-prev', |
|
| Line 238... | Line 235... | |||
| 238 | |
235 | |
|
| 239 | // And if we need scrollbar |
236 | // And if we need scrollbar |
|
| 240 | scrollbar: '.swiper-scrollbar', |
237 | //scrollbar: '.swiper-scrollbar', |
|