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ランキング
-
画像の上に画像リンクを貼る方法
-
スライダーを実装した場合、ペ...
-
画面の表示位置を指定させて表...
-
オンマウスで、画像切り替え+...
-
残像を残しながらjpg画像を自動...
-
JAVASCRIPTでアクセス毎に画像...
-
画像クリック→メッセージボック...
-
「画像の上を流れる文字列」を...
-
小窓について教えて下さい。
-
MAX関数を使ってからLEFT JOIN...
-
htmlの記述で link rel=styles...
-
背景色を一定時間ごとにランダ...
-
文字を固定したいのですが…
-
javascriptでURLにマウスオーバー
-
[急ぎ] videoタグで埋め込んだm...
-
文字と数字が混在する要素のsor...
-
離れた場所にマウスオーバーで...
-
ホームページビルダー15 メニュ...
-
c++std::string型をTCHARに変換...
-
タブで開いてさらにタブ内をア...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
textareaに画像を表示したい
-
JavaScript スライドの画像にリ...
-
1枚の画像をクリックして複数の...
-
HTMLで条件分岐はできますか?
-
Javascript で共通の処理をどこ...
-
Gifアニメ、最後のコマに行った...
-
JavaScriptとチェックボックス...
-
画像の重なりの順序を代える方...
-
画像ランダム表示、しかしダブ...
-
javascriptで毎月替わる画像
-
1枚の画像をクリックすると複数...
-
オンマウスで、画像切り替え+...
-
透過pngの透明部分以外をクリッ...
-
Javascriptで指定した日付と時...
-
jQueryスライドショー画像への...
-
JavaScript で flexslider の画...
-
lightbox2をiframeから外に表示...
-
重なった画像にクリックイベン...
-
Twitterの埋め込みしたWebペー...
-
画像をフォルダに入れれば表示...
おすすめ情報