- ベストアンサー
phpについて
phpで書かれた画像を表示するコードにライブラリの影響を与えたいのです。 <?php printf('<img class="i" img src="image/%s/%s1.png">', $ver, $ver);?> この画像を表示させるphpコードにaタグと imgタグをつけたいのですがどうすればいいですか? 参照サイト https://web-roku.com/luminous
- みんなの回答 (2)
- 専門家の回答
質問者が選んだベストアンサー
<?php printf('<img class="i" img src="image/%s/%s1.png">', $ver, $ver);?> imgはすでについてるのですが。 <?php printf('<a><img class="i" img src="image/%s/%s1.png"></a>', $ver, $ver);?> こんだけっしょ それか。外から囲ってもOKです <a><?php printf('<img class="i" img src="image/%s/%s1.png">', $ver, $ver);?></a> こんな感じで。 ただ・・・そもそもをいえば、printfで書式がないなら <a><img class="i" img src="image/<?= $ver ?>/<?= $ver ?>1.png"></a> みたいに、直埋め込みでもいいきがしますが。
その他の回答 (1)
- AsarKingChang
- ベストアンサー率46% (3467/7474)
えっと、質問は、Aタグをつけたいだけなので、Aを付けてるだけです。 また、後から書かれている、 <a class="zoom" href="拡大画像のパス/picture_large.png"> <img src="画像のパス/picture.png" alt="" /> </a> は元々の質問と書式が違うので、違う質問になってますね。 最初のは、 ~略~ img src="image/%s/%s1.png">', $ver, $ver ~略~ 指定なので、$ver+"/"+$ver+"1"が付いたものでしたが。 "picture"という文字をベースと拡大画像に"_large"を付けるのか?で 意味が違うためです(なお、多くのサイトは逆です。小さい画像の方にサムネイルという意味の文字を付けることが多いです。) なので、上記を全部入れ込み共通部をまとめたら "picture"の部分を変形させファイル名生成部分に 埋め込めばいいことになりますので、 <?php echo "image/".$ver."/".$ver."/"; ?> です。 <a class="zoom" href="<?php echo "image/".$ver."/".$ver."/"; ?>._large.png"> <img src="<?php echo "image/".$ver."/".$ver."/"; ?>.png" alt="" /> </a> 最初のコードには、IMGにもCLASSがありましたので、それも書けば同じにはなりますし。 ベースの、"zoom"の子供に"i"を入れてもいいでしょうから。セレクタ継承で、 a.zoom img { /* class=iの内容 */ } で、まとめちゃえば、imgごとに書かなくてもいいので良いかと。 そもそもで、大体この手のサムネイルを使うときは、1回じゃないはずなので、 divなどの中で、a~imgを繰り返すならdiv側にCSSを書いておけば、基本不要になります。 div.zoom a { /* div内でaを使うときのCSS */ } div.zoom a img { /* div内でa内でありさらにimgを使うときのCSS */ } 後は、そのサムネイル発生部をループで回せば、完成でしょうね。 ってことでOKでしょうか? なお、これだと、2回同じコードを書いてるので、 バグの原因になるのが、嫌な時は <?php echo "image/".$ver."/".$ver."/"; ?> これを、一度格納させてから、表示させれば綺麗になると思いますよ。 <?php $f="image/".$ver."/".$ver."/"; ?> これでファイル名だけ生成 IMGタグ内で<?= $f ?>のみを張り付けたほうが短く、 大きい画像と小さい画像でのファイル名の違いのみを、後に結合するだけなので、 すっきりするかと。
補足
ご回答ありがとうございます。 参考サイトには <a class="zoom" href="拡大画像のパス/picture_large.png"> <img src="画像のパス/picture.png" alt="" /> </a> aにもclassがついています。 ご回答していただいたコードではできませんでした。