Widget:Slideshow: Difference between revisions
From CSDMS
No edit summary |
No edit summary |
||
| Line 26: | Line 26: | ||
<div | <div id="slideshow-wrapper"> | ||
[[File:Votingfrontpage.jpg]] | [[File:Votingfrontpage.jpg]] | ||
[[File:Frontpage_meeting_madeby_TEDxBoulder.jpg]] | [[File:Frontpage_meeting_madeby_TEDxBoulder.jpg]] | ||
| Line 38: | Line 38: | ||
[[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> | </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="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script><script type="text/javascript" src="/mediawiki/skins/csdmsskin_new/jquery-simpleslideshow/jquery-simpleslideshow.min.js"></script><script type="text/javascript"> $(".slideshow").slideshow({ timeout: 5000, fadetime: 2000 }); </script> </includeonly> | <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script><script type="text/javascript" src="/mediawiki/skins/csdmsskin_new/jquery-simpleslideshow/jquery-simpleslideshow.min.js"></script><script type="text/javascript"> $(".slideshow-wrapper").slideshow({ timeout: 5000, fadetime: 2000 }); </script> </includeonly> | ||
Revision as of 11:12, 12 July 2011
This widget creates a slideshow from a series of images contained in a div with the css selector slideshow applied.
Dependencies:
/mediawiki/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">
[[File:Votingfrontpage.jpg]]
[[File:Frontpage_meeting_madeby_TEDxBoulder.jpg]]
[[File:SummerInstitute2011frontpage.jpg]]
</div>
{{#Widget:Slideshow
|width=680
|height=320
}}
