![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
prettyphotoをサイトに利用しようと思っています。
設定を行った所、表示はできたのですが画像が小さい場合に
レイアウトが崩れてしまいます。
(ウィンドウ上に画像を表示しますが、その際にサムネイルや
次へボタンが崩れて表示される。)
ウィンドウ上に画像を表示する際に画像が小さかった場合でも
ある程度ウィンドウサイズを広げた状態で表示させる事は
可能なのでしょうか?
オプションなど調べてみましたが、どう設定すれば良いか
分かりませんでした。
ご存知の方おられましたらお手数ですが、
ご教授頂けますでしょうか。
No.1ベストアンサー
- 回答日時:
prettyPhoto
http://www.no-margin-for-errors.com/projects/pre …
「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)を指定できるようになります。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Windows 10 Windows10の画像ファイルのサムネールがアイコン表示になってしまいました。 3 2022/07/09 13:01
- 画像編集・動画編集・音楽編集 エクスプローラー サムネイル表示されない 1 2022/12/22 10:14
- X(旧Twitter) ツィッターの画像表示について 1 2023/08/17 09:28
- Windows 10 2つのウィンドウ選択時の表示について 10 2023/07/25 08:48
- その他(動画サービス) VLCメディアプレーヤーについて 1 2022/11/29 14:19
- その他(ソフトウェア) 画像の拡大率を固定したまま次の画像を表示出来るビューアを探しています 2 2022/05/13 17:19
- HTML・CSS 詳しい方に質問です。 早急に解決したいと思っています。 ポートフォリオをMacBook で作成したと 2 2023/05/12 17:40
- モニター・ディスプレイ NVIDIA Geforce GT 710の解像度設定について教えて下さい 3 2022/06/19 13:00
- C言語・C++・C# このプログラミング誰か教えてくれませんか 1 2022/06/02 15:27
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Javascriptで指定した日付と時...
-
画像削除機能を付けたい
-
ボタンをクリックした時に、キ...
-
bxsliderにて読み込み後に内容...
-
Javascript で共通の処理をどこ...
-
smartRolloverのカスタマイズに...
-
スワップイメージが上手く動作...
-
画像をフォルダに入れれば表示...
-
JavaScriptでスライドショー
-
<table>、もしくは<iframe>内で...
-
javascriptのitem?klassとは?
-
textareaに画像を表示したい
-
画像をクリックしてその地点の...
-
MAX関数を使ってからLEFT JOIN...
-
jspでcssが読み込めない
-
JSPでの画像ファイル表示
-
iframe内のリンクが飛ばないの...
-
javascriptテキストBOX色を元に...
-
javascriptで複数の画像をラン...
-
javascript 時計24時間表示
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
textareaに画像を表示したい
-
JavaScript スライドの画像にリ...
-
HTMLで条件分岐はできますか?
-
画像ランダム表示、しかしダブ...
-
bxsliderにて読み込み後に内容...
-
画像を切り替えランダム表示
-
1枚の画像をクリックすると複数...
-
Gifアニメ、最後のコマに行った...
-
画像の重なりの順序を代える方...
-
小窓について教えて下さい。
-
スライダーを実装した場合、ペ...
-
スワップイメージが上手く動作...
-
USEMAPでの指定区域にマウスオ...
-
1枚の画像をクリックして複数の...
-
クリッカブルマップの一部分だ...
-
オンマウスで、画像切り替え+...
-
iframe内のリンク文字のマウス...
-
edgeでスクロールバーに色が表...
-
画像の上に画像リンクを貼る方法
-
prettyphotoの画像表示について
おすすめ情報