Widget:Slideshow: Difference between revisions
From CSDMS
No edit summary |
No edit summary |
||
(13 intermediate revisions by the same user not shown) | |||
Line 4: | Line 4: | ||
Dependencies: | Dependencies: | ||
<pre> | <pre> | ||
/ | /csdms_wiki/skins/csdmsskin_new/jquery-slideshow/js/jquery-slideshow.min.js | ||
</pre> | </pre> | ||
Line 14: | Line 14: | ||
For example: | For example: | ||
<pre> | <pre> | ||
<div class="slideshow"> | <div class="slideshow-wrapper"> | ||
[[File:Votingfrontpage.jpg]] | [[File:Votingfrontpage.jpg]] | ||
[[File:Frontpage_meeting_madeby_TEDxBoulder.jpg]] | [[File:Frontpage_meeting_madeby_TEDxBoulder.jpg]] | ||
Line 20: | Line 20: | ||
</div> | </div> | ||
{{#Widget:Slideshow | {{#Widget:Slideshow | ||
|width= | |width=680 | ||
|height= | |height=320 | ||
}} | }} | ||
</pre> | </pre> | ||
<div | <div id="slideshow-wrapper"> | ||
[[File:Votingfrontpage.jpg | [[File:Votingfrontpage.jpg]] | ||
[[File:Frontpage_meeting_madeby_TEDxBoulder.jpg | [[File:Frontpage_meeting_madeby_TEDxBoulder.jpg]] | ||
[[File:SummerInstitute2011frontpage.jpg | [[File:SummerInstitute2011frontpage.jpg]] | ||
{{#Widget:Slideshow | {{#Widget:Slideshow | ||
|width= | |width=680 | ||
|height= | |height=320 | ||
}} | }} | ||
</div> | </div> | ||
[[Category:Widgets]] | [[Category:Widgets]] | ||
</noinclude><includeonly><!--Widget:Slideshow--><style type="text/css">.slideshow { position: relative; width: <!--{$width|escape:'html'}-->px; height: <!--{$height|escape:'html'}-->px; overflow: hidden; margin: 0 0 1em 1em; } .slideshow img { position: absolute; left: 0; top: 0; width: <!--{$width|escape:'html'}-->px; height: <!--{$height|escape:'html'}-->px; }</style><script type="text/javascript" src="/ | </noinclude><includeonly><!--Widget:Slideshow--><style type="text/css">.slideshow { position: relative; width: <!--{$width|escape:'html'}-->px; height: <!--{$height|escape:'html'}-->px; overflow: hidden; margin: 0 0 1em 1em; } .slideshow img { position: absolute; left: 0; top: 0; width: <!--{$width|escape:'html'}-->px; height: <!--{$height|escape:'html'}-->px; }</style> | ||
<script type="text/javascript" src="/mediawiki/skins/csdmsskin_new/jquery-slideshow/js/jquery-slideshow.min.js"></script><script type="text/javascript"> $(".slideshow-wrapper").slideshow({ timeout: 5000, fadetime: 2000 }); </script> </includeonly> |
Latest revision as of 18:06, 14 October 2021
This widget creates a slideshow from a series of images contained in a div with the css selector slideshow applied.
Dependencies:
/csdms_wiki/skins/csdmsskin_new/jquery-slideshow/js/jquery-slideshow.min.js
Parameters include:
- width - width of images
- height - height of images
For example:
<div class="slideshow-wrapper"> [[File:Votingfrontpage.jpg]] [[File:Frontpage_meeting_madeby_TEDxBoulder.jpg]] [[File:SummerInstitute2011frontpage.jpg]] </div> {{#Widget:Slideshow |width=680 |height=320 }}