Difference between revisions of "Widget:Flickr"
Jump to navigation
Jump to search
Line 45: | Line 45: | ||
<!--{if $nanoGalleryDivId == 1}--> | <!--{if $nanoGalleryDivId == 1}--> | ||
<link href="https://cdnjs.cloudflare.com/ajax/libs/nanogallery/4.4.2/css/nanogallery.css" rel="stylesheet" type="text/css"> | <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" | + | <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/nanogallery/4.4.2/jquery.nanogallery.min.js"></script> |
<!--{/if}--> | <!--{/if}--> | ||
<div id="nanoGallery<!--{$nanoGalleryDivId|escape:'html'}-->"></div> | <div id="nanoGallery<!--{$nanoGalleryDivId|escape:'html'}-->"></div> | ||
− | <script type="text/javascript" defer | + | <script type="text/javascript"> |
− | $(document).ready(function () { | + | // DEFER LOADING SCRIPT UNTIL JQUERY IS READY. WAIT 40MS BETWEEN ATTEMPTS. |
− | + | function defer(method) { | |
− | + | if (window.jQuery) { | |
− | + | method(); | |
− | + | } else { | |
− | + | setTimeout(function() { defer(method) }, 40); | |
− | + | } | |
− | + | } | |
− | + | ||
− | + | defer(function () { | |
− | + | $(document).ready(function () { | |
− | + | $("#nanoGallery<!--{$nanoGalleryDivId|escape:'quotes'}-->").nanoGallery({ | |
− | + | kind:'flickr', | |
+ | 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'}-->' | ||
+ | }); | ||
}); | }); | ||
}); | }); |
Revision as of 02:33, 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
andlightBackground
. Default:none
- colorSchemeViewer
- Image viewer colour scheme. Possible values:
none
,dark
,darkRed
,darkGreen
,darkBlue
,darkOrange
,light
. Default:none
Example