PHP & JavaScript Room :: 設置サンプル

<script src="/content/lib/simplejs/simple.js"></script>
<script src="/content/lib/simplejs/simpleslish.js"></script>

<script type="text/javascript">
    $slish('maphoto',"/content/lib/galleryimages/christmas-party-1.jpg;/content/lib/galleryimages/christmas-party-2.jpg;/content/lib/galleryimages/christmas-party-3.jpg;/content/lib/galleryimages/christmas-party-4.jpg;/content/lib/galleryimages/christmas-party-5.jpg;",900);
</script>

<style type="text/css">
div#slish {
    width:380px;
    background-color:#000;
    overflow:hidden;
}
div#slish table {
    width:100%;
    margin:0; padding:0;
}
div#slish td.prev {
    text-align:left;
}
div#slish td.play {
    text-align:center;
}
div#slish td.next {
    text-align:right;
}

div#slish a {
    color:#fff;
}
.miniphotos {
    border:1px solid #cccccc;
    margin:5px;
}
.imaa {
    float:left;
    margin-right: 5px;
    margin-left: 5px;
}

</style>

<div id="slish">
    <table>
        <tr>
            <td class="prev"><a href="#" onclick="$slishPREV(); return false;">&laquo;&nbsp;前へ</a></td>
            <td class="play"><a href="#" class="linktest"  onclick="$slishPLAY(3000); return false">再生</a>　<a href="#" onclick="$slishSTOP(); return false" class="linktest" >一時停止</a></td>
            <td class="next"><a href="#" onclick="$slishNEXT(); return false;">次へ&nbsp;&raquo;</a></td>
        </tr>
    </table>
    <div class="imaa"><img src="/content/lib/galleryimages/christmas-party-1.jpg" name="maphoto" width="320" height="213" id="maphoto" /></div>

    <a href="#" onclick="$slishToNum(1); return false"><img src="/content/lib/galleryimages/thumbnail/christmas-party-1.jpg" class="miniphotos" width="32" height="32" /></a><br>
    <a href="#" onclick="$slishToNum(2); return false"><img src="/content/lib/galleryimages/thumbnail/christmas-party-2.jpg" class="miniphotos" width="32" height="32" /></a><br>
    <a href="#" onclick="$slishToNum(3); return false"><img src="/content/lib/galleryimages/thumbnail/christmas-party-3.jpg" class="miniphotos" width="32" height="32" /></a><br>
    <a href="#" onclick="$slishToNum(4); return false"><img src="/content/lib/galleryimages/thumbnail/christmas-party-4.jpg" class="miniphotos" width="32" height="32" /></a><br>
    <a href="#" onclick="$slishToNum(5); return false"><img src="/content/lib/galleryimages/thumbnail/christmas-party-5.jpg" class="miniphotos" width="32" height="32" /></a><br>

    <img src="/content/lib/galleryimages/christmas-party-2.jpg" alt="rien" width="320" height="213" style="display:none" />
    <img src="/content/lib/galleryimages/christmas-party-3.jpg" alt="rien" width="320" height="213" style="display:none" />
    <img src="/content/lib/galleryimages/christmas-party-4.jpg" alt="rien" width="320" height="213" style="display:none" />
    <img src="/content/lib/galleryimages/christmas-party-5.jpg" alt="rien" width="320" height="213" style="display:none" />
    <img src="/content/lib/galleryimages/christmas-party-1.jpg" alt="rien" width="320" height="213" style="display:none" />

</div>