Difference between revisions of "Widget:Flickr"

From Nottinghack Wiki
Jump to navigation Jump to search
(put code back at bottom)
Line 1: Line 1:
<includeonly>
 
  <!-- nanoGALLERY code starts here -->
 
  <!--{counter name="nanoGalleryDivId" assign="nanoGalleryDivId"}-->
 
  <!--{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"></script>
 
  <!--{/if}-->
 
  <div id="nanoGallery<!--{$nanoGalleryDivId|escape:'html'}-->"></div>
 
  
  <script type="text/javascript">
 
    $(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'}-->'
 
      });
 
    });
 
  </script>
 
  <!-- nanoGALLERY code ends here -->
 
</includeonly>
 
 
<noinclude>
 
<noinclude>
 
==Documentation==
 
==Documentation==
Line 67: Line 40:
 
[[Category:Widget]]
 
[[Category:Widget]]
 
</noinclude>
 
</noinclude>
 +
<includeonly>
 +
  <!-- nanoGALLERY code starts here -->
 +
  <!--{counter name="nanoGalleryDivId" assign="nanoGalleryDivId"}-->
 +
  <!--{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"></script>
 +
  <!--{/if}-->
 +
  <div id="nanoGallery<!--{$nanoGalleryDivId|escape:'html'}-->"></div>
 +
 +
  <script type="text/javascript">
 +
    $(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'}-->'
 +
      });
 +
    });
 +
  </script>
 +
  <!-- nanoGALLERY code ends here -->
 +
</includeonly>

Revision as of 16:17, 11 December 2019


Documentation

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

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