Widget:Slideshow: Difference between revisions

From CSDMS
No edit summary
No edit summary
 
(11 intermediate revisions by the same user not shown)
Line 4: Line 4:
Dependencies:
Dependencies:
<pre>
<pre>
/mediawiki/skins/csdmsskin_new/jquery-slideshow/js/jquery-slideshow.min.js
/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=425
|width=680
|height=225
|height=320
}}
}}
</pre>
</pre>




<div class="slideshow">
<div id="slideshow-wrapper">
[[File:Votingfrontpage.jpg|Test1]]
[[File:Votingfrontpage.jpg]]
[[File:Frontpage_meeting_madeby_TEDxBoulder.jpg|Test2]]
[[File:Frontpage_meeting_madeby_TEDxBoulder.jpg]]
[[File:SummerInstitute2011frontpage.jpg|Test3]]
[[File:SummerInstitute2011frontpage.jpg]]
{{#Widget:Slideshow
{{#Widget:Slideshow
|width=680
|width=680
Line 37: Line 37:


[[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="/w/skins/openvibe/js/jquery/jquery.slideshow.min.js"></script><script type="text/javascript"> $(".slideshow").slideshow({ timeout: 5000, fadetime: 2000 }); </script> </includeonly>
</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
}}


Votingfrontpage.jpg Frontpage meeting madeby TEDxBoulder.jpg SummerInstitute2011frontpage.jpg