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ランキング
-
textareaに画像を表示したい
-
prettyphotoの画像表示について
-
画像をドラッグ&ドロップで移...
-
image.onload = .. の後に imag...
-
画像を指定座標まで移動させたい
-
マウス追従スクリプトについて
-
プルダウンの位置がwin/macでず...
-
画像をクリックすると、詳細の...
-
プルダウンメニューを作りたい
-
クリックして変更した画像を他...
-
【java】背景画像を一定時間で...
-
edgeでスクロールバーに色が表...
-
画像の重なりの順序を代える方...
-
bxsliderにて読み込み後に内容...
-
JQueryを使用して画像をゆっく...
-
JavaScriptとチェックボックス...
-
画像の上に画像リンクを貼る方法
-
画像ランダム表示、しかしダブ...
-
iframe内のリンク文字のマウス...
-
PC設定に依存しない曜日判定JS...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
textareaに画像を表示したい
-
JavaScript スライドの画像にリ...
-
HTMLで条件分岐はできますか?
-
1枚の画像をクリックして複数の...
-
Javascript で共通の処理をどこ...
-
JavaScriptとチェックボックス...
-
画像ランダム表示、しかしダブ...
-
Gifアニメ、最後のコマに行った...
-
画像の重なりの順序を代える方...
-
1枚の画像をクリックすると複数...
-
javascriptで毎月替わる画像
-
オンマウスで、画像切り替え+...
-
透過pngの透明部分以外をクリッ...
-
Javascriptで指定した日付と時...
-
jQueryスライドショー画像への...
-
JavaScript で flexslider の画...
-
lightbox2をiframeから外に表示...
-
重なった画像にクリックイベン...
-
Twitterの埋め込みしたWebペー...
-
画像をフォルダに入れれば表示...
おすすめ情報