このページのメインコンテンツ部分はどのように作られているかわかりますか？
サムネイルのナビゲーション付きギャラリー（コンテンツスライダー？）のように見えますが、どのようなテクニックが使われているか教えて下さい。
おそらくjQueryなどかと思いますが、くわしくわかりません。
もし可能ならWordpressに実装したいと考えています。
同等のプラグインがあればベストですが、jQuery、phpなどで制御できるなら独自に組み込みたいです。
www.complex.com/music/2013/02/20-good-rap-songs-ruined-by-bad-hooks/
- サムネイルのナビゲーション
- 各サムネイルをクリックして詳細ページを表示
※詳細ページは個別のURLにリンクしているように見えますが、なにか動的にコンテンツを読み込んでいる？ - 詳細ページとサムネイルの表示が同期している（表示しているページのサムネイルがオンマウス時のように明るくなる）
みんなの回答 3 件
スライダーの挙動はcdnl.complex.com/min/?g=listsJS&cn=165で定義してるっぽい。id名とかで検索したらそれっぽい記述があったので。だたし内容は普通にjQueryのanimateを使用してるように見える。サムネイルはaddClassしてるだけ。これはhtmlソースの470行目くらい。
なんかこれくらいならプラグインでありそうな気がする。
例えばwordpressなら記事をループで取得してアイキャッチ画像を載せる
スクロールは単純にあふれるほど横並びにしておいて、スライダーをクリックした時にポジションを変更することで可視領域を調整している。
2.各サムネイルをクリックして詳細ページを表示
画像をクリックすることでajaxで当該記事を取得して出力する。
javascriptによって現在のurlのパラメーターと一致するリンクタグあるいは、入れ子のimgタグにidやclassを付与している。
wordpressならパーマリンクを簡単に取得できるのでPHPで判定したほうが楽かも。
※詳細ページは個別のURLにリンクしているように見えますが、なにか動的にコンテンツを読み込んでいる？
→この挙動は、pjaxを使っていることがわかりました。
その他の部分は、上記のいただいた回答でクリアできそうです。ありがとうございました。
もしプラグインがあるようでしたら是非教えて下さい。よろしくお願いいたします。
関連するトピックス