light boxおぼえた
イラストページ作ろうと思い
最初think boxに辿り着く
でもなんか上手くいかなかったので、同じようなのわかばちゃんでやったじゃん!
とlight box思い出してそのソースをそのまま使うことに。
最初やったときは教科書みるままにやったのであまり理解できていなかったけど、
css同様、htmlにjsファイルを繋げてしまえばできちゃうんだ~割と簡単だな~という感想。
詰まったポイントは2つ
①サムネイル表示できない
②素材としての×画像とか、>(次へ)画像が表示されない
①最初はよくわからなかったので、ミニサイズのサムネイル画像を作っていました。
しかしいちいちサムネイル画像作るのめんどくさいしどーすれば?
とりあえずhtmlにcalss=img-thumbと名付け、
cssにサイズ指定をした。
でかい
こんなもんかなー。これでもでかい気がするけど…。ここらへんの調整はまた後日。
②素材としての×画像とか、>(次へ)画像が表示されない。
そもそもこの画像関連ってどこに書いてあるんだ?と一通り悩んだ末、
わかばちゃんで使ったcssをそのまま使っていたので、パスが変だった!
ここを自分のフォルダの階層に変えて、オッケーかと思ったが
表示されない。
display: none;
の部分を試しに消してみたら、普通にページ上に画像が表示されたのでパスは間違ってない。
htmlのclassの指定の問題??lightbox.cssのどっかに書いてあるの?
と一通り悩みながら眺めていると
ここだ!!!ここのリンクを変えていないからだ!!
と気づいて修正。
無事表示された\(^o^)/
イエーイ!!
まだまだ取りこぼしが多いですが理解はできている…?ような気がします。
まだwidth heightすらまともにわかっていないけれども。