fotorama スライダーのサムネイル付き、画像からリンクさせたい。

Question

jQueryの初心者です。
Dwで自己流でコピペとカスタマイズで社内のWebサイトを作っています。
よろしくお願いいたします。

前提・実現したいこと

fotoramaを使っています。
サムネイル付きのスライダーで、サムネイルを自動で再生しています。
サムネイルの上に表示されている写真をクリックして別のURLページにリンクさせたいです。

該当のソースコード

現在下記のソースコードです。
HTMLソース

<div class="fotorama" data-nav="thumbs" data-thumbheight="90" data-thumbwidth="149"data-autoplay="true" data-stopautoplayontouch="false">
  <a href="img/01.jpg"><img src="img/01-s.jpg">
  <a href="img/02.jpg"><img src="img/02-s.jpg"></a>
  <a href="img/03.jpg"><img src="img/03-s.jpg"></a>
  <a href="img/04.jpg"><img src="img/04-s.jpg"></a>
</div>

試したこと

fotoramaでぐぐったページに理想に近いのをコピペしてみましたがダメでした。

HTMLソース

  <a href="img/01.jpg"><img src="img/01-s.jpg"><a href="../test/test.html#test01"></a>
  <a href="img/02.jpg"><img src="img/02-s.jpg"></a>
  <a href="img/03.jpg"><img src="img/03-s.jpg"></a>
  <a href="img/04.jpg"><img src="img/04-s.jpg"></a>

css

.fotorama__html a {
  display: block;
  height: 100%;
  /* Transparent links are not clickable in IE,
     but non-existent background fixes this.
    (Put an empty 1×1 image here to avoid
     errors in console.) */
  background: url(_.gif);
}

上記の
1×1スペーサの imageを入れると書かれていますが、どこに入れたらいいかがわかりません。

Comments

[m.ts10806]

質問編集画面タイトル横にある「初心者アイコン」をご活用ください。「初心者」と質問で書くよりも伝わりますし、質問一覧に表示されるのでわかりやすくなります。

[m.ts10806]

プログラムコード(およびエラーメッセージ)は質問内容としては最も重要な部分であるため、見やすくしていただけると助かります。<code>ボタン押下→「コード」部分にコードを貼り付け→「ここに言語を入力」に対象言語名記入（エラーメッセージの場合は不要）の手順で「コードハイライト化」してください。（質問編集画面ではリアルタイムでプレビューが表示されるので見ながら調整してください）

Answer 1

難しいようなので、違うjQueryでできないか探してみます。

Answer 2

このようにしてみてください。

<div class="fotorama" data-nav="thumbs">
  <div data-img="img/01-s.jpg"><a href="img/01.jpg"></a></div>
  <div data-img="img/02-s.jpg"><a href="img/02.jpg"></a></div>
  <div data-img="img/03-s.jpg"><a href="img/03.jpg"></a></div>
  <div data-img="img/04-s.jpg"><a href="img/04.jpg"></a></div>
</div>

CSSも必要です。

.fotorama__html div,
.fotorama__html a {
  display: block;
  height: 100%;
}

追記

<div class="fotorama" data-nav="thumbs" data-width="660" data-height="540" data-thumbheight="90" data-thumbwidth="149" data-loop="true" data-transition="crossfade" data-autoplay="true">
  <div data-img="img/01.jpg"><a href="http://google.co.jp"></a></div>
  <div data-img="img/02.jpg"><a href="http://yahoo.co.jp"></a></div>
  <div data-img="img/03.jpg"><a href="https://wikipedia.org"></a></div>
  <div data-img="img/04.jpg"><a href="https://teratail.com"></a></div>
</div>

Comments

[noraneco]

ご回答、ありがとうございます。
試してみますね。

[noraneco]

やはり、Linkがうまくいかず
教えていただいたCSSを追記した上でHTMLを修正してみました。
（サムネイルの指定サイズ入りですが）
```
<div class="fotorama"data-nav="thumbs"data-width="660"data-height="540"data-thumbheight="90" data-thumbwidth="149"data-loop="true"data-transition="crossfade"data-autoplay="true">
<div data-thumb="img/01-s.jpg"><a href="URL"><span style="background-image:url(img/01.jpg);">画像名</span></a></div>
```
これでLinkはうまくいきました。
あとは、ループでLinkが１つずつずれるのを修正すればいけそうな予感です。
もうひとふんばりしてみます。
ありがとうございました。

[takopo]

htmlが回答したのと違うようですが…サムネイルと拡大画像は別々に分ける必要はないですよ。
htmlを追記しましたのでそのままコピペしてみてください。もちろんcssもそのままコピペで大丈夫です。

[noraneco]

ありがとうございます。
最初に説明すれば良かったのですが、サムネイルをわざわざ追加しているのは、拡大画像に画像の説明と使用例の写真を追記しているので、同じ画像を使うとサムネイルに見えにくい説明文と使用例写真が表示されるのが嫌だからという理由です。

同じ写真を使って、追記部分が表示されないサムネイルにできるのであれば画像処理の二度手間が減るので嬉しいのですが。

それと、Linkですが、２順目になると、Linkがサムネイルと１つずつずれてしまいます。
02の画像をクリックすると01のリンクに飛び、03の画像をクリックすると02にリンクしてしまいます。
教えていただいて、コピペでいけたので大変助かりました。
リンクのずれは、何か影響しているのでしょうか。
度重なる質問で、大変申し訳ございません。
私の方も、調べてみます。
よろしくお願いいたします。

[takopo]

なるほど、それならコード自体変わっちゃいそうですね…画像を分けるとなると少し手こずるかもしれません。リンクのずれはこちらで確認してみたところ問題なさそうでした。
もし解決方法が見つかりましたらまたご連絡しますね。

[noraneco]

ありがとうございます。
お手間おかけします。
私の能力以上のことをやってるのは承知なので、最悪画像を同じでいくしかないのかなと思い始めてます。
Linkのずれはまだあるので、最初にあれこれ試したときのが残ってて影響してるのかもしれないので、再度やってみます。
ありがとうございます。

[noraneco]

まだLinkのずれは解決されてませんが、質問に対しては解決されました。
また、あらためてLinkのずれを質問させて頂きます。
ありがとうございました。

[takopo]

ベストアンサーありがとうございます。あまりお役に立てなくてすみません…
Linkのずれはまだ解決されてないんですね。うーん、なんででしょう。。こちらでももう少し調べてみて原因を探ってみたいと思います。

[noraneco]

takopoさん、どうしてもLinkのズレが直らなかったので、ズレを計算して作ってヨシ！としようかと思ったのですが、今後もズレの計算をするのも大変なので、再度１から作り直してみました。
どこがおかしかったかは不明なんですが、ズレが解消されました。
大変お騒がせいたしました。
これが原因でした！がわからないままなんですが。
ほんとにありがとうございました。

[takopo]

１から作り直したらズレは無事解決されたんですね。本当良かったです！