W3Schoolsには、画像タブギャラリーを作成するために使用している例があります。
プレーンJSを使用した彼らの例と私はjQueryを使用しようとしています。jQueryの使用は初めてですが、コンソールで画像を取得するように見える関数がありますが、選択した画像imgはIDが#expandedImg。の要素には表示されません。
何が悪いのか、なぜクリックした画像がレンダリングされないのか理解できないようです。ご指導をいただければ幸いです。ありがとう。
$(document).ready(function() {
$(".column img").click(function() {
var newclass = $(this).attr("src");
console.log(newclass);
var oldclass = $("#expandedImg").attr("id");
console.log(oldclass);
$("#expandedImg").fadeOut(function() {
$("#expandedImg").removeClass(oldclass).addClass(newclass).fadeIn("slow");
console.log(newclass);
});
});
});/* The grid: Four equal columns that floats next to each other */
.column {
float: left;
width: 20%;
padding: 10px;
}
/* Style the images inside the grid */
.column img {
opacity: 0.8;
cursor: pointer;
}
.column img:hover {
opacity: 1;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The expanding image container */
.container {
position: relative;
display: none;
width: 50%;
}
/* Closable button inside the expanded image */
.closebtn {
position: absolute;
top: 10px;
right: 15px;
color: white;
font-size: 35px;
cursor: pointer;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Gallery</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link href="../jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="../jquery-ui/external/jquery/jquery.js" type="text/javascript"></script>
<script src="../jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
</head>
<body>
<!-- The four columns -->
<div class="row">
<div class="column">
<img src="../images/trees_mountains.jpg" alt="Nature" style="width:100%">
</div>
<div class="column">
<img src="../images/snow_mountains.jpg" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="../images/mountain_landscape.jpg" alt="Mountains" style="width:100%">
</div>
<div class="column">
<img src="../images/skylights.jpg" alt="Lights" style="width:100%">
</div>
</div>
<div class="container">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<img id="expandedImg" style="width:100%" />
</div>
</body>
</html>内部に画像を含むコンテナ全体display: noneがCSSで非表示になっています。
.container {
position: relative;
display: none;
width: 50%;
}
最初に表示する必要があります。
$(".container").show()
また、とを使用removeClassしaddClassて新しい画像ソースを追加しています。removeClassそしてaddClass、CSSクラスを追加および削除するためだけのものであり、他には何もありません。
保存されている、あなたのデータnewclassおよびoldclassCSSクラスではありません、これらの値と値を持つ変数は、の場合の画像のソースされているnewclass、あなただけという変数newclass名で。
ソースを取得するのと同じ方法でソースを追加し、変数からの値を入力する必要があります。
$("#expandedImg").attr('src', newclass)
$(document).ready(function() {
$(".column img").click(function() {
console.clear();
var newclass = $(this).attr("src");
console.log(newclass);
var oldclass = $("#expandedImg").attr("id");
console.log(oldclass);
$(".container").show();
// show .container
$("#expandedImg").attr('src', newclass).hide().fadeIn("slow");
//set new source and hide element in order to be able to fade it in again
// fade in works only on hidden elements
});
});/* The grid: Four equal columns that floats next to each other */
.column {
float: left;
width: 20%;
padding: 10px;
}
/* Style the images inside the grid */
.column img {
opacity: 0.8;
cursor: pointer;
}
.column img:hover {
opacity: 1;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The expanding image container */
.container {
position: relative;
display: none;
width: 50%;
}
/* Closable button inside the expanded image */
.closebtn {
position: absolute;
top: 10px;
right: 15px;
color: white;
font-size: 35px;
cursor: pointer;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Gallery</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link href="../jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="../jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
</head>
<body>
<!-- The four columns -->
<div class="row">
<div class="column">
<img src="https://pmcvariety.files.wordpress.com/2019/12/baby-yoda-plush-toy-mattel-the-mandalorian.png?w=1000&h=563&crop=1" alt="Nature" style="width:100%">
</div>
<div class="column">
<img src="https://i.kinja-img.com/gawker-media/image/upload/t_original/oicrsr3wwqi6u3buvvxx.jpg" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="https://images2.minutemediacdn.com/image/upload/c_crop,h_1224,w_2177,x_80,y_0/f_auto,q_auto,w_1100/v1574876645/shape/mentalfloss/609512-disney_0.jpg" alt="Mountains" style="width:100%">
</div>
<div class="column">
<img src="https://static1.srcdn.com/wordpress/wp-content/uploads/2019/12/Baby-Yoda-in-The-Mandalorian-Chapter-4.jpg" alt="Lights" style="width:100%">
</div>
</div>
<div class="container">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<img id="expandedImg" style="width:100%" />
</div>
</body>
</html>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加