Last modified 6 years ago
A slideshow template
the template
<corinis> <corinis-repeatable name="content"> <div class="slide"> <corinis-attribute name="style">display:none</corinis-attribute> <corinis-attribute name="id"> <corinis-get name="prename" /> </corinis-attribute> <table cellspacing="0" border="0"> <tr> <td> <table> <tr> <td colspan="2" align="center"> <corinis-field name="slideimage" style="float:left;margin-right:15px" type="image" /> </td> </tr> <tr> <td align="left"> <div> <corinis-attribute name="id"><corinis-get name="prename" />slideleft</corinis-attribute> <a> <corinis-attribute name="href"> JavaScript:showFirst('<corinis-get name="prename" />'); </corinis-attribute> first </a> <a> <corinis-attribute name="href"> JavaScript:showPrev('<corinis-get name="prename" />'); </corinis-attribute> previous </a> </div> </td> <td align="right"> <div> <corinis-attribute name="id"><corinis-get name="prename" />slideright</corinis-attribute> <a> <corinis-attribute name="href"> JavaScript:showNext('<corinis-get name="prename" />'); </corinis-attribute> next </a> <a> <corinis-attribute name="href"> JavaScript:showLast('<corinis-get name="prename" />'); </corinis-attribute> last </a> </div> </td> </tr> </table> </td> <td> <div class="slideheader"><corinis-field name="slideHeader" type="text" /></div> <br /> <corinis-field name="slideContent" type="richedit" /> </td> </tr> </table> <br clear="all" /> </div> </corinis-repeatable> <!--corinis-life <script language="javascript"> function getE (id) { if (document.all) { return document.all[id]; } else return document.getElementById(id); } /* make the first slide visible */ getE("content_1_").style.display = "block"; check(); function showNext(curId) { var curNum = curId.substring(8, curId.length-1); curNum = Number(curNum) + 1; getE(curId).style.display = "none"; getE("content_"+curNum+"_").style.display = "block"; } function showPrev(curId) { var curNum = curId.substring(8, curId.length-1); curNum = Number(curNum) - 1; getE(curId).style.display = "none"; getE("content_"+curNum+"_").style.display = "block"; } function showFirst(curId) { var curNum = curId.substring(8, curId.length-1); curNum = 1; getE(curId).style.display = "none"; getE("content_"+curNum+"_").style.display = "block"; } function showLast(curId) { var curNum = curId.substring(8, curId.length-1); curNum = Number(curNum) + 1; while (getE("content_"+curNum+"_")) curNum++; curNum-=1; getE(curId).style.display = "none"; getE("content_"+curNum+"_").style.display = "block"; } function check (cur) { getE("content_"+1+"_slideleft").style.display = "none"; var curNum = 1; while (getE("content_"+curNum+"_")) curNum++; curNum-=1; getE("content_"+curNum+"_slideright").style.display = "none"; } </script> --> </corinis>
What's going on
The idea behind this is to create a repeatable with a div (class=slide) which gets an unique id (<corinis-attribute name="id"><corinis-get name="prename" /></corinis-attribute>)
All divs are hidden per default, the slideshow is created by javascript, which is only displayed in the life system (<!--corinis-life -->)
