LoginSignup
0
1

More than 5 years have passed since last update.

【lightbox2】サムネイル画像があるもにはlightboxを適用させ、無いものはそのままで

Last updated at Posted at 2015-08-21

この間、詰まってしまって色々ググったのだけど中々出てこなかったのでメモ程度に

サムネイル画像があるもにはlightboxを適用させ、無いものはそのままで


(動的に並べていくとき、サムネイル画像があるものにはlightbox2を適用し、無いものにはnoimageサムネイルのみを表示させるやり方)

lightbox2を適用 ファイル名の数字の部分(連番や商品コードなど)が動的に変わるイメージです

<a href="/Picture/Large_00.jpg" rel="lightbox">
      <img src="/Picture/Thumb_00.jpg">
</a>

まず、サムネイル画像が無いものに、noimageサムネイルを表示させます。

<img src="/Picture/Thumb_00.jpg" onerror="this.src = '/Content/img/Contents/noImage.jpg';" />

サムネイルをクリックさせなくさせるために、以下のコードを書いていきます。

親のノードを削除するjavascriptでrel="lightbox"を削除します

this.parentNode.removeAttribute('rel');

次にクリックできないようにします

this.onclick = function () { return (false); };

最後にカーソルを人差し指に変えないようにidを付与してcssに書きます

this.parentNode.setAttribute('id', 'none_img');
#none_img {cursor:default}

全部まとめるとこうなります

<a href="/Picture/Large_00.jpg" rel="lightbox">
   <img src="/Picture/Thumb_00.jpg" onerror="this.parentNode.setAttribute('id', 'none_img'); this.parentNode.removeAttribute('rel'); this.onclick = function () { return (false); }; this.src = '/Content/img/Contents/noImage.jpg';" />
</a>

こうすると、動的にサムネイル画像を並べていってもサムネイル画像の無いものにはlightbox2が適用されないです。

しかし長い・・・ もっと良い方法がありましたら教えてください><

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1