phpの画像を読みこませるコードにjsのライブラリを読み込ませたい。

前提・実現したいこと

phpで一部変数にして画像を表示させたのですが、こちらのCDNを読み込ませたいです。

発生している問題・エラーメッセージ

試行錯誤しているのですがうまくいきません。
エラーは特に表示されません

エラーメッセージ

特になし（サクラエディタを使っています。）

該当のソースコード

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/luminous-lightbox/2.3.2/luminous.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/luminous-lightbox/2.3.2/luminous-basic.min.css">
（cdnコード）
</head>
<?php printf('<img class="i" img src="image/%s.png">', $ver);?>
この画像を表示させるphpコードに
<a class="zoom" href="上記の画像を読み込むコード"><?php printf('<img class="i" img src="image/%s.png">', $ver);?>（普通に画像を読み込むコード）
</a>

<script>
  var luminousTrigger = document.querySelectorAll('.zoom');
if( luminousTrigger !== null ) {
  new LuminousGallery(luminousTrigger);
}
</script>

参照サイト
https://web-roku.com/luminous

maisumakun

2020/07/10 01:55

まず、PHPは無視して、作りたい「HTML+JavaScript」だけのものを書けますか？

退会済みユーザー

2020/07/10 02:15 編集

ご回答ありがとうございます。 htmlはこちらになります。 <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/luminous-lightbox/2.3.2/luminous.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/luminous-lightbox/2.3.2/luminous-basic.min.css"> （cdnコード） </head> <body> <a class="zoom" href="拡大画像のパス/.png"> <img src="画像のパス/.png" alt="" /> </a> <script> var luminousTrigger = document.querySelectorAll('.zoom'); if( luminousTrigger !== null ) { new LuminousGallery(luminousTrigger); } </script></body> です。

maisumakun

2020/07/10 02:31

「拡大画像のパス」と「画像のパス」は機械的に変換できるようなものでしょうか？

退会済みユーザー

2020/07/10 02:53

すみません。具体的には、そこがphpの変数になっています。あらかじめ、拡大画像のパス、画像のパスは　＄ver=画像のパス（例:abc）となっているので、上記のコードだと <a class="zoom" href="abc/.png"> <img src="abc/.png" alt="" /> </a> となります。

maisumakun

2020/07/10 02:55 編集

拡大画像のパスと画像のパスが同一に見えるのですが、それで間違いないですか？

退会済みユーザー

2020/07/10 04:13

はい、同じです。参考サイト、https://web-roku.com/luminous こちらでも、そのようになっています。