foreachで回してますが…。

質問

こんばんわ。今PHPを少し触っているものです。

それで画像を表示するプログラムを書いています。
枚数にすると数千枚表示する形になります。

表示の仕方はある条件に紐づけば…という形で、
リンクにてgetで値を持たせて、プログラムのSQLで
条件の絞り込みをして当てはまる画像を取得し、
その中から３０枚バラバラで画像を取る型になっています。

画像自体は別サーバに置いてあり、URLで取ってくる形です。
画像は１枚が大きめのサイズで真ん中に表示、
残りの２９枚がその画像の下にフォトスライダーを
作り、そこで小さく表示という形式になっています。

※http://opiefoto.com/articles/photoslider#example
ざっくり見た感じ、こんな感じです。

画像の取得は二次元配列にしていて、

[0][id]
[path_a]
[path_b]
[path_c]
[path_d]

[1][id]
[path_a]
[path_b]
[path_c]
[path_d]

[2][id]
[path_a]
[path_b]
[path_c]
[path_d]…

のような形で点字の箇所で画像の種類を分けており、
その中の連想配列は[path_a]は大画像用画像のURL、
[path_b]は少し小さい画像用の画像URL、
[path_c]は下のフォトスライダー用のサイズ画像という風に
分けています。

やり方は点字の[0]の部分を真ん中に大画像として
表示させていて、残りの２９個の配列は
小さいサイズのURLを取得して下のフォトスライダーに出してます。

その出し方をsmartyを使用してforeachで出しているのですが、
同じページでスライダーの所をクリックした時、
その画像を大画像の所(点字の[0])に持っていき、
サイトのURL自体も(画像取得のURLという意味ではなく、
http://hoge/photo/1.htmlとか、http://hoge/photo/2.html…
という風に[id].htmlの様に)変えて表示させ、
残りの画像をスライダーの所に当てはめて
スライダーの画像をも変えて延々と
クリックできるようにしたいのです。

要約しますと、配列の組み換えをして、
クリックしたものを起点に[0]に当てはめる感じです。

何も思い付かず、また方法もわからないためここ数日
何をどうしていいのかわからないまま困惑した状態が続いています。

どのようにPHP、htmlを書けばいいのでしょうか？
よろしくお願いします。

回答No.1

moon_night · ベストアンサー

参考サイトのような形でJavascriptを使用するのでしたら、PHPからJavascriptを吐き出せばいいと思います。
画面遷移してもいいならばJavascriptを使用しないでもできます。

問題がざっくりしすぎててなんと回答していいかわかりません。
何をしたいか、なにができないか、ということを明確にすればアドバイスができると思います。

例えば
＞枚数にすると数千枚表示する形になります。
全部を一度に表示するか？

＞その中から３０枚バラバラで画像を取る型になっています。
バラバラ？ここの抽出まではおわってるのかな？

＞スライダーの画像をも変えて延々とクリックできるようにしたいのです。
0-29在ったとして、29の隣が0になるように循環するような感じ？
無限循環はJavascriptなどを使用しないとだめですね。

PHPのみでやるのでしたら、フレーム分けして、上部A画面、下部B画面として、A画面に大きな画像1枚入る、B画面にサムネイルで小さな画像が30枚入る。
B画面のサムネイルをクリックするとA画面にクリックした画像が表示される。
だけならばすぐにできると思います。
B画面も更新してクリックした画像を中央に持ってくる。とかになるとやっぱりJavascriptなどでA画面とB画面を両方更新する必要があります。もしくは全画面更新してフレームから作り直すとか。

お礼

回答ありがとうございます。

一度にうん千枚表示する形ではないです。
その中から、ある条件に紐づいたものを拾って
さらにその中から３０枚出してます。

３０枚抽出する所、表示させる所までは終わっています。

一応、foreachで回して、配列作った段階でsessionを作成して
各配列の全てのデータを保持できました。
あと写真に大してforeachで回してる時に{$smarty.foreach.foo.index}
とかいうもので各写真にget形式のflagを立てて、
取りあえずは押した画像が点字０の大画像には行くように
なったのですが…残りの画像表示がおかしいままです…。

やりたいことは二次元配列の状態でデータを全て保持しておきたい、
また、一度出した３０枚の画像をクリックしても
配列の内容は変えずに、押した画像(配列の点字)を起点に
配列の順番を変えておきたいってことです。
なので延々とスライダー箇所でクリックしても
ずっとループさせておきたいってことですね。

画像単位で点字０のURL
（例えば、http://hoge/photo/000001.html、
http://hoge/photo/0000002.html…）などで
表示させたいのでj-queryとかjavascriptでやるってことは
考えてなかったんですが、やっぱりjavascriptが無難なんですかね。
PHPだとリロードかかってしまってなんか見辛いですしね…。

回答No.2

moon_night

見た目をよくしたい！と言うのならばフラッシュなりJavascriptなりの導入をしたほうがよいでしょう。
使いたくないのでしたらやはりフレームがベターな気がします。

たとえば、
http://flash-bucks.com/flash/album/a11/index.html
見たいな形でフラッシュを使う手もあると思います。

Javascriptとかだと
http://weblibrary.s224.xrea.com/weblog/webdesign/javascript_high.html
http://ascii.jp/elem/000/000/189/189100/
http://ascii.jp/elem/000/000/187/187279/
とか。

お礼

■お返事かなり遅くなり申し訳ございません。

回答ありがとうございます。
Javascriptの導入はできますが、フラッシュはどうも…。

一応、JSの導入は今試みてる状態です。

回答ありがとうございました。