フォトギャラリー用のj Query『fotorama』のサムネイルサイズの指定（ウィンドウ幅に対する%指定）

Question

フォトギャラリー用のjQuery『fotorama』のサムネイルサイズの指定について教えてください。

スマホサイトを作成しています。
1枚のメイン画像を上部に配置し、
直下に4枚のサブ画像（サムネイル）を配置したいです。

サブ画像は、fotoramaのデフォルトであるスクエア（正方形）ではなく、
任意のタテヨコ比（幅3：高さ4）で表示したいです。

このサブ画像の1カットあたりの幅を、
ウィンドウ幅の25%になるように設定したいのですが、
指定方法がわかりません。

絶対値でピクセル数を指定する方法はわかったのですが、
ウィンドウ幅に対する相対的な%指定をする方法が見つからず困っています。

よろしくお願いします。

Answer 1

%指定ができればいいのですよね？

fotorama.jsの684行目のpxを%に変えるとどうなりますか？

Comments

[YoshikazuSakata]

さっそくありがとうございます！
とても助かります。
684行目、たしかにpxと%の切り替えがありました！
%にしてみます。

[YoshikazuSakata]

％に変更してみたのですが、まだうまくいきません・・
サイズの指定はどこで行うのでしょうか？
ご教示いただければ幸いです・・

[Cf_cwd]

http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-fotorama.html
のスクリプトのオプションという項目のメソッドから指定するとどうでしょう？
恐らく684行目を%にしたことで％での指定ができるのではと流し読みした感じで思ったのですが。

余談ですがそのギャラリーにidを振るような追加処理を記述してそれにCSSを当てて上書きするとかいう元も子もない方法もあるような気がしますね。

[YoshikazuSakata]

ありがとうございます！
このコリスさんの記事で指定しているのは、メイン画像のサイズのようです。
サムネイルのサイズ指定はどのように書けばよいものでしょうか？

[Cf_cwd]

例えば#slideをスライドショー化するとして
#slideにwidth : ○○%;で指定したら解決したりしませんか？
fotoramaのdemoサイトをコンソールから弄った限り、サイズ自体は変更できそうです。
問題は中身の画像サイズを合わせることですがこれに関してはCSSでなんとかなるでしょう。

途中からなんとなく思いましたがCSS側で解決できそうな気もしますね。
bxsliderというjQueryプラグインを使うときにCSSを改造したのを思い出します。

[YoshikazuSakata]

たびたびありがとうございます！

メイン画像については、fotorama.jsの882行目で、widthを指定することで、
ウィンドウ幅に対して相対的な幅を指定することはできたのですが、
サムネイル部分については、IDやクラスがついていないため
幅の指定ができないのです。

サムネイル部分に対してIDをつけるのは、どこに書けばよいのでしょうか？

[Cf_cwd]

出来そうですが問題が多そうな予感。
個人的な疑問として4枚で25%ってことはサムネイルは4枚すべて表示された状態でスライドしないのですよね？
もしそうならbxsliderで実装したほうが早いような気がします。
(bxsliderのオプションからbuildpager使ってサムネイル部分を自前で実装する)

自分はこれ以上役に立てそうにないですね……。
コンソールからクラスを確認しつつ、CSSを変更してWindow幅の25%表示にできることは確認しました。見た目は一応問題ないですが挙動が少し怪しいのでちょっとお勧めできないかなぁと。

[YoshikazuSakata]

Cf_cwd様

詳しくありがとうございます！
本当に助かります。
bxsliderを試してみます。

＞個人的な疑問として4枚で25%ってことはサムネイルは4枚すべて表示された状態でスライドしないのですよね？

そのとおりです！