-
ID:s6.8Xo さんの質問

http://www.nttdocomo.co.jp/
これとそっくりのスライドショーを作りたいのですが、なにから手をつけてよいかわかりません。
プラグインもいろいろ探しましたがIE6対応でこれと同じようなものはありませんでした。
どなたかヒントでもよいのでご教授いただけないでしょうか。
よろしくお願いいたします。

みんなの回答 9 件

ID:HccYgI さんの回答

仕事で受けている話なら悪いことは言わないから外注に出しなさい。
できる人が書いてくれるから。

プライベートでの学習なら、JSの本一冊買ってきて、あとはソースから辿ってjsファイルとcssファイルを全部落としてきて該当箇所を読み取っていくのが早道。

ID:s6.8Xo

レスありがとうございます。
プライベートではなく仕事です。
外注には出しませんが社内エンジニアに頼むかも。。
できれば自力でやりたくて。。

ID:HccYgI

なるほど。
会社所属のデザイナーさんでしたか。それは失礼。

docomoサイトのはprototypeな上にちゃんと制作したものと思われるので、jqueryの方で理解できるならサムネイル&スライドショーの似たような挙動のものを拾ってきてレイアウトを乗せるところまで組んで、ディテールの調整をエンジニアに依頼すれば確実なのではないでしょうか。

ただ、案件規模も参考サイトと同程度である場合は、自分であればプラグイン使わずに書きます。

ID:Q9QtyU さんの回答

なんでできないのに仕事を受けるのかなあ、制作側が舐められて、クライアントにも迷惑かかる、まさに悪循環!

ID:SfQZlA

請けた後にあれもこれもと色々追加されちゃったのかな?と邪推してみる

ID:QeI.vq

そもそも仕事だなんてどこにも書かれていないけど・・・。

ID:s6.8Xo

レスありがとうございます。
仕事です。
jquery未熟なのに貼り付けたサイトのスライダーと似た感じのものを自分でデザインしてしまったのです。

ID:cTkBLL

普通に考えるならば、トピ主にできることは、デザインの変更だと思うけど。たぶん、みんなそう思ってるよ。

ID:DussAn さんの回答

自力でスクラッチすべきです。

ID:s6.8Xo

それが一番なのですが。。

ID:cqkDvc さんの回答

まず画像を全て横ならびにしておく。(以下jqueryを想定)
溢れた分はoverflow: hiddenで。

そしてスライダーとなる見出し画像と大きな画像を何らかの属性で紐付ける。
例えばiphoneなら「data-name="iphone"」というようなタグを双方につけておき、スライダーにイベントリスナーを登録しておく。
スライダーをクリックしたときにイベントが発火され、data-nameの値を参照し、それと合致する大画像を$(’[data-name=’ + value + ’])のようなセレクタによって特定する。

そして特定された画像のサイズをまずはanimate({width: ’~px’, heigth: ’~px’}, 300)のように徐々に縮小する。
縮小完了後のコールバックとして対象画像がセンターにくるまで横並びにした画像のラッパーのmarginなりpositionを変更する。

さらにそのコールバックとして見出し画像をスライドさせることでカレントの見出し画像を変更させると共に吹き出しをトグルする。

まあ2,30分くらいの案件ですかね。

ID:cqkDvc

最後偉そうに言った割に、縮小後に拡大する動作などが漏れてますが、その辺は脳内変換でオナシャス

ID:cqkDvc

ちなみにIE6対応でこういうリッチなエフェクトって無理くさい気がプンプンします。

というのもjqueryのanimateはjavascriptのsetintervalで無理やり短時間でDOM操作してるだけで、javascriptの動作が致命的に遅いie6の上にDOM操作自体がモダンブラウザだろうと重たい処理に変わりないので。さらにIE6を未だに使ってるスペックだとほぼ間違いなくカクカクになるはずです。

スペック高い最近のwindowsマシンで古いie検証やっても結局エミュレータ(ユーザーエージェント等を変更させてる)なので動作速度まで再現してるわけではありませんし。

まあ自分に案件について口出す権利は一切ありませんが、DOM自体の構造を知った上でブラウザ対応をしたほうが良いかと思います。

ID:s6.8Xo

詳細ありがとうございます!
理解するのに少し時間がかかりそうですが感謝です。

ID:cTkBLL さんの回答

何から手を付けていいか分からないってことは、CSS3もJSも分からないってこと?
それって、自力できないってことだよ。
自力でできることは、お金を払って誰かに依頼することだけですよ。
いち早く気づいてくだされ。

ID:s6.8Xo

レスありがとうございます。
HTML、CSSは理解しておりますが、jqueryはプラグインをいじる位の能力です。

ID:cTkBLL

CSS3分かるんなら、まずはCSS3だけでモダンブラウザ向けに実装してみたら。CSS3だけで同じことができるのはわかるよね?
レガシーブラウザは、CSS3の機能をjsで代替させるだけだから、考え方が簡単になるよ。

ID:NFINdj さんの回答

今時IE6にも対応って、その分の金もらってる?クライアントがウダウダ知ったかぶりで言ってるんだろうけど、もうIE6なんぞ使ってるユーザーなんて見込顧客になり得ないから切り捨てるべきだと提案したほうがいいぜ。その方がクライアントのためになるし、作るのも楽だろう。だいたいIE6で閲覧できるサイトなんてもうあまりないだろう

ID:N4/cJR さんの回答

IE7以下はでかい画像をwidth、height指定で無理やり縮小した時の処理が汚いから、辞めたほうがいいと思うけど

ID:KPZk5l さんの回答

ふつうに書けばよし。プラグインとか使うと余計に難しくなる。

ID:XWlALQ さんの回答

つ$slideshow.homepage {img:Element.Dream}

最終更新日:2013-09-26 (2,747 views)

関連するトピックス

ページ上部に戻る