diff options
Diffstat (limited to 'ihatemoney/templates/showcase.html')
| -rw-r--r-- | ihatemoney/templates/showcase.html | 67 |
1 files changed, 67 insertions, 0 deletions
diff --git a/ihatemoney/templates/showcase.html b/ihatemoney/templates/showcase.html new file mode 100644 index 0000000..cd9a371 --- /dev/null +++ b/ihatemoney/templates/showcase.html @@ -0,0 +1,67 @@ +<div id="pswp" class="hiddenpswp" tabindex="-1" role="dialog" aria-hidden="true"> + <div class="pswp__bg"></div> + <div class="pswp__scroll-wrap"> + <div class="pswp__container"> + <div class="pswp__item"></div> + <div class="pswp__item"></div> + <div class="pswp__item"></div> + </div> + <div class="pswp__ui pswp__ui--hidden"> + <div class="pswp__top-bar"> + <div class="pswp__counter"></div> + <button class="pswp__button pswp__button--close" title="Fermer (Esc)"></button> + <div class="pswp__preloader"> + <div class="pswp__preloader__icn"> + <div class="pswp__preloader__cut"> + <div class="pswp__preloader__donut"></div> + </div> + </div> + </div> + </div> + + <button class="pswp__button pswp__button--arrow--left" title="Suivant (flèche droite)"> + </button> + + <button class="pswp__button pswp__button--arrow--right" title="Précédent (flèche gauche)"> + </button> + + <div class="pswp__caption"> + <div class="pswp__caption__center"></div> + </div> + </div> + </div> +</div> +<script type="text/javascript"> +var pswpElement = document.getElementById('pswp'); +var items = JSON.parse('[{"h": 2450, "src": "/static/showcase/1.jpg", "w": 2450}, {"h": 2509, "src": "/static/showcase/2.jpg", "w": 2221}, {"h": 2536, "src": "/static/showcase/3.jpg", "w": 2101}, {"h": 2722, "src": "/static/showcase/4.jpg", "w": 2348}, {"h": 2745, "src": "/static/showcase/5.jpg", "w": 1804}, {"h": 3307, "src": "/static/showcase/6.jpg", "w": 2897}, {"h": 2321, "src": "/static/showcase/7.jpg", "w": 2239}, {"h": 2470, "src": "/static/showcase/8.jpg", "w": 2419}, {"h": 3307, "src": "/static/showcase/9.jpg", "w": 2602}]'); +var options = { + index: 0, + loop: false, +}; + +function showGallery(){ + + /* the CSS and JS for photoswipe is loaded dynamically + * so that they are not loaded if the gallery is not open */ + + $('head').append('<link rel="stylesheet" type="text/css" href="{{ url_for("static", filename="photoswipe/default-skin/default-skin.css") }}">'); + $('head').append('<link rel="stylesheet" type="text/css" href="{{ url_for("static", filename="photoswipe/photoswipe.css") }}">'); + + var script = document.createElement("script"); + script.type = "text/javascript"; + script.src = "{{ url_for('static', filename='photoswipe/photoswipe.min.js')}}"; + script.onload = function(){ + var script2 = document.createElement("script"); + script2.type = "text/javascript"; + script2.src = "{{ url_for('static', filename='photoswipe/photoswipe-ui-default.min.js')}}"; + script2.onload = function(){ + pswpElement.className="pswp"; + var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options); + gallery.init(); + }; + document.body.appendChild(script2); + }; + document.body.appendChild(script); +} + +</script> |
