iPhoneでもAndroidでも、ボックス内に入れた縦長の画像をスクロールさせたい

へたっぴな図解をゆるしてくださいね。

こういうことがやりたい。


Webにアクセスした時、紫のボックスを表示させたい。だけどその中には、ボックスより天地幅の長い画像がおさまっている。ちなみにiframeではなく、ただのdiv。

で、この半分隠れた画像を、上下スクロールさせたい。スクロールさせることで、画像を見せたい。

方法は…iPhoneとiPadでは、cssで紫のボックスの天地幅を指定し、overflow:autoにしてhtmlの該当ボックスにimg srcで画像を貼り付ければ、問題なし、だった。

でも、これだとAndroidでは動かないみたい。スクロールできないらしい。


なので、今これを試している。

jQuery flickable

コレ、サイト作る時に一度検討したけど、パソコンで上手いこといかなかったか何かでやめちゃったんだよね…
今はwp_is_mobileでスマホとパソコンの表示内容自体をふりわけたので、これでスマホ全般に対応できれば。

ところが、今のところiPhoneでは動かない。Androidもあまり動いてないっぽい。しかもiPhoneでは、このdivの真下にあるメインメニューが消えてしまった。(Androidは出てる!)

…あ、これは解決。1つのスクリプトのタグのなかに複数のjQueryを羅列して書いていたので、いったんflickableのソースだけ単独で<script></script>で囲んでみたら、ちゃんとメインメニュー復活。

ま、それはおいといて…

はぁ…

続きはまた夜かな…


今年は、山口県は宇部鴻城が甲子園出場なんだ〜。

ちなみに、母校の光高は準々決勝で山口県鴻城高等学校に敗れ、その山口県鴻城は決勝で宇部鴻城に敗れたようです。なるほど、がんばったんじゃね!

宇部とかあの内陸のあたりは、いつも強いイメージがあるなあ。

がんばれ〜

Comments

Popular posts from this blog

RME FireFace UCX 基本の使い方メモ

いいもんみっけた! バークリー音大が無料で提供している音素材

文字通り、翻訳の原点