Difference between revisions of "Widget:ImageCarousel"

From Hackerspace ACKspace
Jump to: navigation, search
m (added class for triggering correct box model)
m (scripted version of carousel image list)
Line 19: Line 19:
 
<div class="slideshow-container">
 
<div class="slideshow-container">
  
   <!-- Full-width images with number and caption text -->
+
   <!--
 
   <div class="mySlides fade">
 
   <div class="mySlides fade">
 
     <div class="numbertext">1 / 3</div>
 
     <div class="numbertext">1 / 3</div>
Line 25: Line 25:
 
     <div class="text">Caption Text</div>
 
     <div class="text">Caption Text</div>
 
   </div>
 
   </div>
 
+
   -->
   <div class="mySlides fade">
 
    <div class="numbertext">2 / 3</div>
 
    <img src="/w/images/thumb/4/4f/3D_printer_Picture.jpg/1200px-3D_printer_Picture.jpg" style="width:100%">
 
    <div class="text">Caption Two</div>
 
  </div>
 
 
 
  <div class="mySlides fade">
 
    <div class="numbertext">3 / 3</div>
 
    <img src="/w/images/thumb/d/d9/L1.jpg/1200px-L1.jpg" style="width:100%">
 
    <div class="text">Caption Three</div>
 
  </div>
 
  
 
   <!-- Next and previous buttons -->
 
   <!-- Next and previous buttons -->
Line 46: Line 35:
 
<!-- 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(1)"></span>  
 
   <span class="dot" onclick="currentSlide(2)"></span>  
 
   <span class="dot" onclick="currentSlide(2)"></span>  
 
   <span class="dot" onclick="currentSlide(3)"></span>  
 
   <span class="dot" onclick="currentSlide(3)"></span>  
 +
  -->
 
</div>
 
</div>
 
<script type="text/javascript">
 
<script type="text/javascript">
Line 54: Line 45:
 
{
 
{
 
     "use strict";
 
     "use strict";
 +
 +
 +
var images = [
 +
[ "/w/images/thumb/e/e0/Blinking_led.jpg/1200px-Blinking_led.jpg", "Caption Text" ],
 +
[ "/w/images/thumb/4/4f/3D_printer_Picture.jpg/1200px-3D_printer_Picture.jpg", "Caption Two" ],
 +
[ "/w/images/thumb/d/d9/L1.jpg/1200px-L1.jpg", "Caption Three" ],
 +
[ "https://ackspace.nl/w/images/thumb/a/ae/Bzzt_kit.jpeg/1196px-Bzzt_kit.jpeg", "" ],
 +
[ "https://ackspace.nl/w/images/b/b4/ACKbot.png", "" ],
 +
[ "https://ackspace.nl/w/images/thumb/a/a6/Coinvox_22_keypad.jpg/1221px-Coinvox_22_keypad.jpg", "" ],
 +
[ "https://ackspace.nl/w/images/thumb/4/4b/T-DOSE_2014_entrance_hall.jpg/1200px-T-DOSE_2014_entrance_hall.jpg", "" ],
 +
[ "https://ackspace.nl/w/images/2/25/Ledstrip2.jpg", "" ],
 +
[ "https://ackspace.nl/w/images/thumb/3/32/IMG_0255.JPG/1200px-IMG_0255.JPG", "" ],
 +
[ "https://ackspace.nl/w/images/7/75/Bbq_20140322_nom.jpg", "" ],
 +
[ "https://ackspace.nl/w/images/thumb/1/16/Guerilla_voip_in_use.jpg/1200px-Guerilla_voip_in_use.jpg", "" ],
 +
[ "https://ackspace.nl/w/images/thumb/1/15/DL360_stack.jpg/1200px-DL360_stack.jpg", "" ],
 +
[ "https://ackspace.nl/w/images/a/ab/Open.jpg", "" ],
 +
[ "https://ackspace.nl/w/images/thumb/1/11/Neon_workshop_29-06-2013.jpg/1205px-Neon_workshop_29-06-2013.jpg", "" ],
 +
[ "https://ackspace.nl/w/images/thumb/b/b8/Christmastree_2016.jpg/1200px-Christmastree_2016.jpg", "" ],
 +
[ "https://ackspace.nl/w/images/2/29/Infleshoningwijn.JPG", "" ],
 +
[ "https://ackspace.nl/w/images/thumb/b/b0/Open_Door_Day_November_26_2.jpg/1200px-Open_Door_Day_November_26_2.jpg", "" ],
 +
[ "https://ackspace.nl/w/images/a/ae/DigitalControlledMeter.jpg", "" ],
 +
[ "https://ackspace.nl/w/images/thumb/b/be/PICT0031.JPG/1200px-PICT0031.JPG", "" ],
 +
[ "https://ackspace.nl/w/images/b/b5/IMG_0866_wiki.JPG", "" ],
 +
[ "https://ackspace.nl/w/images/thumb/1/19/FPGAscreen.jpg/1200px-FPGAscreen.jpg", "" ]
 +
];
 +
 +
 +
var container = document.getElementsByClassName("slideshow-container")[0];
 +
var dots = document.getElementsByClassName("dots")[0];
 +
var count = images.length;
 +
 +
images.forEach( function( _img, _n )
 +
{
 +
  var slide = document.createElement("div");
 +
  slide.className = "mySlides fade";
 +
  slide.innerHTML = '<div class="numbertext">'+(_n+1)+' / '+count+'</div><img src="'+_img[0]+'" style="width:100%"><div class="text">+_img[1]+</div>';
 +
  container.insertBefore( slide,container.childNodes[0]);
 +
 +
  var dot = document.createElement("span");
 +
  dot.className = "dot";
 +
  dot.addEventListener("click", currentSlide.bind(this,_n+1));
 +
 +
  dots.appendChild( dot );
 +
 +
} );
 +
 
var slideIndex = 1;
 
var slideIndex = 1;
 
showSlides(slideIndex);
 
showSlides(slideIndex);

Revision as of 11:44, 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.