Lecture/en

{{Kyoto_Background}}
{{Kyoto_Foreground|active_page=consideration}}
{{Kyoto_WikiDesign}}

        <div id="backpanel">
        <div id="album">
<!-- start album -->
            <div id="album_base">
                <div class="album_panel">[[File:kyoto_lec_2.1.png]]</div>
                <div class="album_panel">[[File:kyoto_lec_2.2.png]]</div>
                <div class="album_panel">[[File:kyoto_lec_2.3.png]]</div>
                <div class="album_panel">[[File:kyoto_lec_2.4.png]]</div>
                <div class="album_panel">[[File:kyoto_lec_2.5.png]]</div>
                <div class="album_panel">[[File:kyoto_lec_2.6.png]]</div>
                <div class="album_panel">[[File:kyoto_lec_2.7.png]]</div>
                <div class="album_panel">[[File:kyoto_lec_2.8.png]]</div>
                <div class="album_panel">[[File:kyoto_lec_2.9.png]]</div>
                <div class="album_panel">[[File:kyoto_lec_2.10.png]]</div>
                <div class="album_panel">[[File:kyoto_lec_2.11.png]]</div>
                <div class="album_panel">[[File:kyoto_lec_2.12.png]]</div>
                <div class="album_panel">[[File:kyoto_lec_2.13.png]]</div>
                <div class="album_panel">[[File:kyoto_lec_2.14.png]]</div>
                <div class="album_panel">[[File:kyoto_lec_2.15.png]]</div>
                <div class="album_panel">[[File:kyoto_lec_2.16.png]]</div>
                <div class="album_panel">[[File:kyoto_lec_2.17.png]]</div>
                <div class="album_panel">[[File:kyoto_lec_2.18.png]]</div>
                <div class="album_panel">[[File:kyoto_lec_2.19.png]]</div>
                <div class="album_panel">[[File:kyoto_lec_2.20.png]]</div>
                <div class="album_panel">[[File:kyoto_lec_2.21.png]]</div>
                <div class="album_panel">[[File:kyoto_lec_2.22.png]]</div>
                <div class="album_panel">[[File:kyoto_lec_2.23.png]]</div>
                <div class="album_panel">[[File:kyoto_lec_2.24.png]]</div>
                <div class="album_panel">[[File:kyoto_lec_2.25.png]]</div>
                <div class="album_panel">[[File:kyoto_lec_2.26.png]]</div>
                <div class="album_panel">[[File:kyoto_lec_2.27.png]]</div>
                <div class="album_panel">[[File:kyoto_lec_2.28.png]]</div>
                <div class="album_panel">[[File:kyoto_lec_2.29.png]]</div>
            </div>
        </div>
<!-- end album -->
        </div>
<html>
        <div id="control">
            <input type="button" value="prev" onclick="prev()"></input>
            <input type="button" value="next" onclick="next()"></input>
        </div>

<style type="text/css">
#backpanel {
    width: 700px;
    height: 525px;
    margin: 0px auto;
    padding: 10px;
    background-color: #eeeeee;
}

#album {
    position: absolute;
    width: 700px;
    height: 525px;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}

#album_base {
    position: absolute;
    width: 700px;
    height: 525px;
    background-color: #ffffff;
}

.album_panel {
    width: 700px;
    height: 525px;
    margin: 0px;
    padding: 0px;
    float: left;
}

#control {
    margin: 0px auto;
    width: 350px;
    text-align: center;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
    var x_0 = 0;
    var x_max = 0;

function init_album() {
    var parent = $("#album_base");
    var children = $("#album_base").children();
    x_max = (children.length-1) * children.outerWidth();
    parent.css("width",x_max+children.outerWidth());
}

function prev() {
    var base = $("#album_base");
    if (base.position().left >= x_0) return;
    var panel = base.children();
    base.animate({
        "left" : base.position().left+panel.outerWidth()
    },500,function(){});
}

function next() {
    var base = $("#album_base");
    if (base.position().left <= -x_max) return;
    var panel = base.children();
    base.animate({
        "left" : base.position().left-panel.outerWidth()
    },500,function(){});
}
init_album();
</script>
</html>