dokuwiki:plugins:s5reloaded
- 所有項目會先以灰色出現，點擊滑鼠後再逐一highlight, shake選項則會再加上晃動效果 。 style=“padding-top: 3em;” 則是與前一項目的行距
<div class="blindDown" style="padding-top: 0.5em;"> <ul class="incremental show-first" > <li>sss</li> <li class="shake">An even scriptaculous effects using presentacular, by Jose Manuel Caicedo!</li> </ul> </div>
- 增加音樂效果(暫不需要)
<!-- Use this code to add music/voice to a given slice --> <object data="http://conga.oan.es/%7Ealonso/club.mp3" archive="volume:100" type="audio/mp3" width="0" height="0" class="handout"></object>
- 在分隔線後的部份為note
- 可以給每張投影片一這獨立於標題外的描述以及自動切換的時間
<!-- Set meta parameter autoMatic to true to enable automatic play--> <meta name="autoMatic" content="true" /> <script language="javascript"> // Section names here, with transparency number and description sectionNames["1"] = "Introduction to this plugin"; sectionNames["2"] = "Details"; sectionNames["5"] = "Compatibility"; sectionNames["6"] = "End"; // Section times here, with transparency number and delay in seconds sectionTimes["1"] = "20"; sectionTimes["2"] = "15"; sectionTimes["4"] = "5"; </script>
- 可以給每張投影片一這獨立於標題外的描述以及自動切換的時間
<!-- Set meta parameter autoMatic to true to enable automatic play--> <meta name="autoMatic" content="true" /> <script language="javascript"> // Section names here, with transparency number and description sectionNames["1"] = "Introduction to this plugin"; sectionNames["2"] = "Details"; sectionNames["5"] = "Compatibility"; sectionNames["6"] = "End"; // Section times here, with transparency number and delay in seconds sectionTimes["1"] = "20"; sectionTimes["2"] = "15"; sectionTimes["4"] = "5"; </script>
- 可以設定右下角footer的部份
<script language="javascript"> var foodiv; if (document.getElementById) { foodiv = document.getElementById('footer'); } else { foodiv = document.footer; } foodiv.innerHTML += '<h3>Jun Wu, CSIE, NPIC; September 15, 2013</h3>'; </script>
還有更多
~~SLIDESHOW thesis~~ ====== S5 Reloaded投影片製作測試 ====== 只有主標題，副標題要用HTML S5 Reloaded plugin for DokuWiki, with Scriptaculous <HTML> <HR> </HTML> Jun Wu CSIE@NPU <HTML><HR></HTML> http://conga.oan.es/~alonso/doku.php?id=s5reloadedTest Code for this presentation: http://conga.oan.es/~alonso/s5reloadedtest.txt ===== Features ===== <HTML> <div class="blindDown" style="padding-top: 0.5em;"> <ul class="incremental show-first" > <li>dddd</li> <li>Intedd</li> <li class="shake">An even scriptaculous effects using presentacular, by Jose Manuel Caicedo!</li> </ul> </div> </HTML> And all these features can be used from DokuWiki. Let's see some of them. <HTML> <!-- Use this code to add music/voice to a given slice --> <object data="http://conga.oan.es/%7Ealonso/club.mp3" archive="volume:100" type="audio/mp3" width="0" height="0" class="handout"></object> </HTML> ---- First note for this slice Second note ===== Scalable images ====== <HTML> <!-- Set meta parameter autoMatic to true to enable automatic play--> <meta name="autoMatic" content="true" /> <script language="javascript"> // Section names here, with transparency number and description sectionNames["1"] = "Introduction to this plugin"; sectionNames["2"] = "Details"; sectionNames["5"] = "Compatibility"; sectionNames["6"] = "End"; // Section times here, with transparency number and delay in seconds sectionTimes["1"] = "20"; sectionTimes["2"] = "15"; sectionTimes["4"] = "5"; // Now let's modify the wiki name + presentation date. Is ugly to have here to date // and time by default. Note that in the css the slide h2 section is hidden and a // slide h3 is included to properly show the information I will include now here. // First I get the footer div and then I modify its html code. var foodiv; if (document.getElementById) { foodiv = document.getElementById('footer'); } else { foodiv = document.footer; } foodiv.innerHTML += '<h3>Tom獺s Alonso - OAN • July 22, 2010</h3>'; </script> </HTML> Images are shown with class="scale" by default, and this applies always unless you only specify width OR height in the image link. Resize the window to see how the images are scaled. {{:236084main_milkyway-full-annotated.jpg?540x540 |}} {{ :bhr71.jpg?280x310|}} {{ :pleyades.png?280x230|}} ---- First note for this slice Second note ===== Effects using HTML tag code ===== <HTML><div class="grow_2" style="padding-top: 1em;">Effects in lists requires to use the HTML tag in DokuWiki, but this is quite easy and you don't have to write a lot. This text will grow and appear in 2 second.</div></HTML> <HTML> <ul class="incremental show-first"> <li class="pulsate_0.4">Pulsate this first point, and remove subpoints in 3 seconds forever</li> <ul class="fold_3"> <li>Subpoint 1</li> <li>Subpoint 2</li> <li>Subpoint 3</li> </ul> <li style="display:none" class="appear_4">Second point, everything appear progresively</li> <li class="fade_4">Third point, everything disappear progresively. You will never see this again. <ul> <li>Subpoint 1</li> <li>Subpoint 2</li> <li>Subpoint 3</li> </ul> </li> </ul> </HTML> <HTML> <p><span class="">We can also display</span> <span class="">one</span> <span class="">word</span> <span class="current">at</span> <span class="incremental">a</span> <span class="incremental">time,</span> <span class="incremental">or a phrase</span> <span class="incremental">at a time,</span> <span class="incremental">or even</span> <span class="incremental">o</span><span class="incremental">n</span><span class="incremental">e</span> <span class="incremental">l</span><span class="incremental">e</span><span class="incremental">t</span><span class="incremental">t</span><span class="incremental">e</span><span class="incremental">r</span> <span class="incremental">at a time!</span></p> <p><span class="incremental">(But HTML code is not very clean)</span></p> </HTML> ===== Available effects ===== In most of them you can control the duration of the effect. See scriptaculous for reference. * blinddown: Effect.BlindDown, blindup: Effect.BlindUp * puff: Effect.Puff, highlight: Effect.Highlight * shake: Effect.Shake, pulsate: Effect.Pulsate * slidedown: Effect.SlideDown, slideup: Effect.SlideUp * grow: Effect.Grow, shrink: Effect.Shrink * fade: Effect.Fade, appear: Effect.Appear * fold: Effect.Fold, dropout: Effect.DropOut * switchoff: Effect.SwitchOff, squish: Effect.Squish ===== Compatibility with other plugins ===== You can use also other plugins to show tables, formulae (asciimath), or tips (wrap). <WRAP tip 180px right> //**My tip**// This is my tip </WRAP> ^ My table ^^^ | Row 1 Col 1 | Row 1 Col 2 | Row 1 Col 3 | | Right| $$sqrtx$$. | $$a_(mn)$$ | | Row 3 Col 1 | Row 3 Col 2 | $$(x+1)/y$$ | Or a less cool one: <HTML> <div class="wrap_round" style="width:406px; height:140px; background-color: #505050"> <div class="wrap_round" style="width:400px; height:135px; background-color: #AAFFAA; color:#000000; border: 1px solid black; font-family: sans-serif;"> <em><center><strong>My note</strong></center></em> <div> This is my note<br> </div> <br></div></div> </HTML> ===== And that's all ===== <HTML> <BR> <BR> <BR> <div class="wrap_round appear shake" style="width:406px; height:140px; background-color: #505050"> <div class="wrap_round" style="width:400px; height:135px; background-color: #AAFFAA; color:#000000; border: 1px solid black; font-family: sans-serif;"> <em><center><strong>Bye Bye</strong></center></em> <div> This is the end<br> </div> <br></div></div> </HTML>
dokuwiki/plugins/s5reloaded.txt · 上一次變更: 2021/03/28 14:51 由 junwu