Difference between revisions of "Widget:ImageCarousel"

From Hackerspace ACKspace
Jump to: navigation, search
m (running images!)
m (added picture description (WITHOUT USING THE WORD HACK OR PHREAK!!!!1111~))
Line 18: Line 18:
 
</noinclude><includeonly><!-- Slideshow container -->
 
</noinclude><includeonly><!-- Slideshow container -->
 
<div class="slideshow-container">
 
<div class="slideshow-container">
 
  <!--
 
  <div class="mySlides fade">
 
    <div class="numbertext">1 / 3</div>
 
    <img src="/w/images/thumb/e/e0/Blinking_led.jpg/1200px-Blinking_led.jpg" style="width:100%">
 
    <div class="text">Caption Text</div>
 
  </div>
 
  -->
 
  
 
   <!-- Next and previous buttons -->
 
   <!-- Next and previous buttons -->
Line 35: Line 27:
 
<!-- The dots/circles -->
 
<!-- The dots/circles -->
 
<div class="dots" style="text-align:center">
 
<div class="dots" style="text-align:center">
  <!--
 
  <span class="dot" onclick="currentSlide(1)"></span>
 
  <span class="dot" onclick="currentSlide(2)"></span>
 
  <span class="dot" onclick="currentSlide(3)"></span>
 
  -->
 
 
</div>
 
</div>
 
<script type="text/javascript">
 
<script type="text/javascript">
Line 48: Line 35:
  
 
var images = [
 
var images = [
  [ "/w/images/thumb/e/e0/Blinking_led.jpg/1200px-Blinking_led.jpg", "Caption Text" ],
+
  [ "/w/images/thumb/e/e0/Blinking_led.jpg/1200px-Blinking_led.jpg", "DSP experiments" ],
  [ "/w/images/thumb/4/4f/3D_printer_Picture.jpg/1200px-3D_printer_Picture.jpg", "Caption Two" ],
+
  [ "/w/images/thumb/4/4f/3D_printer_Picture.jpg/1200px-3D_printer_Picture.jpg", "3D printing" ],
  [ "/w/images/thumb/d/d9/L1.jpg/1200px-L1.jpg", "Caption Three" ],
+
  [ "/w/images/thumb/d/d9/L1.jpg/1200px-L1.jpg", "in the news" ],
  [ "https://ackspace.nl/w/images/thumb/a/ae/Bzzt_kit.jpeg/1196px-Bzzt_kit.jpeg", "" ],
+
  [ "/w/images/thumb/a/ae/Bzzt_kit.jpeg/1196px-Bzzt_kit.jpeg", "kits for kids" ],
  [ "https://ackspace.nl/w/images/b/b4/ACKbot.png", "" ],
+
  [ "/w/images/b/b4/ACKbot.png", "helping bots" ],
  [ "https://ackspace.nl/w/images/thumb/a/a6/Coinvox_22_keypad.jpg/1221px-Coinvox_22_keypad.jpg", "" ],
+
  [ "/w/images/thumb/a/a6/Coinvox_22_keypad.jpg/1221px-Coinvox_22_keypad.jpg", "payphone restauration" ],
  [ "https://ackspace.nl/w/images/thumb/4/4b/T-DOSE_2014_entrance_hall.jpg/1200px-T-DOSE_2014_entrance_hall.jpg", "" ],
+
  [ "/w/images/thumb/4/4b/T-DOSE_2014_entrance_hall.jpg/1200px-T-DOSE_2014_entrance_hall.jpg", "conferences" ],
  [ "https://ackspace.nl/w/images/2/25/Ledstrip2.jpg", "" ],
+
  [ "/w/images/2/25/Ledstrip2.jpg", "LEDstrip experiments" ],
  [ "https://ackspace.nl/w/images/thumb/3/32/IMG_0255.JPG/1200px-IMG_0255.JPG", "" ],
+
  [ "/w/images/thumb/3/32/IMG_0255.JPG/1200px-IMG_0255.JPG", "food" ],
  [ "https://ackspace.nl/w/images/7/75/Bbq_20140322_nom.jpg", "" ],
+
  [ "/w/images/7/75/Bbq_20140322_nom.jpg", "moar food" ],
  [ "https://ackspace.nl/w/images/thumb/1/16/Guerilla_voip_in_use.jpg/1200px-Guerilla_voip_in_use.jpg", "" ],
+
  [ "/w/images/thumb/1/16/Guerilla_voip_in_use.jpg/1200px-Guerilla_voip_in_use.jpg", "VoIP" ],
  [ "https://ackspace.nl/w/images/thumb/1/15/DL360_stack.jpg/1200px-DL360_stack.jpg", "" ],
+
  [ "/w/images/thumb/1/15/DL360_stack.jpg/1200px-DL360_stack.jpg", "virtual machine experiments" ],
  [ "https://ackspace.nl/w/images/a/ab/Open.jpg", "" ],
+
  [ "/w/images/a/ab/Open.jpg", "new car features" ],
  [ "https://ackspace.nl/w/images/thumb/1/11/Neon_workshop_29-06-2013.jpg/1205px-Neon_workshop_29-06-2013.jpg", "" ],
+
  [ "/w/images/thumb/1/11/Neon_workshop_29-06-2013.jpg/1205px-Neon_workshop_29-06-2013.jpg", "neon workshop" ],
  [ "https://ackspace.nl/w/images/thumb/b/b8/Christmastree_2016.jpg/1200px-Christmastree_2016.jpg", "" ],
+
  [ "/w/images/thumb/b/b8/Christmastree_2016.jpg/1200px-Christmastree_2016.jpg", "christmas tree pixelflut" ],
  [ "https://ackspace.nl/w/images/2/29/Infleshoningwijn.JPG", "" ],
+
  [ "/w/images/2/29/Infleshoningwijn.JPG", "food experiments" ],
  [ "https://ackspace.nl/w/images/thumb/b/b0/Open_Door_Day_November_26_2.jpg/1200px-Open_Door_Day_November_26_2.jpg", "" ],
+
  [ "/w/images/thumb/b/b0/Open_Door_Day_November_26_2.jpg/1200px-Open_Door_Day_November_26_2.jpg", "telephone monitoring" ],
  [ "https://ackspace.nl/w/images/a/ae/DigitalControlledMeter.jpg", "" ],
+
  [ "/w/images/a/ae/DigitalControlledMeter.jpg", "microcontroller experiments" ],
  [ "https://ackspace.nl/w/images/thumb/b/be/PICT0031.JPG/1200px-PICT0031.JPG", "" ],
+
  [ "/w/images/thumb/b/be/PICT0031.JPG/1200px-PICT0031.JPG", "LED displays" ],
  [ "https://ackspace.nl/w/images/b/b5/IMG_0866_wiki.JPG", "" ],
+
  [ "/w/images/b/b5/IMG_0866_wiki.JPG", "lockpicking" ],
  [ "https://ackspace.nl/w/images/thumb/1/19/FPGAscreen.jpg/1200px-FPGAscreen.jpg", "" ]
+
  [ "/w/images/thumb/1/19/FPGAscreen.jpg/1200px-FPGAscreen.jpg", "gameboy adapter" ]
 
];
 
];
  

Revision as of 14:19, 19 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
}}

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.