http://www.nttdocomo.co.jp/これとそっくりのスライドショーを作りたいのですが、なにから手をつけてよいかわかりません。プラグインもいろいろ探しましたがIE6対応でこれと同じようなものはありませんでした。どなたかヒントでもよいのでご教授いただけないでしょうか。よろしくお願いいたします。
仕事で受けている話なら悪いことは言わないから外注に出しなさい。できる人が書いてくれるから。
プライベートでの学習なら、JSの本一冊買ってきて、あとはソースから辿ってjsファイルとcssファイルを全部落としてきて該当箇所を読み取っていくのが早道。
レスありがとうございます。プライベートではなく仕事です。外注には出しませんが社内エンジニアに頼むかも。。できれば自力でやりたくて。。
なるほど。会社所属のデザイナーさんでしたか。それは失礼。
docomoサイトのはprototypeな上にちゃんと制作したものと思われるので、jqueryの方で理解できるならサムネイル＆スライドショーの似たような挙動のものを拾ってきてレイアウトを乗せるところまで組んで、ディテールの調整をエンジニアに依頼すれば確実なのではないでしょうか。
ただ、案件規模も参考サイトと同程度である場合は、自分であればプラグイン使わずに書きます。
なんでできないのに仕事を受けるのかなあ、制作側が舐められて、クライアントにも迷惑かかる、まさに悪循環！
請けた後にあれもこれもと色々追加されちゃったのかな？と邪推してみる
そもそも仕事だなんてどこにも書かれていないけど・・・。
レスありがとうございます。仕事です。jquery未熟なのに貼り付けたサイトのスライダーと似た感じのものを自分でデザインしてしまったのです。
普通に考えるならば、トピ主にできることは、デザインの変更だと思うけど。たぶん、みんなそう思ってるよ。
自力でスクラッチすべきです。
それが一番なのですが。。
まず画像を全て横ならびにしておく。(以下jqueryを想定)溢れた分はoverflow: hiddenで。
そしてスライダーとなる見出し画像と大きな画像を何らかの属性で紐付ける。例えばiphoneなら「data-name="iphone"」というようなタグを双方につけておき、スライダーにイベントリスナーを登録しておく。スライダーをクリックしたときにイベントが発火され、data-nameの値を参照し、それと合致する大画像を$(’[data-name=’ + value + ’])のようなセレクタによって特定する。
そして特定された画像のサイズをまずはanimate({width: ’~px’, heigth: ’~px’}, 300)のように徐々に縮小する。縮小完了後のコールバックとして対象画像がセンターにくるまで横並びにした画像のラッパーのmarginなりpositionを変更する。
さらにそのコールバックとして見出し画像をスライドさせることでカレントの見出し画像を変更させると共に吹き出しをトグルする。
まあ2,30分くらいの案件ですかね。
最後偉そうに言った割に、縮小後に拡大する動作などが漏れてますが、その辺は脳内変換でオナシャス
ちなみにIE6対応でこういうリッチなエフェクトって無理くさい気がプンプンします。
というのもjqueryのanimateはjavascriptのsetintervalで無理やり短時間でDOM操作してるだけで、javascriptの動作が致命的に遅いie6の上にDOM操作自体がモダンブラウザだろうと重たい処理に変わりないので。さらにIE6を未だに使ってるスペックだとほぼ間違いなくカクカクになるはずです。
スペック高い最近のwindowsマシンで古いie検証やっても結局エミュレータ(ユーザーエージェント等を変更させてる)なので動作速度まで再現してるわけではありませんし。
まあ自分に案件について口出す権利は一切ありませんが、DOM自体の構造を知った上でブラウザ対応をしたほうが良いかと思います。
詳細ありがとうございます！理解するのに少し時間がかかりそうですが感謝です。
何から手を付けていいか分からないってことは、CSS3もJSも分からないってこと？それって、自力できないってことだよ。自力でできることは、お金を払って誰かに依頼することだけですよ。いち早く気づいてくだされ。
レスありがとうございます。HTML、CSSは理解しておりますが、jqueryはプラグインをいじる位の能力です。
CSS3分かるんなら、まずはCSS3だけでモダンブラウザ向けに実装してみたら。CSS3だけで同じことができるのはわかるよね？レガシーブラウザは、CSS3の機能をjsで代替させるだけだから、考え方が簡単になるよ。
今時IE6にも対応って、その分の金もらってる？クライアントがｳﾀﾞｳﾀﾞ知ったかぶりで言ってるんだろうけど、もうIE6なんぞ使ってるユーザーなんて見込顧客になり得ないから切り捨てるべきだと提案したほうがいいぜ。その方がクライアントのためになるし、作るのも楽だろう。だいたいIE6で閲覧できるサイトなんてもうあまりないだろう
IE7以下はでかい画像をwidth、height指定で無理やり縮小した時の処理が汚いから、辞めたほうがいいと思うけど
ふつうに書けばよし。プラグインとか使うと余計に難しくなる。
つ$slideshow.homepage {img:Element.Dream}
みんなの回答 9 件
仕事で受けている話なら悪いことは言わないから外注に出しなさい。
できる人が書いてくれるから。
プライベートでの学習なら、JSの本一冊買ってきて、あとはソースから辿ってjsファイルとcssファイルを全部落としてきて該当箇所を読み取っていくのが早道。
なんでできないのに仕事を受けるのかなあ、制作側が舐められて、クライアントにも迷惑かかる、まさに悪循環！
自力でスクラッチすべきです。
まず画像を全て横ならびにしておく。(以下jqueryを想定)
溢れた分はoverflow: hiddenで。
そしてスライダーとなる見出し画像と大きな画像を何らかの属性で紐付ける。
例えばiphoneなら「data-name="iphone"」というようなタグを双方につけておき、スライダーにイベントリスナーを登録しておく。
スライダーをクリックしたときにイベントが発火され、data-nameの値を参照し、それと合致する大画像を$(’[data-name=’ + value + ’])のようなセレクタによって特定する。
そして特定された画像のサイズをまずはanimate({width: ’~px’, heigth: ’~px’}, 300)のように徐々に縮小する。
縮小完了後のコールバックとして対象画像がセンターにくるまで横並びにした画像のラッパーのmarginなりpositionを変更する。
さらにそのコールバックとして見出し画像をスライドさせることでカレントの見出し画像を変更させると共に吹き出しをトグルする。
まあ2,30分くらいの案件ですかね。
何から手を付けていいか分からないってことは、CSS3もJSも分からないってこと？
それって、自力できないってことだよ。
自力でできることは、お金を払って誰かに依頼することだけですよ。
いち早く気づいてくだされ。
今時IE6にも対応って、その分の金もらってる？クライアントがｳﾀﾞｳﾀﾞ知ったかぶりで言ってるんだろうけど、もうIE6なんぞ使ってるユーザーなんて見込顧客になり得ないから切り捨てるべきだと提案したほうがいいぜ。その方がクライアントのためになるし、作るのも楽だろう。だいたいIE6で閲覧できるサイトなんてもうあまりないだろう
IE7以下はでかい画像をwidth、height指定で無理やり縮小した時の処理が汚いから、辞めたほうがいいと思うけど
ふつうに書けばよし。プラグインとか使うと余計に難しくなる。
つ$slideshow.homepage {img:Element.Dream}
関連するトピックス