prettyphotoの画像表示について

質問

prettyphotoをサイトに利用しようと思っています。

設定を行った所、表示はできたのですが画像が小さい場合に
レイアウトが崩れてしまいます。
（ウィンドウ上に画像を表示しますが、その際にサムネイルや
次へボタンが崩れて表示される。）

ウィンドウ上に画像を表示する際に画像が小さかった場合でも
ある程度ウィンドウサイズを広げた状態で表示させる事は
可能なのでしょうか？

オプションなど調べてみましたが、どう設定すれば良いか
分かりませんでした。

ご存知の方おられましたらお手数ですが、
ご教授頂けますでしょうか。

回答No.1

my-- · ベストアンサー

prettyPhoto
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

「Development version」をダウンロードして、jquery.prettyPhoto.jsとprettyPhoto.cssに以下を追記してみて下さい。

// jquery.prettyPhoto.js line:487
$pp_pic_holder.find('.pp_hoverContainer,#fullResImage').height(pp_dimensions['height']).width(pp_dimensions['width']);

var miniWidth = settings.miniWidth; // 追記
if (miniWidth && pp_dimensions['width'] < miniWidth) $pp_pic_holder.find('.pp_hoverContainer').width(miniWidth); // 追記

$pp_pic_holder.find('.pp_fade').fadeIn(settings.animation_speed); // Fade the new content
-----------------------------------------------
// jquery.prettyPhoto.js line:545
// Define them in case there's no resize needed
imageWidth = width, imageHeight = height;

// ここから
var miniWidth = settings.miniWidth;
if (miniWidth && width < miniWidth) {
_getDimensions(miniWidth, imageHeight);
} else
// ここまで追記

if( ((pp_containerWidth > windowWidth) || ...
-----------------------------------------------
/* prettyPhoto.css */
#pp_full_res { text-align: center; } /* 追記 */
-----------------------------------------------
<!-- .html -->
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$(".gallery a[rel^='prettyPhoto']").prettyPhoto({ miniWidth: 300 });
});
</script>

適当な動作確認しかしていませんが、miniWidthオプションで最小幅（width）を指定できるようになります。

お礼

うまく表示できました！ソースまで記載して頂き、感謝です！
ありがとうございました！！