Difference between revisions of "Widget:ImageCarousel"
m (first real set of pictures (optimize later)) |
(whopping custom image carousel!) |
||
| (13 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 18: | Line 25: | ||
</noinclude><includeonly><!-- Slideshow container --> | </noinclude><includeonly><!-- Slideshow container --> | ||
<div class="slideshow-container"> | <div class="slideshow-container"> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
<!-- Next and previous buttons --> | <!-- Next and previous buttons --> | ||
| Line 45: | Line 33: | ||
<!-- The dots/circles --> | <!-- The dots/circles --> | ||
| − | <div style="text-align:center" | + | <div class="dots" style="text-align:center"> |
| − | |||
| − | |||
| − | |||
</div> | </div> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
| Line 54: | Line 39: | ||
{ | { | ||
"use strict"; | "use strict"; | ||
| + | |||
| + | var images = [ | ||
| + | <!--{foreach from=$img key=desc item=link}--> | ||
| + | [ "<!--{$link|validate:url}-->", "<!--{$desc|escape:'html'}-->" ], | ||
| + | <!--{/foreach}--> | ||
| + | ]; | ||
| + | |||
| + | var container = document.getElementsByClassName("slideshow-container")[0]; | ||
| + | var dots = document.getElementsByClassName("dots")[0]; | ||
| + | var count = images.length; | ||
| + | |||
| + | // Reverse array since we're injecting the items in the front | ||
| + | images.reverse().forEach( function( _img, _n ) | ||
| + | { | ||
| + | var slide = document.createElement("div"); | ||
| + | slide.className = "mySlides fade"; | ||
| + | slide.innerHTML = '<div class="numbertext">'+(count-_n)+' / '+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); | ||
| Line 83: | Line 95: | ||
} | } | ||
| − | + | setInterval( plusSlides.bind( this, 1 ), 5000); | |
| + | // Expose functions | ||
| + | window.plusSlides = plusSlides; | ||
| + | window.currentSlide = currentSlide; | ||
}( )); | }( )); | ||
</script> | </script> | ||
</includeonly> | </includeonly> | ||
Latest revision as of 17: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.
