Update Fancybox to version 3

website/partners/static/partners/js/main.js

 $(function () {
     $(".partner-image-card a").fancybox({
-        helpers: {
-            title: {
-                type: 'float'
-            }
-        },
-		padding: 0,
-        tpl: {
-		    closeBtn: '<a title="Close" class="btn btn-primary fancybox-close" href="javascript:;"><i class="fas fa-times"></i></a>',
-            next: '<a title="Next" class="fancybox-nav fancybox-next" href="javascript:;"><span class="btn btn-primary"><i class="fas fa-arrow-right"></i></span></a>',
-            prev: '<a title="Previous" class="fancybox-nav fancybox-prev" href="javascript:;"><span class="btn btn-primary"><i class="fas fa-arrow-left"></i></span></a>'
-        }
+        buttons: [
+            "thumbs",
+            "close"
+        ],
     });
 
     var windowhash = window.location.hash;

website/partners/templatetags/partner_cards.py

@@ -36,7 +36,7 @@ def partner_image_card(image):
         url=thumbnail(image, settings.THUMBNAIL_SIZES['large'], fit=False),
         image_url=image_url,
         class_name=class_name,
-        anchor_attrs='rel="gallery"'
+        anchor_attrs='data-fancybox="gallery"'
     )
 
 

website/photos/static/photos/js/main.js

-$(function() {
-   $(".photo-card a").fancybox({
-		helpers: {
-			title : {
-				type : 'float'
-			}
-		},
-		afterShow: function() {
-			var downloadUrl = $(this.element).attr('data-download');
-			if(downloadUrl !== undefined) {
-				$('<a class="btn btn-primary fancybox-download" href="' + downloadUrl + '"><i class="fas fa-download"></i></a>').appendTo(this.outer);
-			}
-		},
-		padding: 0,
-        tpl: {
-		    closeBtn: '<a title="Close" class="btn btn-primary fancybox-close" href="javascript:;"><i class="fas fa-times"></i></a>',
-            next: '<a title="Next" class="fancybox-nav fancybox-next" href="javascript:;"><span class="btn btn-primary"><i class="fas fa-arrow-right"></i></span></a>',
-            prev: '<a title="Previous" class="fancybox-nav fancybox-prev" href="javascript:;"><span class="btn btn-primary"><i class="fas fa-arrow-left"></i></span></a>'
+$(function () {
+    $(".photo-card a").fancybox({
+        buttons: [
+            "download",
+            "thumbs",
+            "close"
+        ],
+        afterShow: function(instance, current) {
+            $(instance.$refs.container)
+              .find("[data-fancybox-download]")
+              .attr("href", current.opts.download);
         }
-	});
+    });
 });

website/photos/templatetags/photos_cards.py

@@ -36,8 +36,8 @@ def album_card(album):
 @register.inclusion_tag('includes/grid_item.html')
 def photo_card(photo):
     class_name = 'photo-card rotate{}'.format(photo.rotation)
-    anchor_attrs = 'data-fancybox-rotation="{}" rel="gallery"'.format(
-        photo.rotation)
+    anchor_attrs = (f'data-fancybox-rotation="{photo.rotation}" '
+                    f'data-fancybox="gallery"')
 
     if photo.album.shareable:
         anchor_attrs += ' data-download={}'.format(

website/thabloid/static/thabloid/js/main.js

@@ -7,23 +7,19 @@ $(function () {
 
     $('#thabloid-index .thabloid-card .btn.open').click(function (e) {
         e.preventDefault();
+        var downloadLink = $(this).next('.download').attr('href');
         $.ajax(this.href).done(function (data) {
-            $.fancybox(data,
+            $.fancybox.open(data,
                 {
-                    padding: 0,
-                    tpl: {
-                        closeBtn: '<a title="Close" class="btn btn-secondary fancybox-close" href="javascript:;"><i class="fas fa-times"></i></a>',
-                        next: '<a title="Next" class="fancybox-nav fancybox-next" href="javascript:;"><span class="btn btn-secondary"><i class="fas fa-arrow-right"></i></span></a>',
-                        prev: '<a title="Previous" class="fancybox-nav fancybox-prev" href="javascript:;"><span class="btn btn-secondary"><i class="fas fa-arrow-left"></i></span></a>'
-                    },
-                    loop: false,
-                    openEffect: 'elastic',
-                    closeEffect: 'elastic',
-                    helpers: {
-                        overlay: {
-                            css: {'background-color': 'rgba(0, 0, 0, 0.9)'},
-                            locked: true
-                        }
+                    buttons: [
+                        "download",
+                        "thumbs",
+                        "close"
+                    ],
+                    afterShow: function (instance, current) {
+                        $(instance.$refs.container)
+                            .find("[data-fancybox-download]")
+                            .attr("href", downloadLink);
                     }
                 });
         });

website/thabloid/templatetags/thabloid_cards.py

@@ -32,5 +32,5 @@ def thabloid_card(year, thabloid):
         meta_text=buttons,
         url=None,
         image_url=thumbnail(thabloid.cover, '255x360'),
-        class_name='thabloid-card mix {}'.format(class_name),
+        class_name=f'thabloid-card mix {class_name}',
     )

website/thabloid/views.py

@@ -15,5 +15,6 @@ def index(request):
 
 def pages(request, year, issue):
     thabloid = get_object_or_404(Thabloid, year=int(year), issue=int(issue))
-    pages = ['{}{}'.format(settings.MEDIA_URL, p) for p in thabloid.pages]
+    pages = [{'src': '{}{}'.format(settings.MEDIA_URL, p)} for p in
+             thabloid.pages]
     return JsonResponse(pages, safe=False)

website/thaliawebsite/locale/nl/LC_MESSAGES/django.po

@@ -7,7 +7,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: \n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2018-11-07 20:47+0100\n"
+"POT-Creation-Date: 2018-11-11 19:17+0100\n"
 "PO-Revision-Date: 2018-11-07 20:51+0100\n"
 "Last-Translator: Sébastiaan Versteeg <se_bastiaan@outlook.com>\n"
 "Language-Team: \n"
@@ -1131,8 +1131,8 @@ msgid ""
 "\">here</a>."
 msgstr ""
 "Templates voor presentaties vind je <a href=\"https://drive.google.com/drive/"
-"folders/1CL4eVSqlvYcqP_u99y6mgGJpqWWG_q7Z\">hier</a> voor PowerPoint, Keynote "
-"en LibreOffice."
+"folders/1CL4eVSqlvYcqP_u99y6mgGJpqWWG_q7Z\">hier</a> voor PowerPoint, "
+"Keynote en LibreOffice."
 
 #: templates/singlepages/styleguide.html
 msgid "Posters & Banners"
@@ -1175,10 +1175,11 @@ msgid ""
 "\">media@thalia.nu</a> to get yourself a sleek poster for your event."
 msgstr ""
 "Je kunt de templates <a href=\"https://drive.google.com/drive/"
-"folders/1oPxLJ20AURaLjgYNSMuf9I-LarSQWjzC\">hier</a> vinden. Het is echter in "
-"principe de taak van de Mediacommissie om deze posters & banners te maken. "
-"Je kunt dus altijd een mailtje sturen naar <a href=\"mailto:media@thalia.nu"
-"\">media@thalia.nu</a> voor een strakke afbeelding bij je evenement."
+"folders/1oPxLJ20AURaLjgYNSMuf9I-LarSQWjzC\">hier</a> vinden. Het is echter "
+"in principe de taak van de Mediacommissie om deze posters & banners te "
+"maken. Je kunt dus altijd een mailtje sturen naar <a href=\"mailto:"
+"media@thalia.nu\">media@thalia.nu</a> voor een strakke afbeelding bij je "
+"evenement."
 
 #: templates/singlepages/styleguide.html
 msgid ""
@@ -1267,8 +1268,8 @@ msgid ""
 msgstr ""
 "Op de website gebruiken we een ander lettertype voor de kopteksten en het "
 "menu. Dit omdat we geen licentie hebben om Gill Sans MT Condensed online te "
-"gebruiken. Dat lettertype is ‘Oswald’. Het is open-source en <a "
-"href=\"https://github.com/googlefonts/OswaldFont\">hier</a> te downloaden."
+"gebruiken. Dat lettertype is ‘Oswald’. Het is open-source en <a href="
+"\"https://github.com/googlefonts/OswaldFont\">hier</a> te downloaden."
 
 #: templates/singlepages/styleguide.html
 msgid "Downloads"

website/thaliawebsite/locale/nl/LC_MESSAGES/djangojs.po

+# SOME DESCRIPTIVE TITLE.
+# Copyright (C) YEAR THE PACKAGE'S COPYRIGHT HOLDER
+# This file is distributed under the same license as the PACKAGE package.
+# FIRST AUTHOR <EMAIL@ADDRESS>, YEAR.
+#
+msgid ""
+msgstr ""
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2018-11-11 19:18+0100\n"
+"PO-Revision-Date: 2018-11-11 19:19+0100\n"
+"Language: nl\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+"Last-Translator: \n"
+"Language-Team: \n"
+"X-Generator: Poedit 2.2\n"
+
+#: static/js/main.js
+msgid "Close"
+msgstr "Sluiten"
+
+#: static/js/main.js
+msgid "Next"
+msgstr "Volgende"
+
+#: static/js/main.js
+msgid "Previous"
+msgstr "Vorige"
+
+#: static/js/main.js
+msgid "The requested content cannot be loaded. <br/> Please try again later."
+msgstr "De opgevraagde inhoud kon niet worden geladen <br/> Probeer het later nog eens."
+
+#: static/js/main.js
+msgid "Start slideshow"
+msgstr "Start slideshow"
+
+#: static/js/main.js
+msgid "Pause slideshow"
+msgstr "Pauzeer slideshow"
+
+#: static/js/main.js
+msgid "Full screen"
+msgstr "Volledig scherm"
+
+#: static/js/main.js
+msgid "Thumbnails"
+msgstr "Thumbnails"
+
+#: static/js/main.js
+msgid "Download"
+msgstr "Download"
+
+#: static/js/main.js
+msgid "Share"
+msgstr "Delen"
+
+#: static/js/main.js
+msgid "Zoom"
+msgstr "Zoom"

website/thaliawebsite/static/js/main.js

 $(function () {
     $('[data-toggle="tooltip"]').tooltip();
 
-    $("#language-switcher").click(function(e) {
+    $("#language-switcher").click(function (e) {
         e.preventDefault();
         $("#change-language-form").submit();
         return false;
     });
 });
+
+$.fancybox.defaults.btnTpl.close = '<a title="{{CLOSE}}" class="fancybox-button fancybox-button--close" data-fancybox-close href="javascript:;"><i class="fas fa-times"></i></a>';
+$.fancybox.defaults.btnTpl.arrowRight = '<a title="{{NEXT}}" class="fancybox-button fancybox-button--arrow_right" data-fancybox-next href="javascript:;"><i class="fas fa-arrow-right"></i></a>';
+$.fancybox.defaults.btnTpl.arrowLeft = '<a title="{{PREV}}" class="fancybox-button fancybox-button--arrow_left" data-fancybox-prev href="javascript:;"><i class="fas fa-arrow-left"></i></a>';
+$.fancybox.defaults.btnTpl.thumbs = '<a title="{{THUMBS}}" class="fancybox-button fancybox-button--thumbs" data-fancybox-thumbs href="javascript:;"><i class="fas fa-th"></i></a>';
+$.fancybox.defaults.btnTpl.download = '<a title="{{DOWNLOAD}}" class="fancybox-button fancybox-button--download" data-fancybox-download href="javascript:;"><i class="fas fa-download"></i></a>';
+$.fancybox.defaults.i18n.django = {
+    CLOSE: gettext('Close'),
+    NEXT: gettext('Next'),
+    PREV: gettext('Previous'),
+    ERROR: gettext('The requested content cannot be loaded. <br/> Please try again later.'),
+    PLAY_START: gettext("Start slideshow"),
+    PLAY_STOP: gettext("Pause slideshow"),
+    FULL_SCREEN: gettext("Full screen"),
+    THUMBS: gettext("Thumbnails"),
+    DOWNLOAD: gettext("Download"),
+    SHARE: gettext("Share"),
+    ZOOM: gettext("Zoom")
+};
+$.fancybox.defaults.lang = 'django';

website/thaliawebsite/templates/base.html

@@ -185,7 +185,7 @@
         <script type="text/javascript"
                 src="{% static "js/bootstrap.bundle.min.js" %}"></script>
         <script type="text/javascript"
-                src="{% static "js/jquery.fancybox.js" %}"></script>
+                src="{% static "js/jquery.fancybox.min.js" %}"></script>
         <script type="text/javascript"
                 src="{% static "js/main.js" %}"></script>
         <script type="text/javascript"