thickboxでの画像の表示

質問

thickboxで複数の画像を表示しようとしています。「その他の画像」のリンクをクリックするとそのページに関連する画像を表示したいと思っています。いろいろ調べているのですが、複数の画像のリンクを表示してグループ化しています。画像のリンクを表示することなくテキストリンクのクリックのみで表示したいです。PHPもあわせてコーディングするのでしょうか？
よろしくお願いします。

回答No.3

39call · ベストアンサー

私は以下の記述で『Old Gallery』をクリックし、グループイメージを表示しますけど...
phpなどは一切使用してしません、所定のJQuery.jsとThickbox.jsとThickbox.cssだけです。

<a href="111.png" class="thickbox" rel="old" my title=""> Old Gallery</a></li>
<a href="222.png" class="thickbox" rel="old" my title=""></a>
<a href="333.png" class="thickbox" rel="old" my title=""></a>

お礼

うまくいきました。複数のディレクトリの中の複数の写真を表示したいのでPHPも利用しました

回答No.4

noname#78238

訂正します。

<script type="text/javascript">
$(document).ready(function(){
$(".no_button").hide();
});
</script>

<a href="~" class="thickbox" rel="xxx">その他の画像</a>
<a href="~" class="thickbox no_button" rel="xxx">その他の画像2</a>
<a href="~" class="thickbox no_button" rel="xxx">その他の画像3</a>
<a href="~" class="thickbox no_button" rel="xxx">その他の画像4</a>
<a href="~" class="thickbox no_button" rel="xxx">その他の画像5</a>

このようにすれば、スタイルシートが無効の場合でも、JavaScriptが無効の場合でも画像のリンクが表示されるので良いかと思います。いかがでしょうか。

回答No.2

noname#78238

PHPを使わなくても、CSSを使えば出来ると思います。

<a href="~" class="thickbox" rel="xxx">その他の画像</a>
<a href="~" class="thickbox" rel="xxx" style="display : none">~</a>
<a href="~" class="thickbox" rel="xxx" style="display : none">~</a>
<a href="~" class="thickbox" rel="xxx" style="display : none">~</a>
<a href="~" class="thickbox" rel="xxx" style="display : none">~</a>

style="display : none"をaに付け加えています。
こうすれば、一番初めのテキストリンクのみ表示され、prev・nextも出来ると思います。
いかがでしょうか。

回答No.1

noname#78238

>複数の画像を表示…
公式サイトにある、Gallery Imagesの表示の仕方のことでしょうか？

>「その他の画像」のリンクをクリックするとそのページ…
"そのページ"とは現在開いているページのことでしょうか？

>画像のリンク…
これは、<a><img /></a>のことでしょうか？

>画像のリンクを表示することなくテキストリンクのクリック…
a要素の子要素のimgをテキストに変えればよいのではないでしょうか？

それとも、一つのテキストリンクのみで複数の画像をセットで表示(prev・nextできるように)したいということでしょうか？

補足

ご返答ありがとうございます。
こちらの意図としては一つのテキストリンクのみで複数の画像をセットで表示(prev・nextできるように)したいです。
いろいろ調べたのですが、テキストリンクをクリックして1枚のみを表示する例は見つかりましたが、複数を表示する例が見当たりません。
PHPを使ってやるのかな？と推測しています。
ご返答をお願いします。