From 77f6e4f4c076b8a174a5ba8c174d2d448d11b30d Mon Sep 17 00:00:00 2001 From: Danny Berger Date: Sat, 20 Dec 2014 08:59:32 -0700 Subject: [PATCH] Add gallery slideshows with PhotoSwipe --- .../gallery-map.html | 11 +- _layouts/gallery-slideshow.html | 198 ++++++++ .../index.html | 6 + .../slideshow.html | 4 + gallery/2014-barcelona-trip/index.html | 6 +- gallery/2014-barcelona-trip/map.html | 10 +- gallery/2014-barcelona-trip/slideshow.html | 4 + gallery/2014-colorado-aspens/index.html | 8 +- gallery/2014-colorado-aspens/slideshow.html | 4 + gallery/2014-london-iceland-trip/index.html | 6 +- gallery/2014-london-iceland-trip/map.html | 10 +- .../2014-london-iceland-trip/slideshow.html | 4 + .../photo-swipe/default-skin/default-skin.css | 436 ++++++++++++++++++ .../photo-swipe/default-skin/default-skin.png | Bin 0 -> 547 bytes .../photo-swipe/default-skin/default-skin.svg | 1 + .../photo-swipe/default-skin/preloader.gif | Bin 0 -> 866 bytes .../photo-swipe/photoswipe-ui-default.min.js | 4 + static/dev/photo-swipe/photoswipe.css | 136 ++++++ static/dev/photo-swipe/photoswipe.min.js | 4 + 19 files changed, 833 insertions(+), 19 deletions(-) rename _includes/gallery_map.html => _layouts/gallery-map.html (82%) create mode 100644 _layouts/gallery-slideshow.html create mode 100644 gallery/2014-albuquerque-balloon-fiesta/slideshow.html create mode 100644 gallery/2014-barcelona-trip/slideshow.html create mode 100644 gallery/2014-colorado-aspens/slideshow.html create mode 100644 gallery/2014-london-iceland-trip/slideshow.html create mode 100644 static/dev/photo-swipe/default-skin/default-skin.css create mode 100644 static/dev/photo-swipe/default-skin/default-skin.png create mode 100644 static/dev/photo-swipe/default-skin/default-skin.svg create mode 100644 static/dev/photo-swipe/default-skin/preloader.gif create mode 100644 static/dev/photo-swipe/photoswipe-ui-default.min.js create mode 100644 static/dev/photo-swipe/photoswipe.css create mode 100644 static/dev/photo-swipe/photoswipe.min.js diff --git a/_includes/gallery_map.html b/_layouts/gallery-map.html similarity index 82% rename from _includes/gallery_map.html rename to _layouts/gallery-map.html index b120944..5c7c601 100644 --- a/_includes/gallery_map.html +++ b/_layouts/gallery-map.html @@ -1,3 +1,7 @@ +--- +layout: "post" +--- +{% capture gallery %}{{ page.url|replace:'/map.html',''|remove_first:'/' }}{% endcapture %}
+ + + + + + + + + + + + + + + + + +
+

{{ page.title }}

+ {% loopdir path:gallery match:"*.md" sort:"ordering" %}
+ {% assign maxsize = 0 %} + {% assign maxref = false %} + {% for size in item.sizes %} + {% if maxsize < size[1].height * size[1].width %} + {% assign maxsize = size[1].height * size[1].width %} + {% assign maxref = size %} + {% endif %} + {% endfor %} + + {{ item.title }} + + +
{% endloopdir %} +
+ + + + + + + diff --git a/gallery/2014-albuquerque-balloon-fiesta/index.html b/gallery/2014-albuquerque-balloon-fiesta/index.html index e1f2dcd..ac15afe 100644 --- a/gallery/2014-albuquerque-balloon-fiesta/index.html +++ b/gallery/2014-albuquerque-balloon-fiesta/index.html @@ -6,4 +6,10 @@ date_end: '2014-10-13' highlight_photo: 'f114579-img-1074' --- +
+

+ View slideshow. +

+
+ {% include gallery_list.html gallery='2014-albuquerque-balloon-fiesta' %} diff --git a/gallery/2014-albuquerque-balloon-fiesta/slideshow.html b/gallery/2014-albuquerque-balloon-fiesta/slideshow.html new file mode 100644 index 0000000..07e99ef --- /dev/null +++ b/gallery/2014-albuquerque-balloon-fiesta/slideshow.html @@ -0,0 +1,4 @@ +--- +layout: "gallery-slideshow" +title: "Albuquerque Balloon Fiesta" +--- diff --git a/gallery/2014-barcelona-trip/index.html b/gallery/2014-barcelona-trip/index.html index 7464c0d..4a6b178 100644 --- a/gallery/2014-barcelona-trip/index.html +++ b/gallery/2014-barcelona-trip/index.html @@ -7,9 +7,9 @@ highlight_photo: '106c907-museu-nacional-dart-de-catalunya' ---
-

- Some photos from my trip to Barcelona. See them on a map, too. -

+

+ Some photos from my trip to Barcelona. View slideshow, map. +

{% include gallery_list.html gallery='2014-barcelona-trip' %} diff --git a/gallery/2014-barcelona-trip/map.html b/gallery/2014-barcelona-trip/map.html index 783a626..df41c0c 100644 --- a/gallery/2014-barcelona-trip/map.html +++ b/gallery/2014-barcelona-trip/map.html @@ -1,6 +1,8 @@ --- -layout: post -title: Barcelona Trip +layout: "gallery-map" +title: "Barcelona Trip" +gallery_map: + latitude: 41.3955627 + longitude: 2.1756329 + zoom: 12 --- - -{% include gallery_map.html gallery='2014-barcelona-trip' latitude=41.3955627 longitude=2.1756329 zoom=12 %} diff --git a/gallery/2014-barcelona-trip/slideshow.html b/gallery/2014-barcelona-trip/slideshow.html new file mode 100644 index 0000000..85e2b97 --- /dev/null +++ b/gallery/2014-barcelona-trip/slideshow.html @@ -0,0 +1,4 @@ +--- +layout: "gallery-slideshow" +title: "Barcelona Trip" +--- diff --git a/gallery/2014-colorado-aspens/index.html b/gallery/2014-colorado-aspens/index.html index 8231ab1..b76b15b 100644 --- a/gallery/2014-colorado-aspens/index.html +++ b/gallery/2014-colorado-aspens/index.html @@ -1,8 +1,14 @@ --- layout: gallery-list -title: Colorado Aspens +title: "Colorado Aspens" date: '2014-09-27' highlight_photo: '2dbeedb-aspens-invading' --- +
+

+ View slideshow. +

+
+ {% include gallery_list.html gallery='2014-colorado-aspens' %} diff --git a/gallery/2014-colorado-aspens/slideshow.html b/gallery/2014-colorado-aspens/slideshow.html new file mode 100644 index 0000000..3d1211a --- /dev/null +++ b/gallery/2014-colorado-aspens/slideshow.html @@ -0,0 +1,4 @@ +--- +layout: "gallery-slideshow" +title: "Colorado Aspens" +--- diff --git a/gallery/2014-london-iceland-trip/index.html b/gallery/2014-london-iceland-trip/index.html index 9e9807e..fe68aef 100644 --- a/gallery/2014-london-iceland-trip/index.html +++ b/gallery/2014-london-iceland-trip/index.html @@ -7,9 +7,9 @@ highlight_photo: 'df5150c-a-classic-view' ---
-

- Some photos from my trip to London and Iceland. See them on a map, too. -

+

+ Some photos from my trip to London and Iceland. View slideshow, map. +

{% include gallery_list.html gallery='2014-london-iceland-trip' %} diff --git a/gallery/2014-london-iceland-trip/map.html b/gallery/2014-london-iceland-trip/map.html index a76b007..070d1ee 100644 --- a/gallery/2014-london-iceland-trip/map.html +++ b/gallery/2014-london-iceland-trip/map.html @@ -1,6 +1,8 @@ --- -layout: post -title: London & Iceland Trip +layout: "gallery-map" +title: "London & Iceland Trip" +gallery_map: + latitude: 59.1116508 + longitude: -10.4266682 + zoom: 4 --- - -{% include gallery_map.html gallery='2014-london-iceland-trip' latitude=59.1116508 longitude=-10.4266682 zoom=4 %} diff --git a/gallery/2014-london-iceland-trip/slideshow.html b/gallery/2014-london-iceland-trip/slideshow.html new file mode 100644 index 0000000..c63ccc0 --- /dev/null +++ b/gallery/2014-london-iceland-trip/slideshow.html @@ -0,0 +1,4 @@ +--- +layout: "gallery-slideshow" +title: "London & Iceland Trip" +--- diff --git a/static/dev/photo-swipe/default-skin/default-skin.css b/static/dev/photo-swipe/default-skin/default-skin.css new file mode 100644 index 0000000..ee0db30 --- /dev/null +++ b/static/dev/photo-swipe/default-skin/default-skin.css @@ -0,0 +1,436 @@ +/** + * Default PhotoSwipe UI CSS file, http://photoswipe.com + * @author Dmitry Semenov + */ +.pswp__ui { + -webkit-font-smoothing: auto; + visibility: visible; + opacity: 1; + z-index: 1550; } + +.pswp__top-bar { + position: absolute; + left: 0; + top: 0; + height: 44px; + width: 100%; } + +/** + * Loading indicator, aka preloader. + * You can play with preloader is here: http://codepen.io/dimsemenov/pen/yyBWoR + */ +.pswp__preloader { + width: 44px; + height: 44px; + position: absolute; + top: 0; + left: 50%; + margin-left: -22px; + opacity: 0; + position: relative; + -webkit-transition: opacity 0.25s ease-out; + transition: opacity 0.25s ease-out; + will-change: opacity; } + +.pswp__preloader__icn { + width: 20px; + height: 20px; + margin: 12px; } + +.pswp__preloader--active { + opacity: 1; } + .pswp__preloader--active .pswp__preloader__icn { + background: url(preloader.gif) 0 0 no-repeat; } + +.pswp--css_animation .pswp__preloader--active { + opacity: 1; } + .pswp--css_animation .pswp__preloader--active .pswp__preloader__icn { + -webkit-animation: clockwise 500ms linear infinite; + animation: clockwise 500ms linear infinite; } + .pswp--css_animation .pswp__preloader--active .pswp__preloader__donut { + -webkit-animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite; + animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite; } +.pswp--css_animation .pswp__preloader__icn { + background: none; + opacity: 0.75; + width: 14px; + height: 14px; + position: absolute; + left: 15px; + top: 15px; + margin: 0; } +.pswp--css_animation .pswp__preloader__cut { + position: relative; + width: 7px; + height: 14px; + overflow: hidden; } +.pswp--css_animation .pswp__preloader__donut { + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 14px; + height: 14px; + border: 2px solid #FFF; + border-radius: 50%; + border-left-color: transparent; + border-bottom-color: transparent; + position: absolute; + top: 0; + left: 0; + background: none; + margin: 0; } + +@-webkit-keyframes clockwise { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); } + + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); } } + +@keyframes clockwise { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); } + + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); } } + +@-webkit-keyframes donut-rotate { + 0% { + -webkit-transform: rotate(0); + transform: rotate(0); } + + 50% { + -webkit-transform: rotate(-140deg); + transform: rotate(-140deg); } + + 100% { + -webkit-transform: rotate(0); + transform: rotate(0); } } + +@keyframes donut-rotate { + 0% { + -webkit-transform: rotate(0); + transform: rotate(0); } + + 50% { + -webkit-transform: rotate(-140deg); + transform: rotate(-140deg); } + + 100% { + -webkit-transform: rotate(0); + transform: rotate(0); } } + +.pswp__error-msg { + position: absolute; + left: 0; + top: 50%; + width: 100%; + text-align: center; + color: #FFF; + font-size: 14px; + line-height: 16px; + margin-top: -8px; + color: #FFF; + opacity: 0.7; } + +.pswp__error-msg a { + color: #FFF; + text-decoration: underline; } + +.pswp__button { + width: 44px; + height: 44px; + position: relative; + background: none; + cursor: pointer; + overflow: visible; + border: 0; + -webkit-appearance: none; + display: block; + outline: none; + padding: 0; + margin: 0; + float: right; + opacity: 0.75; + -webkit-transition: opacity 0.25s; + transition: opacity 0.25s; + -webkit-box-shadow: none; + box-shadow: none; } + .pswp__button:focus, .pswp__button:hover { + opacity: 1; } + .pswp__button:active { + opacity: 0.9; } + .pswp__button::-moz-focus-inner { + padding: 0; + border: 0; } + +.pswp--animated-in .pswp__button { + -webkit-transition: opacity 0.25s; + transition: opacity 0.25s; } + +.pswp__ui--over-close .pswp__button--close { + opacity: 1; } + +.pswp__button, .pswp__button--arrow--left:before, .pswp__button--arrow--right:before { + background: url(default-skin.png) 0 0 no-repeat; + background-size: 264px 88px; + width: 44px; + height: 44px; } + +@media (-webkit-min-device-pixel-ratio: 1.1), (min-resolution: 105dpi), (min-resolution: 1.1dppx) { + .pswp--svg .pswp__button, .pswp--svg .pswp__button--arrow--left:before, .pswp--svg .pswp__button--arrow--right:before { + background-image: url(default-skin.svg); } + + .pswp--svg .pswp__button--arrow--left, .pswp--svg .pswp__button--arrow--right { + background: none; } + } + +.pswp__counter, .pswp__share-modal { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } + +.pswp__share-modal { + display: block; + background: rgba(0, 0, 0, 0.5); + width: 100%; + height: 100%; + top: 0; + left: 0; + padding: 10px; + position: absolute; + z-index: 1600; + opacity: 0; + -webkit-transition: opacity 0.25s ease-out; + transition: opacity 0.25s ease-out; + will-change: opacity; + -webkit-backface-visibility: hidden; } + +.pswp__share-modal--hidden { + display: none; } + +.pswp__share-tooltip { + z-index: 1620; + position: absolute; + background: #FFF; + top: 56px; + border-radius: 2px; + display: block; + width: auto; + right: 44px; + -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); + -webkit-transform: translateY(6px); + -ms-transform: translateY(6px); + transform: translateY(6px); + -webkit-transition: -webkit-transform 0.25s; + transition: transform 0.25s; + will-change: transform; + -webkit-backface-visibility: hidden; } + .pswp__share-tooltip a { + display: block; + padding: 8px 12px; + color: #000; + text-decoration: none; + font-size: 14px; + line-height: 18px; } + .pswp__share-tooltip a:hover { + text-decoration: none; + color: #000; } + .pswp__share-tooltip a:hover:first-child { + border-radius: 2px 2px 0 0; } + .pswp__share-tooltip a:hover:last-child { + border-radius: 0 0 2px 2px; } + +.pswp__share-modal--fade-in { + opacity: 1; } + .pswp__share-modal--fade-in .pswp__share-tooltip { + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); } + +.pswp--touch .pswp__share-tooltip a { + padding: 16px 12px; } + +a.pswp__share--facebook:before { + content: ''; + display: block; + width: 0; + height: 0; + position: absolute; + top: -12px; + right: 15px; + border: 6px solid rgba(0, 0, 0, 0); + border-bottom-color: #FFF; + -webkit-pointer-events: none; + -moz-pointer-events: none; + pointer-events: none; } +a.pswp__share--facebook:hover { + background: #3E5C9A; + color: #FFF; } + a.pswp__share--facebook:hover:before { + border-bottom-color: #3E5C9A; } + +a.pswp__share--twitter:hover { + background: #55ACEE; + color: #FFF; } + +a.pswp__share--pinterest:hover { + background: #CCC; + color: #CE272D; } + +a.pswp__share--download:hover { + background: #DDD; } + +.pswp__button--close { + background-position: 0 -44px; } + +.pswp__button--share { + background-position: -44px -44px; } + +.pswp__button--fs { + display: none; } + +.pswp--supports-fs .pswp__button--fs { + display: block; } + +.pswp--fs .pswp__button--fs { + background-position: -44px 0; } + +.pswp__button--zoom { + display: none; + background-position: -88px 0; } + +.pswp--zoom-allowed .pswp__button--zoom { + display: block; } + +.pswp--zoomed-in .pswp__button--zoom { + background-position: -132px 0; } + +.pswp__button--arrow--left, .pswp__button--arrow--right { + background: none; + top: 50%; + margin-top: -50px; + width: 70px; + height: 100px; + position: absolute; } + +.pswp__top-bar, .pswp__button--arrow--left, .pswp__button--arrow--right { + -webkit-backface-visibility: hidden; + will-change: opacity; } + +.pswp--touch .pswp__button--arrow--left, .pswp--touch .pswp__button--arrow--right { + visibility: hidden; } + +.pswp__button--arrow--left { + left: 0; } + +.pswp__button--arrow--right { + right: 0; } + +.pswp__button--arrow--left:before, .pswp__button--arrow--right:before { + content: ''; + top: 35px; + background-color: rgba(0, 0, 0, 0.3); + height: 30px; + width: 32px; + position: absolute; } + +.pswp__button--arrow--left:before { + left: 6px; + background-position: -138px -44px; } + +.pswp__button--arrow--right:before { + right: 6px; + background-position: -94px -44px; } + +.pswp__counter { + position: absolute; + left: 0; + top: 0; + height: 44px; + font-size: 13px; + line-height: 44px; + color: #FFF; + opacity: 0.75; + padding: 0 10px; } + +@media screen and (max-width: 1024px) { + .pswp_scroll-wrap { + top: 0; + bottom: 0; } + + .pswp__caption { + margin-top: 0; } + + .pswp__preloader { + position: relative; + left: auto; + top: auto; + margin: 0; + float: right; } + } + +.pswp__caption { + position: absolute; + left: 0; + bottom: 0; + color: #FFF; + width: 100%; + min-height: 44px; } + .pswp__caption small { + font-size: 11px; + color: #BBB; } + +.pswp__caption__center { + text-align: left; + max-width: 420px; + margin: 0 auto; + color: #FFF; + font-size: 13px; + padding: 10px; + line-height: 20px; + color: #CCC; } + +.pswp__caption--empty { + display: none; } + +.pswp__caption--fake { + visibility: hidden; } + +.pswp__caption, .pswp__top-bar, .pswp--has_mouse .pswp__button--arrow--left, .pswp--has_mouse .pswp__button--arrow--right { + will-change: opacity; + -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); + transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); } + +.pswp--has_mouse .pswp__button--arrow--left, .pswp--has_mouse .pswp__button--arrow--right { + visibility: visible; } + +.pswp__top-bar, .pswp__caption { + background-color: rgba(0, 0, 0, 0.5); } + +.pswp__ui--fit .pswp__top-bar, .pswp__ui--fit .pswp__caption { + background-color: rgba(0, 0, 0, 0.3); } + +.pswp__ui--hidden .pswp__top-bar, .pswp__ui--hidden .pswp__caption, .pswp__ui--hidden .pswp__button--arrow--left, .pswp__ui--hidden .pswp__button--arrow--right { + opacity: 0; } + +.pswp__ui--idle .pswp__top-bar { + opacity: 0; } +.pswp__ui--idle .pswp__button--arrow--left, .pswp__ui--idle .pswp__button--arrow--right { + opacity: 0; } + +.pswp__ui--hidden .pswp__top-bar, .pswp__ui--hidden .pswp__caption, .pswp__ui--hidden .pswp__bg, .pswp__ui--hidden .pswp__button--arrow--left, .pswp__ui--hidden .pswp__button--arrow--right { + opacity: 0.001; } + +.pswp__element--disabled { + display: none !important; } + +.pswp--minimal--dark .pswp__top-bar { + background: none; } +.pswp--minimal--dark .pswp__button--arrow--left, .pswp--minimal--dark .pswp__button--arrow--right { + background: none; } diff --git a/static/dev/photo-swipe/default-skin/default-skin.png b/static/dev/photo-swipe/default-skin/default-skin.png new file mode 100644 index 0000000000000000000000000000000000000000..441c502c92fe66534f0ca07b1c639a02a9bfc6e8 GIT binary patch literal 547 zcmeAS@N?(olHy`uVBq!ia0y~yVB`R@BRE)q> zQzfg0DSPAQu=lA~!r-)AA>V`{IQs4>>BL>kcznXerunmlb=| zWcaU3Q?y({((8tixy!m+M^9AR2>U-@Q#M^%Df}$cvwDB2dmHkM!%s>?s`+*-6<*}b zC6z+Z%-w!koN!M(Vgcu$6vxWM6}@S%6da&YLklvPaws&rO=B5mA?S z`j1}n(OIHjt=UhUKbx#56!7%kz(zdN0WP!2crw3%tChOzkj<5G+?=I5j*G7gE&0rKP}eS!-QI|4{hH?XQwM7IF@KnRe$O+> z{=5>|J!M5a2Uz(xeHVC@V0bikU*S=2|Myc@XUBb*dfe5v>F)hwKM!2~;rOU>BEr>~ b?RAXa8OAS+-W5gzBcH+3)z4*}Q$iB}<;L|a literal 0 HcmV?d00001 diff --git a/static/dev/photo-swipe/default-skin/default-skin.svg b/static/dev/photo-swipe/default-skin/default-skin.svg new file mode 100644 index 0000000..9d5f0c6 --- /dev/null +++ b/static/dev/photo-swipe/default-skin/default-skin.svg @@ -0,0 +1 @@ +default-skin 2 \ No newline at end of file diff --git a/static/dev/photo-swipe/default-skin/preloader.gif b/static/dev/photo-swipe/default-skin/preloader.gif new file mode 100644 index 0000000000000000000000000000000000000000..b8faa697c58d574f24ad1295e75f0d5acd807f5e GIT binary patch literal 866 zcmZ?wbhEHb6k!ly_{_o3-rjC+Zyz2WuCA_r{`~pv+qci3KR-V||NsC04A_9;e{Mh5 zkYH!W09PYD17=2`8pWS1tn3UN3_2k7AY&a^f(1@`u68|kN2-anp`@o>g(G~Sn2@7~ zvrSHk@6L6-E23jkXGSe|W^B}1J~?m6<|idKEbm%BM24;D%DJ|N(R9l~ccCqU+Q+*; zC5ucI@C@nw^6r%q!X8EjMg}1uWMJ_VIH~Eq&?0*FO2eyaf-K)^A9_r?%$cNpd!OXZ zyRr-qE*mIV$)11C{jT81{0Z$J3}?0<))hG5vRG1UYSC0B7N*W^r@l5FO#1Xzrq1ia zTn=1T^n$F=WVos(%8F{m-NFaLj%Zde9n3X=TfxLgq!o+{fL6S;ys9S2hHAxJg$Kcb zXjU{H=yiZw!NyFa73aYLC2&=Zkpb0;Sb+zV6Va?_KDagjZUqMmkyf;Ve38j;h?fCw1rHl`E7%!y z;3-1&&(c.onTap(),d=!0);if(d){a.stopPropagation&&a.stopPropagation(),o=!0;var h=b.features.isOldAndroid?600:30;p=setTimeout(function(){o=!1},h)}},y=function(){return!a.likelyTouchDevice||a.options.mouseUsed||screen.width>1200},z=function(){return v=!v,v?(b.removeClass(i,"pswp__share-modal--fade-in"),setTimeout(function(){v&&b[(v?"add":"remove")+"Class"](i,"pswp__share-modal--hidden")},300)):(b[(v?"add":"remove")+"Class"](i,"pswp__share-modal--hidden"),setTimeout(function(){v||b.addClass(i,"pswp__share-modal--fade-in")},30)),v||B(),!1},A=function(a){a=a||window.event;var b=a.target||a.srcElement;return b.href?b.hasAttribute("download")?!0:(window.open(b.href,"pswp_share","scrollbars=yes,resizable=yes,toolbar=no,location=yes,width=550,height=420,top=100,left="+(window.screen?Math.round(screen.width/2-275):100)),v||z(),!1):!1},B=function(){for(var b,c,d="",e=0;e