仕様を変更したいのですが

質問

http://www.jcoverflip.com/
このライブラリを使用しています。ショップサイトで商品の画像とtitle属性に商品名をセットしています。

希望としてはタイトルの下に価格を表示したいのですがタイトルと同様にセンターに来た時以外は
表示されないようにしたいのですがどうすればいいのでしょうか？

cssで表示させたい位置に指定はしているのですが普通に見えてしまいます。

現在のhtmlは以下のような感じです
<ul id="flip">
<li title="商品名">画像<p class="price">価格</p></li>
以下必要な分も同様に・・・
</ul>

回答No.1

yyr446 · ベストアンサー

別に仕様変更しなくても、CSS追加と、とってつけたような追記でOK
（想定HTML）
<ul id="flip">
<li title="商品名1"><img src="/image1.png"><p class="price">価格1</p></li>
<li title="商品名2"><img src="/image2.png"><p class="price">価格2</p></li>
<li title="商品名3"><img src="/image3.png"><p class="price">価格3</p></li>
<li title="商品名4"><img src="/image4.png"><p class="price">価格4</p></li>
</ul>
（CSS定義サンプル）
<style type="text/css">
.ui-jcoverflip {position: relative;}
.ui-jcoverflip--item {position: absolute;display: block;}
.price {display:none;}
#flip {height: 200px;width: 630px;margin-bottom: 50px;}
#flip .ui-jcoverflip--title {position:absolute;bottom:-50px;width:100%;text-align:center;color:#555;}
#flip img {display: block;border:0;outline: none;}
.ui-jcoverflip--item {cursor:pointer;}
ul, ul li {margin:0;padding:0;display:block;list-style-type:none;}
</style>

（スクリプト）
<script type="text/javascript" charset="utf-8">
<!--
jQuery( document ).ready(function(){
jQuery( '#flip' ).jcoverflip();
var items=$(".title").length;
for(var i=0;i<items;i++){
$(".ui-jcoverflip--title").get(i).innerHTML+="<br>";
$(".ui-jcoverflip--title").get(i).innerHTML+=$("li > .price ").get(items-1-i).innerHTML;
}
});
// -->
</script>