Skip to content

Commit eff50d6

Browse files
desandrodesandro
committed
🎩 switch to https URLs
🎩 refactor ajax demo
1 parent 871b9a6 commit eff50d6

File tree

8 files changed

+102
-112
lines changed

8 files changed

+102
-112
lines changed

‎js/prev-next-button.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,8 @@ PrevNextButton.prototype._create = function( arrowShape ) {
2727
// properties
2828
let element = this.element = document.createElement('button');
2929
element.className = `flickity-button flickity-prev-next-button ${this.increment}`;
30-
// prevent button from submitting form http://stackoverflow.com/a/10836076/182183
3130
let label = this.isPrevious ? 'Previous' : 'Next';
31+
// prevent button from submitting form https://stackoverflow.com/a/10836076/182183
3232
element.setAttribute( 'type', 'button' );
3333
element.setAttribute( 'aria-label', label );
3434
// init as disabled

‎sandbox/adaptive-height.html‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -69,15 +69,15 @@ <h1>slides</h1>
6969
</div>
7070

7171
<div class="carousel image-carousel">
72-
<img src="http://i.imgur.com/r8p3Xgq.jpg" />
73-
<img src="http://i.imgur.com/q9zO6tw.jpg" />
74-
<img src="http://i.imgur.com/bwy74ok.jpg" />
75-
<img src="http://i.imgur.com/bAZWoqx.jpg" />
76-
<img src="http://i.imgur.com/PgmEBSB.jpg" />
77-
<img src="http://i.imgur.com/aboaFoB.jpg" />
78-
<img src="http://i.imgur.com/LkmcILl.jpg" />
79-
<img src="http://i.imgur.com/hODreXI.jpg" />
80-
<img src="http://i.imgur.com/UORFJ3w.jpg" />
72+
<img src="https://i.imgur.com/r8p3Xgq.jpg" />
73+
<img src="https://i.imgur.com/q9zO6tw.jpg" />
74+
<img src="https://i.imgur.com/bwy74ok.jpg" />
75+
<img src="https://i.imgur.com/bAZWoqx.jpg" />
76+
<img src="https://i.imgur.com/PgmEBSB.jpg" />
77+
<img src="https://i.imgur.com/aboaFoB.jpg" />
78+
<img src="https://i.imgur.com/LkmcILl.jpg" />
79+
<img src="https://i.imgur.com/hODreXI.jpg" />
80+
<img src="https://i.imgur.com/UORFJ3w.jpg" />
8181
</div>
8282

8383
<script src="../node_modules/get-size/get-size.js"></script>

‎sandbox/ajax.html‎

Lines changed: 17 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,6 @@ <h1>ajax</h1>
2929
<script src="../node_modules/unidragger/unidragger.js"></script>
3030
<script src="../node_modules/fizzy-ui-utils/utils.js"></script>
3131
<script src="../node_modules/imagesloaded/imagesloaded.js"></script>
32-
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
33-
<script src="../node_modules/jquery-bridget/jquery-bridget.js"></script>
3432

3533
<script src="../js/cell.js"></script>
3634
<script src="../js/slide.js"></script>
@@ -44,32 +42,24 @@ <h1>ajax</h1>
4442
<script src="../node_modules/flickity-imagesloaded/flickity-imagesloaded.js"></script>
4543

4644
<script>
47-
(function ($) {
48-
var url = "http://api.flickr.com/services/feeds/photos_public.gne?&format=json&jsoncallback=?&extras=url_n&per_page=10";
49-
50-
$.getJSON(
51-
url).done(function (data) {
52-
var items = data.items;
53-
items.forEach(function (item) {
54-
var html = "<div class=\"gallery-cell\"><img src=\"" + item.media.m + "\" /></div>";
55-
$('.gallery').append(html);
56-
});
57-
58-
$('.gallery').flickity({
59-
contain: true,
60-
freeScroll: true,
61-
friction: 0.2,
62-
imagesLoaded: true,
63-
prevNextButtons: false,
64-
pageDots: false,
65-
wrapAround: true
66-
});
67-
$(window).on('staticClick.flickity', function (event, pointer, clickedCellIndex, clickedCellElem) {
68-
console.log(clickedCellIndex, clickedCellElem);
69-
});
70-
});
71-
})(jQuery);
45+
window.onajaxload = function({ items }) {
46+
let gallery = document.querySelector('.gallery');
47+
gallery.innerHTML = items.map( ( item ) => {
48+
return `<div class="gallery-cell"><img src="${item.media.m}" /></div>`;
49+
} ).join(' ');
50+
51+
new Flickity( gallery, {
52+
freeScroll: true,
53+
friction: 0.2,
54+
// imagesLoaded: true,
55+
prevNextButtons: false,
56+
pageDots: false,
57+
wrapAround: true
58+
});
59+
};
7260
</script>
7361

62+
<script src="https://api.flickr.com/services/feeds/photos_public.gne?&format=json&jsoncallback=onajaxload&extras=url_n&per_page=10"></script>
63+
7464
</body>
7565
</html>

‎sandbox/basic.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ <h1>basic1</h1>
7575
</select>
7676
</div>
7777
<div class="cell">
78-
<p><button>Button</button> <a href="http://example.com">go to example.com</a></p>
78+
<p><button>Button</button> <a href="https://example.com">go to example.com</a></p>
7979
<p><input /></p>
8080
<p>
8181
<input type="checkbox" />

‎sandbox/lazyload.html‎

Lines changed: 35 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -52,62 +52,62 @@
5252
<h1>lazyload</h1>
5353

5454
<div class="carousel" data-flickity='{ "lazyLoad": true }'>
55-
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/r8p3Xgq.jpg" />
56-
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/q9zO6tw.jpg" />
57-
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/bwy74ok.jpg" />
58-
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/hODreXI.jpg" />
59-
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/UORFJ3w.jpg" />
60-
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/bAZWoqx.jpg" />
61-
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/PgmEBSB.jpg" />
62-
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/aboaFoB.jpg" />
63-
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/LkmcILl.jpg" />
55+
<img class="carousel__image" data-flickity-lazyload="https://i.imgur.com/r8p3Xgq.jpg" />
56+
<img class="carousel__image" data-flickity-lazyload="https://i.imgur.com/q9zO6tw.jpg" />
57+
<img class="carousel__image" data-flickity-lazyload="https://i.imgur.com/bwy74ok.jpg" />
58+
<img class="carousel__image" data-flickity-lazyload="https://i.imgur.com/hODreXI.jpg" />
59+
<img class="carousel__image" data-flickity-lazyload="https://i.imgur.com/UORFJ3w.jpg" />
60+
<img class="carousel__image" data-flickity-lazyload="https://i.imgur.com/bAZWoqx.jpg" />
61+
<img class="carousel__image" data-flickity-lazyload="https://i.imgur.com/PgmEBSB.jpg" />
62+
<img class="carousel__image" data-flickity-lazyload="https://i.imgur.com/aboaFoB.jpg" />
63+
<img class="carousel__image" data-flickity-lazyload="https://i.imgur.com/LkmcILl.jpg" />
6464
</div>
6565

6666
<div class="carousel"
6767
data-flickity='{ "lazyLoad": 1, "wrapAround": true }'>
68-
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/r8p3Xgq.jpg" />
69-
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/q9zO6tw.jpg" />
70-
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/bwy74ok.jpg" />
71-
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/hODreXI.jpg" />
72-
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/UORFJ3w.jpg" />
73-
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/bAZWoqx.jpg" />
74-
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/PgmEBSB.jpg" />
75-
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/aboaFoB.jpg" />
76-
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/LkmcILl.jpg" />
68+
<img class="carousel__image" data-flickity-lazyload="https://i.imgur.com/r8p3Xgq.jpg" />
69+
<img class="carousel__image" data-flickity-lazyload="https://i.imgur.com/q9zO6tw.jpg" />
70+
<img class="carousel__image" data-flickity-lazyload="https://i.imgur.com/bwy74ok.jpg" />
71+
<img class="carousel__image" data-flickity-lazyload="https://i.imgur.com/hODreXI.jpg" />
72+
<img class="carousel__image" data-flickity-lazyload="https://i.imgur.com/UORFJ3w.jpg" />
73+
<img class="carousel__image" data-flickity-lazyload="https://i.imgur.com/bAZWoqx.jpg" />
74+
<img class="carousel__image" data-flickity-lazyload="https://i.imgur.com/PgmEBSB.jpg" />
75+
<img class="carousel__image" data-flickity-lazyload="https://i.imgur.com/aboaFoB.jpg" />
76+
<img class="carousel__image" data-flickity-lazyload="https://i.imgur.com/LkmcILl.jpg" />
7777
</div>
7878

7979
<div class="carousel"
8080
data-flickity='{ "lazyLoad": true }'>
8181
<div class="carousel__cell">
82-
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/r8p3Xgq.jpg" /></div>
82+
<img class="carousel__cell__image" data-flickity-lazyload="https://i.imgur.com/r8p3Xgq.jpg" /></div>
8383
<div class="carousel__cell">
84-
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/q9zO6tw.jpg" /></div>
84+
<img class="carousel__cell__image" data-flickity-lazyload="https://i.imgur.com/q9zO6tw.jpg" /></div>
8585
<div class="carousel__cell">
86-
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/bwy74ok.jpg" /></div>
86+
<img class="carousel__cell__image" data-flickity-lazyload="https://i.imgur.com/bwy74ok.jpg" /></div>
8787
<div class="carousel__cell">
88-
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/hODreXI.jpg" /></div>
88+
<img class="carousel__cell__image" data-flickity-lazyload="https://i.imgur.com/hODreXI.jpg" /></div>
8989
<div class="carousel__cell">
90-
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/UORFJ3w.jpg" /></div>
90+
<img class="carousel__cell__image" data-flickity-lazyload="https://i.imgur.com/UORFJ3w.jpg" /></div>
9191
<div class="carousel__cell">
92-
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/bAZWoqx.jpg" /></div>
92+
<img class="carousel__cell__image" data-flickity-lazyload="https://i.imgur.com/bAZWoqx.jpg" /></div>
9393
<div class="carousel__cell">
94-
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/PgmEBSB.jpg" /></div>
94+
<img class="carousel__cell__image" data-flickity-lazyload="https://i.imgur.com/PgmEBSB.jpg" /></div>
9595
<div class="carousel__cell">
96-
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/aboaFoB.jpg" /></div>
96+
<img class="carousel__cell__image" data-flickity-lazyload="https://i.imgur.com/aboaFoB.jpg" /></div>
9797
<div class="carousel__cell">
98-
<img class="carousel__cell__image" data-flickity-lazyload="http://i.imgur.com/LkmcILl.jpg" /></div>
98+
<img class="carousel__cell__image" data-flickity-lazyload="https://i.imgur.com/LkmcILl.jpg" /></div>
9999
</div>
100100

101101
<div class="carousel carousel--jq">
102-
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/r8p3Xgq.jpg" />
103-
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/q9zO6tw.jpg" />
102+
<img class="carousel__image" data-flickity-lazyload="https://i.imgur.com/r8p3Xgq.jpg" />
103+
<img class="carousel__image" data-flickity-lazyload="https://i.imgur.com/q9zO6tw.jpg" />
104104
<img class="carousel__image" data-flickity-lazyload="foo.jpg" />
105-
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/hODreXI.jpg" />
106-
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/UORFJ3w.jpg" />
107-
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/bAZWoqx.jpg" />
108-
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/PgmEBSB.jpg" />
109-
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/aboaFoB.jpg" />
110-
<img class="carousel__image" data-flickity-lazyload="http://i.imgur.com/LkmcILl.jpg" />
105+
<img class="carousel__image" data-flickity-lazyload="https://i.imgur.com/hODreXI.jpg" />
106+
<img class="carousel__image" data-flickity-lazyload="https://i.imgur.com/UORFJ3w.jpg" />
107+
<img class="carousel__image" data-flickity-lazyload="https://i.imgur.com/bAZWoqx.jpg" />
108+
<img class="carousel__image" data-flickity-lazyload="https://i.imgur.com/PgmEBSB.jpg" />
109+
<img class="carousel__image" data-flickity-lazyload="https://i.imgur.com/aboaFoB.jpg" />
110+
<img class="carousel__image" data-flickity-lazyload="https://i.imgur.com/LkmcILl.jpg" />
111111
</div>
112112

113113
<h2>srcset</h2>

‎sandbox/media.html‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -47,66 +47,66 @@ <h1>media</h1>
4747
<div id="image-gallery1" class="container image-gallery"
4848
data-flickity='{ "wrapAround": false, "imagesLoaded": true, "percentPosition": false }'>
4949
<!-- images from unsplash.com -->
50-
<img src="http://i.imgur.com/r8p3Xgq.jpg" />
51-
<img src="http://i.imgur.com/q9zO6tw.jpg" />
52-
<img src="http://i.imgur.com/bwy74ok.jpg" />
53-
<img src="http://i.imgur.com/hODreXI.jpg" />
54-
<img src="http://i.imgur.com/UORFJ3w.jpg" />
55-
<img src="http://i.imgur.com/bAZWoqx.jpg" />
56-
<img src="http://i.imgur.com/PgmEBSB.jpg" />
57-
<img src="http://i.imgur.com/aboaFoB.jpg" />
58-
<img src="http://i.imgur.com/LkmcILl.jpg" />
50+
<img src="https://i.imgur.com/r8p3Xgq.jpg" />
51+
<img src="https://i.imgur.com/q9zO6tw.jpg" />
52+
<img src="https://i.imgur.com/bwy74ok.jpg" />
53+
<img src="https://i.imgur.com/hODreXI.jpg" />
54+
<img src="https://i.imgur.com/UORFJ3w.jpg" />
55+
<img src="https://i.imgur.com/bAZWoqx.jpg" />
56+
<img src="https://i.imgur.com/PgmEBSB.jpg" />
57+
<img src="https://i.imgur.com/aboaFoB.jpg" />
58+
<img src="https://i.imgur.com/LkmcILl.jpg" />
5959
</div>
6060

6161
<div id="image-gallery2" class="container image-gallery-contained"
6262
data-flickity='{ "imagesLoaded": true, "percentPosition": false }'>
6363
<!-- images from unsplash.com -->
6464

6565
<div class="image-cell">
66-
<a href="http://example.com"><img src="http://i.imgur.com/r8p3Xgq.jpg" /></a>
66+
<a href="https://example.com"><img src="https://i.imgur.com/r8p3Xgq.jpg" /></a>
6767
</div>
6868
<div class="image-cell">
69-
<a href="http://example.com"><img src="http://i.imgur.com/q9zO6tw.jpg" /></a>
69+
<a href="https://example.com"><img src="https://i.imgur.com/q9zO6tw.jpg" /></a>
7070
</div>
7171
<div class="image-cell">
72-
<a href="http://example.com"><img src="http://i.imgur.com/bwy74ok.jpg" /></a>
72+
<a href="https://example.com"><img src="https://i.imgur.com/bwy74ok.jpg" /></a>
7373
</div>
7474
<div class="image-cell">
75-
<a href="http://example.com"><img src="http://i.imgur.com/hODreXI.jpg" /></a>
75+
<a href="https://example.com"><img src="https://i.imgur.com/hODreXI.jpg" /></a>
7676
</div>
7777
<div class="image-cell">
78-
<a href="http://example.com"><img src="http://i.imgur.com/UORFJ3w.jpg" /></a>
78+
<a href="https://example.com"><img src="https://i.imgur.com/UORFJ3w.jpg" /></a>
7979
</div>
8080
<div class="image-cell">
81-
<a href="http://example.com"><img src="http://i.imgur.com/bAZWoqx.jpg" /></a>
81+
<a href="https://example.com"><img src="https://i.imgur.com/bAZWoqx.jpg" /></a>
8282
</div>
8383
<div class="image-cell">
84-
<a href="http://example.com"><img src="http://i.imgur.com/PgmEBSB.jpg" /></a>
84+
<a href="https://example.com"><img src="https://i.imgur.com/PgmEBSB.jpg" /></a>
8585
</div>
8686
<div class="image-cell">
87-
<a href="http://example.com"><img src="http://i.imgur.com/aboaFoB.jpg" /></a>
87+
<a href="https://example.com"><img src="https://i.imgur.com/aboaFoB.jpg" /></a>
8888
</div>
8989
<div class="image-cell">
90-
<a href="http://example.com"><img src="http://i.imgur.com/LkmcILl.jpg" /></a>
90+
<a href="https://example.com"><img src="https://i.imgur.com/LkmcILl.jpg" /></a>
9191
</div>
9292
</div>
9393

9494
<!-- <div id="video-gallery1" class="container video-gallery">
9595
<div class="cell">
96-
<iframe src="//player.vimeo.com/video/87701971" width="534" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="http://vimeo.com/87701971">Yosemite HD II</a> from <a href="http://vimeo.com/projectyose">Project Yosemite</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
96+
<iframe src="//player.vimeo.com/video/87701971" width="534" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="https://vimeo.com/87701971">Yosemite HD II</a> from <a href="https://vimeo.com/projectyose">Project Yosemite</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
9797
</div>
9898
<div class="cell">
9999
<iframe width="400" height="300" src="//www.youtube.com/embed/MvUE4WUtChk" frameborder="0" allowfullscreen></iframe>
100100
</div>
101101
<div class="cell">
102-
<iframe src="//player.vimeo.com/video/115014610" width="534" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="http://vimeo.com/115014610">The Coast</a> from <a href="http://vimeo.com/nrsfilms">NRS Films</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
102+
<iframe src="//player.vimeo.com/video/115014610" width="534" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="https://vimeo.com/115014610">The Coast</a> from <a href="https://vimeo.com/nrsfilms">NRS Films</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
103103
</div>
104104
<div class="cell">
105105
<iframe width="400" height="300" src="//www.youtube.com/embed/TmQd6S9wXYQ" frameborder="0" allowfullscreen></iframe>
106106
</div>
107107
108108
<div class="cell">
109-
<iframe src="//player.vimeo.com/video/115680769" width="712" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="http://vimeo.com/115680769">Quids In</a> from <a href="http://vimeo.com/nbnumeric">New Balance Numeric</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
109+
<iframe src="//player.vimeo.com/video/115680769" width="712" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="https://vimeo.com/115680769">Quids In</a> from <a href="https://vimeo.com/nbnumeric">New Balance Numeric</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
110110
</div>
111111
112112
</div> -->

‎sandbox/scroll-event.html‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -173,15 +173,15 @@ <h1>scroll event</h1>
173173
</div>
174174

175175
<div class="image-carousel">
176-
<div class="image-carousel__cell"><img src="http://i.imgur.com/r8p3Xgq.jpg" /></div>
177-
<div class="image-carousel__cell"><img src="http://i.imgur.com/q9zO6tw.jpg" /></div>
178-
<div class="image-carousel__cell"><img src="http://i.imgur.com/bwy74ok.jpg" /></div>
179-
<div class="image-carousel__cell"><img src="http://i.imgur.com/hODreXI.jpg" /></div>
180-
<div class="image-carousel__cell"><img src="http://i.imgur.com/UORFJ3w.jpg" /></div>
181-
<div class="image-carousel__cell"><img src="http://i.imgur.com/bAZWoqx.jpg" /></div>
182-
<div class="image-carousel__cell"><img src="http://i.imgur.com/PgmEBSB.jpg" /></div>
183-
<div class="image-carousel__cell"><img src="http://i.imgur.com/aboaFoB.jpg" /></div>
184-
<div class="image-carousel__cell"><img src="http://i.imgur.com/LkmcILl.jpg" /></div>
176+
<div class="image-carousel__cell"><img src="https://i.imgur.com/r8p3Xgq.jpg" /></div>
177+
<div class="image-carousel__cell"><img src="https://i.imgur.com/q9zO6tw.jpg" /></div>
178+
<div class="image-carousel__cell"><img src="https://i.imgur.com/bwy74ok.jpg" /></div>
179+
<div class="image-carousel__cell"><img src="https://i.imgur.com/hODreXI.jpg" /></div>
180+
<div class="image-carousel__cell"><img src="https://i.imgur.com/UORFJ3w.jpg" /></div>
181+
<div class="image-carousel__cell"><img src="https://i.imgur.com/bAZWoqx.jpg" /></div>
182+
<div class="image-carousel__cell"><img src="https://i.imgur.com/PgmEBSB.jpg" /></div>
183+
<div class="image-carousel__cell"><img src="https://i.imgur.com/aboaFoB.jpg" /></div>
184+
<div class="image-carousel__cell"><img src="https://i.imgur.com/LkmcILl.jpg" /></div>
185185
</div>
186186

187187
<script src="../node_modules/get-size/get-size.js"></script>

0 commit comments

Comments
 (0)