wiki:snippets/Template/Slideshow

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 -->)