Difference between revisions of "Widget:Flickr"

Latest revision as of 02:46, 15 March 2021

Documentation

This widget embeds a gallery of images from flickr into a wiki page. It uses the nanoGALLERY image gallery.

nanoGALLERY github - Latest version 5.10.3 (we use 4.4.2 see talkpage)
nanogallery 4.4.2 library link
nanogallery2 - Version 2 also available

Using this widget

You can insert a gallery with the following wiki code:

{{#widget:Flickr|photoset=72157626706422487}}

{{#widget:Flickr|userId=49386198@N04}}

Parameters

userId: Flickr user id - to display all albums for the specified user. You can find the appropriate value using idgettr.com.

photoset: Flickr photoset id - to display only the specified photoset, this takes precedence over the userId. You can find the appropriate value using idgettr.com.

thumbnailHeight: Thumbnails height in pixels. Default: 154

thumbnailWidth: Thumbnails width in pixels. Default: 300

colorScheme: Gallery colour scheme (breadcrumb and thumbnails). Possible values: none, dark, darkRed, darkGreen, darkBlue, darkOrange, light and lightBackground. Default: none

colorSchemeViewer: Image viewer colour scheme. Possible values: none, dark, darkRed, darkGreen, darkBlue, darkOrange, light. Default: none

Example

@@ Line 45: / Line 45: @@
    <!--{if $nanoGalleryDivId == 1}-->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/nanogallery/4.4.2/css/nanogallery.css" rel="stylesheet" type="text/css">
-   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/nanogallery/4.4.2/jquery.nanogallery.min.js" defer></script>
+   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/nanogallery/4.4.2/jquery.nanogallery.min.js"></script>
    <!--{/if}-->
    <div id="nanoGallery<!--{$nanoGalleryDivId|escape:'html'}-->"></div>
    <script type="text/javascript">
-     // DEFER LOADING SCRIPT UNTIL JQUERY IS READY. WAIT 40MS BETWEEN ATTEMPTS.
+     $(document).ready(function () {
-    function defer(method) {
+      $("#nanoGallery<!--{$nanoGalleryDivId|escape:'quotes'}-->").nanoGallery({
-        if (window.jQuery) {
+        kind:'flickr',
-            method();
+        photoset:'<!--{$photoset|escape:'quotes'}-->',
-        } else {
+        userID:'<!--{$userId|escape:'quotes'}-->',
-            setTimeout(function() { defer(method) }, 40);
+        thumbnailHeight:'<!--{$thumbnailHeight|escape:'quotes'|default:154}-->',
-        }
+        thumbnailWidth:'<!--{$thumbnailWidth|escape:'quotes'|default:230}-->',
-    }
+        thumbnailHoverEffect:'labelSlideUp,borderLighter',
+        paginationMaxLinesPerPage:1,
-    defer(function () {
+        thumbnailLabel:{display:true,align:'center'},
-      $(document).ready(function () {
+        theme:'default',
-        $("#nanoGallery<!--{$nanoGalleryDivId|escape:'quotes'}-->").nanoGallery({
+        colorScheme: '<!--{$colorScheme|escape:'quotes'|default:'none'}-->',
-          kind:'flickr',
+        colorSchemeViewer: '<!--{$colorSchemeViewer|escape:'quotes'|default:'none'}-->'
-          photoset:'<!--{$photoset|escape:'quotes'}-->',
-          userID:'<!--{$userId|escape:'quotes'}-->',
-          thumbnailHeight:'<!--{$thumbnailHeight|escape:'quotes'|default:154}-->',
-          thumbnailWidth:'<!--{$thumbnailWidth|escape:'quotes'|default:230}-->',
-          thumbnailHoverEffect:'labelSlideUp,borderLighter',
-          paginationMaxLinesPerPage:1,
-          thumbnailLabel:{display:true,align:'center'},
-          theme:'default',
-          colorScheme: '<!--{$colorScheme|escape:'quotes'|default:'none'}-->',
-          colorSchemeViewer: '<!--{$colorSchemeViewer|escape:'quotes'|default:'none'}-->'
-        });
        });
      });

Difference between revisions of "Widget:Flickr"

Latest revision as of 02:46, 15 March 2021

Contents

Documentation

Using this widget

Parameters

Example

Navigation menu

Search