jquery - ui-coverflow を使用して画像を反転し、詳細を表示します

Question

私は最近、addyomani coverflow を使用しており、クリックしたときに画像を反転して追加の詳細を表示する方法を見つけようとしました。たとえば、CD カバーをクリックすると、CD カバーの裏にめくられます。

それを行う方法はありますか？

お時間をいただき、ありがとうございました!!

これが私のコードです:

<!-- Include theme -->
<link type="text/css" href="../../Content/jquery-ui-1.10.1.custom.css" rel="Stylesheet" />

<!-- Include jQuery and UI -->
<script type="text/javascript" src="../../Scripts/jquery-1.6.2.js"></script>
<script type="text/javascript" src="../../Scripts/jquery-ui-1.8.9.custom.min.js"></script>


<!-- Include jQuery CoverFlow widget -->
<script type="text/javascript" src="../../Scripts/ui.coverflow.js"></script>

<link type="text/css" href="../../Content/carrousel.css" rel="stylesheet" />

<!-- Transformie is a plugin that makes webkit's CSS transforms work in Internet Explorer -->
<script src="../../Scripts/sylvester.js" type="text/javascript"></script>
<script src="../../Scripts/transformie.js" type="text/javascript"></script>

<!-- Include mousewheel dependancies and app files -->
<script src="../../Scripts/jquery.mousewheel.min.js" type="text/javascript"></script>
<script src="../../Scripts/app.js" type="text/javascript"></script>

<script type="text/javascript">

$(function () {

    var demo = {

        yScroll: function (wrapper, scrollable) {

            var wrapper = $(wrapper), scrollable = $(scrollable),
                loading = $('<div class="loading">Loading...</div>').appendTo(wrapper),
                internal = null,
                images = null;
            scrollable.hide();
            images = scrollable.find('img');
            completed = 0;

            images.each(function () {
                if (this.complete) completed++;
            });

            if (completed == images.length) {
                setTimeout(function () {
                    loading.hide();
                    wrapper.css({ overflow: 'hidden' });
                    scrollable.slideDown('slow', function () {
                        enable();
                    });
                }, 0);
            }

            function enable() {
                var inactiveMargin = 99,
                    wrapperWidth = wrapper.width(),
                    wrapperHeight = wrapper.height(),
                    scrollableHeight = scrollable.outerHeight() + 2 * inactiveMargin,
                    wrapperOffset = 0,
                    top = 0,
                    lastTarget = null;

                wrapper.mousemove(function (e) {
                    lastTarget = e.target;
                    wrapperOffset = wrapper.offset();
                    top = (e.pageY - wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight - inactiveMargin;
                    if (top < 0) {
                        top = 0;
                    }
                    wrapper.scrollTop(top);
                });
            }
        }
    }
    demo.yScroll('#scroll-pane', 'ul#sortable');
});
</script>

<h2>Covers</h2>

<div class="pageWrapper">
<div class="demo" style="position:relative">
    <div class="wrapper">
        <ul>
            <div id="coverflow">
                <img src="/Cover/GetCover/ironmaidenFotD_FRONT.jpg" data-artist="Iron Maiden" data-album="Fear of the Dark" />
                <img src="/Cover/GetCover/ironmaidenFotD_BACK.jpg" data-artist="Iron Maiden" data-album="Fear of the Dark" />
            </div>
        </ul>
    </div>

    <div id="imageCaption">
    Sample Text
    </div>


    <div id='slider'></div>
</div>


<div class="demo-description">
</div>

<div class="listholder" style="display:none">

    <div id="scroll-pane">
        <ul id="sortable">
        </ul>
    </div>
</div>