私は、現時点で画像だけを表示する画像ギャラリーを持っています。ギャラリーをこのように見せたい(私の簡単なテストギャラリー):
http://jsfiddle.net/karin_A/Nmxx4/1/
すなわち、画像の下の中央のキャプション。
私がこれまで達成してきた最高のものは、キャプションが画像の右下に配置されているギャラリーです。

htmlイメージコンテナ:
<div data-role="content" id="pagecontent" class="gallerycontent">
<?= $output ?>
</div>
PHPの画像出力:
$html .= '
';
jQueryはラッピング境界とキャプションを追加します:
$.each($("img"), function() {
$(this).wrap('<div class="wrapper"/>');
});
$.each($("img.imgAlt"), function() {
$(this).after($(this).attr("alt"));
});
CSS:
#pagecontent {
text-align:center;
font-size:12px;
color:#000;
text-decoration:none;
}
.wrapper{
float:left;
padding:0.2em;
border: 1px solid #C0C0C0;
margin:10px;
}
.thumb{
padding: 0.1em;
margin-right: 10px;
margin-bottom: 15px;
}
.gallerycontent a img {
margin: 0.2em;
}
.caption{
float:left;
width:100%;
}
私は幅(幅:100px;)を制限するとき、私はこの結果を得るラッピングの境界線:
あなたが見ることができるように、イメージ名が本当に短い場合には動作しますが、時にはそうではありません。
別の試み:
$.each($("img.imgAlt"), function() {
var title = this.alt;
$(this).after('<div class="caption">'+ title +'</div>');
});
キャプションはイメージの下に中央に配置されますが、キャプションの幅だけでなく、ページ幅全体にもdivが入ります。