2011年9月14日水曜日

prototype.jsなしスライドショー IE8だけハック法

手間かかった株式会社土屋様パソコン教室学ぶ屋本舗さんプロデュース)のホームーページですが、こちらのキモは私は社員様が記録しているお客様の実例紹介だと思いました。

自分で簡単に更新できるブログシステムを使っておられたのですが、いかんせん文章力がない(当然です) 写真の加工わからない(当然です)

で、ビフォーアフターとかをぱっと見てわかるように、自由に載せたいという場合に、cssで設定することだけを覚えていただき before と after をつけたら写真にフチがついて、それなりに見えるということを考えました。


で、写真ですが、よく使われているlight box でもよかったのですが、いちいち写真をそれなりの大きさに加工しないといけない。でも、写真を小さくすると本来の写真のよさが出ないし、顧客によっては写真をクローズアップして、細部を見たいという場合もあるでしょう。
そこで探したのがこのjqurery の写真表示です。

PIROBOX EXTENDED これは写真をほとんど加工することなくそのまま掲載することができ、クリックするとそれなりに拡大、さらにクリックするとそこだけさらに拡大というもので、家とかの場合に向いていると思います。


 Tested in ie7-8 , safari 5, chrome 9, firefox 3.6, opera 11 とあったので、安心していたのですが、今回、土屋様の場合、トップのメニューというか、タイトルというがjquery でスライダー使っていて、角丸にするjquery やら、 透明化にするのやら、ととにかく、js 祭りのように、コテコテで、 なるべく使わないところは条件分岐ではずすようにしたのですが…。

 IE8で見たときにわけのわかんないエラーが出るのです。 prototype.jsをgoogleのじゃなくって GoogleでなくPrototype本家サイトのPrototype 1.6.1 RC2(http://www.prototypejs.org/assets/2009/3/27/prototype.js)を読み込む とかいうのもやてみたけどエラー消えずorz。 なんとなくスライダーの動きへん。 slider.js(自作) の超簡単のにもオブジェクトがありませんってなるし…。 

 でも、prototype.js と jquery 同時に使えないらしい。 prototype.js 何に使っていたっけ? みたいな。 なんせ人の作ったものをコピペするだけなので、わかってないから…。 のけたら動いた~~。調子よくぅ。 

なんか、いろんなjqueryをテストしまくっていたため、使っていないものもありまして、それをさくりましたらエラーなくなりました。 ただIE8だけは このページのマウスオーバーで写真が変わるというのがなくなる… もう疲れた。いいもん。これ普通のcssなんだけど… う~ん。 消しちゃえ~

以下 IEだと消えた設定。 a.pirobox_gall{background-color:transparent;filter:alpha(opacity=90);opacity:0.9;} a.pirobox_gall:hover{background-color:transparent;filter:alpha(opacity=1);opacity:1;} あれ、うまくいくな… もう何がなんだか。 この記事は、ジャバスクリプト勉強したい。ということでした。 前述の写真のスクリプトはやはり本家もIE8 で見るとエラー出てますが…なぜなんだろう。

 とにかくエラーはなくなった。 
もちろん私のマシンでッシュミレーションでうまくいっているように見えたから安心してたんだよね。
でも、実際のIE8のマシンで見たらエラーだったのよね。

やはり古い環境とかはおいとかんといかんね。ある程度はね。 IE8とかまだまだなくならないと思うしね。


最初諦めて IE6のみ読み込ませない方法
 <!--[if !lte IE 6]><![IGNORE[--><![IGNORE[]]> <link href="css/ie6.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="xxxxx.js"></script>
<!--<![endif]-->

 とか書いて IEあきらめようかなと思ったけど、こんなie多いのにと頑張りました。
 上記リンク先のIEだけ回避は間違っている。単純に!つけただけで回避にならないです。前はこれでいけたんだっけ? 正しくは<!--[if !IE]>--> と書く。<!--<![endif]--> で閉じます。





でも、今後デザイン的には諦めないといかんこともあるだろうな。 IE切り替えのハック もう、ホントウに辛かった~。  やはりねぇ。あまり凝ったもの作るとこういうことになりますよ。 このサイト、私の技術をホントウに集結しまして、いろいろワザが進化しましたので、またご紹介します。

恋田さんから…今回のお礼に?ミニチュアデジタルカメラというものをもらいました。いったい私に何をしろというのか…という感じの小ささですが。脱原発のデモ(←ゆるい感じでよろしい)で逮捕者が出たときの証拠ビデオ(avi)を撮影するとか…。
結構高画質なのよね。

が確かに私はこのようなものが好きです。ちょっと使いこなしにナレがいる。

video
上で使ってみましたが、きちんと撮れないですなぁ。 スパイになれないよ。ビデオ高画質だったけど、どうしたの?っていうくらいはずれてます。 う~む。練習しよう。(これぞオモチャですね)



ThickBox 3 というのもjquery で コンパクトなプログラムなんだそうです。

お問合せフォーム

お名前 :
Email: (必須)
メッセージ: (必須)


0 コメント :

コメントを投稿



連絡フォーム

名前

メール *

メッセージ *

サイト内検索