いつもと趣向が変わりますが、本日はプログラミングのJavaScriptの話です。
昔からプログラミングは少々やっており、趣味程度にPHPで画像ギャラリーとか掲示板みたいなものは作っていたのですが、JavaScriptはなかなか難しく、いつも検索しながらどうにかこうにか形にしていました。
画像のポップアップ表示はメジャーなJavaScriptのひとつですが、Lightboxを使うのが一般的で、html内に記述するものは見つかりません。
ということで、JavaScriptとCSSを【htmlファイル1つ】に記述したものを作成しましたので、導入の参考にしてください。
EdgeのCopilotでコードを生成
作成といいながら、EdgeのCopilotに生成してもらいました。
そもそも自分で作れるなら苦労しないわけでして、、、
以下のように入力すれば一発でコードを生成してくれます。
複数の画像に対応した、サムネイルをクリックした時に画像を前面にポップアップ表示して背景を暗くするJavaScriptをおしえて。
サムネイルではなく、文字リンクをクリックしてポップアップしたいならこっち。
複数の画像に対応した、文字リンクをクリックした時に画像を前面にポップアップ表示して背景を暗くするJavaScriptをおしえて。
ちなみにCopilotはEdgeの一番右上にある青いアイコンをクリックすれば、誰でも無料で使えます。
サムネからポップアップ表示するコード
Copilotが生成してくれたコードがこちら。
<html>
<body>
<!-- HTML -->
<!-- サムネイルリンクを作成します。data-image属性に画像のURLを設定します。 -->
<a href="#" class="image-link" data-image="image1.jpg"><img src="thumbnail1.jpg" alt="画像1"></a>
<a href="#" class="image-link" data-image="image2.jpg"><img src="thumbnail2.jpg" alt="画像2"></a>
<a href="#" class="image-link" data-image="image3.jpg"><img src="thumbnail3.jpg" alt="画像3"></a>
<!-- ポップアップ用のdivを作成します。 -->
<div id="popup" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 1000;">
<img id="popup-image" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" src="" alt="">
</div>
<script>
// JavaScript
// すべての画像リンクに対してクリックイベントを設定します。
document.querySelectorAll('.image-link').forEach(function(link) {
link.addEventListener('click', function(e) {
e.preventDefault();
// data-image属性から画像のURLを取得します。
var image = this.getAttribute('data-image');
// ポップアップのimg要素に画像のURLを設定します。
document.getElementById('popup-image').src = image;
// ポップアップを表示します。
document.getElementById('popup').style.display = 'block';
});
});
// ポップアップ自体にもクリックイベントを設定します。これにより、ポップアップ外をクリックするとポップアップが閉じます。
document.getElementById('popup').addEventListener('click', function() {
this.style.display = 'none';
});
</script>
</body>
</html>
最低限の<html><body><script>タグのみ追記しましたが、もうこれだけで動きます。
開発した人マジ天才！
CSSをdivタグやimgタグに直接記述しているので、気になる人は<head>に分けてもらえばいいと思います。
文字リンクからポップアップ表示するコード
私はこちらの方が知りたかったので、こっちも書いておきます。
<html>
<body>
<!-- HTML -->
<!-- 画像リンクを作成します。data-image属性に画像のURLを設定します。 -->
<a href="#" class="image-link" data-image="image1.jpg">画像1</a>
<a href="#" class="image-link" data-image="image2.jpg">画像2</a>
<a href="#" class="image-link" data-image="image3.jpg">画像3</a>
<!-- ポップアップ用のdivを作成します。 -->
<div id="popup" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 1000;">
<img id="popup-image" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" src="" alt="">
</div>
<script>
// JavaScript
// すべての画像リンクに対してクリックイベントを設定します。
document.querySelectorAll('.image-link').forEach(function(link) {
link.addEventListener('click', function(e) {
e.preventDefault();
// data-image属性から画像のURLを取得します。
var image = this.getAttribute('data-image');
// ポップアップのimg要素に画像のURLを設定します。
document.getElementById('popup-image').src = image;
// ポップアップを表示します。
document.getElementById('popup').style.display = 'block';
});
});
// ポップアップ自体にもクリックイベントを設定します。これにより、ポップアップ外をクリックするとポップアップが閉じます。
document.getElementById('popup').addEventListener('click', function() {
this.style.display = 'none';
});
</script>
</body>
</html>
まとめ
今までも生成AIは凄い、みたいな記事は目にしていましたが、プログラミングでもこの程度のコードなら一発で生成できるんですね、もっと早く気付くべきでした。
うまく使いこなせれば、色々な場面で時短できますね。
とはいえ、まだ嘘をつくこともあるのでこちらも参考にしてください。
本日は以上！
コメント