-
ID:pIiFnD さんの質問

このページのメインコンテンツ部分はどのように作られているかわかりますか?
サムネイルのナビゲーション付きギャラリー(コンテンツスライダー?)のように見えますが、どのようなテクニックが使われているか教えて下さい。
おそらくjQueryなどかと思いますが、くわしくわかりません。

もし可能ならWordpressに実装したいと考えています。
同等のプラグインがあればベストですが、jQuery、phpなどで制御できるなら独自に組み込みたいです。

www.complex.com/music/2013/02/20-good-rap-songs-ruined-by-bad-hooks/

  1. サムネイルのナビゲーション
  2. 各サムネイルをクリックして詳細ページを表示
      ※詳細ページは個別のURLにリンクしているように見えますが、なにか動的にコンテンツを読み込んでいる?
  3. 詳細ページとサムネイルの表示が同期している(表示しているページのサムネイルがオンマウス時のように明るくなる)

みんなの回答 3 件

ID:jXLT6t さんの回答

スライダーの挙動はcdnl.complex.com/min/?g=listsJS&cn=165で定義してるっぽい。id名とかで検索したらそれっぽい記述があったので。だたし内容は普通にjQueryのanimateを使用してるように見える。サムネイルはaddClassしてるだけ。これはhtmlソースの470行目くらい。
なんかこれくらいならプラグインでありそうな気がする。

ID:ZzGZC8

ありがとうございます。
このようなギャラリーを複数持てるプラグインがあるとベストなのですが、まだ見つけることができていません。
ソースを解析して独自で組んだほうが汎用性があって良いかもしれませんね。

ID:4eZ/LJ さんの回答

  1. サムネイルのナビゲーション
    例えばwordpressなら記事をループで取得してアイキャッチ画像を載せる
    スクロールは単純にあふれるほど横並びにしておいて、スライダーをクリックした時にポジションを変更することで可視領域を調整している。

2.各サムネイルをクリックして詳細ページを表示
画像をクリックすることでajaxで当該記事を取得して出力する。

  1. 詳細ページとサムネイルの表示が同期している
    javascriptによって現在のurlのパラメーターと一致するリンクタグあるいは、入れ子のimgタグにidやclassを付与している。
    wordpressならパーマリンクを簡単に取得できるのでPHPで判定したほうが楽かも。

ID:4eZ/LJ

ソースコードを詳しく追ったわけではないので、厳密にこのとおりになっているとは限りません。
そのサイトの挙動を見るに、上記のような設計によって実現できるということです。

ID:ZzGZC8

それぞれの動作説明ありがとうございます。
ひとつひとつみるとそれほど難しくないように見えます。
なんかできそうな気がしてきました!

ID:ZzGZC8 さんの回答

  1. 各サムネイルをクリックして詳細ページを表示
      ※詳細ページは個別のURLにリンクしているように見えますが、なにか動的にコンテンツを読み込んでいる?

→この挙動は、pjaxを使っていることがわかりました。

その他の部分は、上記のいただいた回答でクリアできそうです。ありがとうございました。
もしプラグインがあるようでしたら是非教えて下さい。よろしくお願いいたします。

最終更新日:2013-03-01 (2,816 views)

関連するトピックス

ページ上部に戻る