Difference between revisions of "Widget:ImageCarousel"

From Hackerspace ACKspace
Jump to: navigation, search
m (added picture description (WITHOUT USING THE WORD HACK OR PHREAK!!!!1111~))
(whopping custom image carousel!)
 
(7 intermediate revisions by the same user not shown)
Line 9: Line 9:
 
  <nowiki>{{#widget:</nowiki>{{PAGENAME}}<nowiki>
 
  <nowiki>{{#widget:</nowiki>{{PAGENAME}}<nowiki>
 
}}</nowiki><br/>
 
}}</nowiki><br/>
 +
 +
This will display:
 +
{{#widget:{{PAGENAME}}
 +
|img.DSP experiments={{filepath:blinking_led.jpg}}
 +
|img.3D printing={{filepath:3D_printer_Picture.jpg}}
 +
}}
  
 
'''Note:'''
 
'''Note:'''
 
* this is a work in progress
 
* this is a work in progress
 +
  
 
== Copy to your site ==
 
== Copy to your site ==
Line 32: Line 39:
 
{
 
{
 
     "use strict";
 
     "use strict";
 
  
 
var images = [
 
var images = [
[ "/w/images/thumb/e/e0/Blinking_led.jpg/1200px-Blinking_led.jpg", "DSP experiments" ],
+
<!--{foreach from=$img key=desc item=link}-->
[ "/w/images/thumb/4/4f/3D_printer_Picture.jpg/1200px-3D_printer_Picture.jpg", "3D printing" ],
+
    [ "<!--{$link|validate:url}-->", "<!--{$desc|escape:'html'}-->" ],
[ "/w/images/thumb/d/d9/L1.jpg/1200px-L1.jpg", "in the news" ],
+
<!--{/foreach}-->
[ "/w/images/thumb/a/ae/Bzzt_kit.jpeg/1196px-Bzzt_kit.jpeg", "kits for kids" ],
 
[ "/w/images/b/b4/ACKbot.png", "helping bots" ],
 
[ "/w/images/thumb/a/a6/Coinvox_22_keypad.jpg/1221px-Coinvox_22_keypad.jpg", "payphone restauration" ],
 
[ "/w/images/thumb/4/4b/T-DOSE_2014_entrance_hall.jpg/1200px-T-DOSE_2014_entrance_hall.jpg", "conferences" ],
 
[ "/w/images/2/25/Ledstrip2.jpg", "LEDstrip experiments" ],
 
[ "/w/images/thumb/3/32/IMG_0255.JPG/1200px-IMG_0255.JPG", "food" ],
 
[ "/w/images/7/75/Bbq_20140322_nom.jpg", "moar food" ],
 
[ "/w/images/thumb/1/16/Guerilla_voip_in_use.jpg/1200px-Guerilla_voip_in_use.jpg", "VoIP" ],
 
[ "/w/images/thumb/1/15/DL360_stack.jpg/1200px-DL360_stack.jpg", "virtual machine experiments" ],
 
[ "/w/images/a/ab/Open.jpg", "new car features" ],
 
[ "/w/images/thumb/1/11/Neon_workshop_29-06-2013.jpg/1205px-Neon_workshop_29-06-2013.jpg", "neon workshop" ],
 
[ "/w/images/thumb/b/b8/Christmastree_2016.jpg/1200px-Christmastree_2016.jpg", "christmas tree pixelflut" ],
 
[ "/w/images/2/29/Infleshoningwijn.JPG", "food experiments" ],
 
[ "/w/images/thumb/b/b0/Open_Door_Day_November_26_2.jpg/1200px-Open_Door_Day_November_26_2.jpg", "telephone monitoring" ],
 
[ "/w/images/a/ae/DigitalControlledMeter.jpg", "microcontroller experiments" ],
 
[ "/w/images/thumb/b/be/PICT0031.JPG/1200px-PICT0031.JPG", "LED displays" ],
 
[ "/w/images/b/b5/IMG_0866_wiki.JPG", "lockpicking" ],
 
[ "/w/images/thumb/1/19/FPGAscreen.jpg/1200px-FPGAscreen.jpg", "gameboy adapter" ]
 
 
];
 
];
 
  
 
var container = document.getElementsByClassName("slideshow-container")[0];
 
var container = document.getElementsByClassName("slideshow-container")[0];

Latest revision as of 16:43, 21 March 2019

This widget allows you to display an image carousel on your wiki page.

Created by xopr, inspired by W3schools example

Using this widget

To insert this widget, use the following code:

{{#widget:ImageCarousel
}}

This will display:


Note:

  • this is a work in progress


Copy to your site

To use this widget on your site, just install MediaWiki Widgets extension and copy full source code of this page to your wiki as Widget:ImageCarousel article.