我正在學校項目,我需要創建一個燈箱。設置以下內容以顯示帶有href標籤內容的警報。我試圖製作一個腳本,它採用href屬性並將其放入src標記中的lightbox-img div中,但每次都會以未定義或僅鏈接到另一頁的方式呈現。如果有任何其他信息需要讓我知道我真的想找出我錯在哪裏。多謝你們! (一個我一直在測試是與可編輯的文本項目第二TD)燈箱不會調出放大的圖像,只是白色的盒子
HTML
<div id="gallerySection" >
<table align="center" class="thumbs">
<tr>
<td>
<a href="">
<img src="image/galleryThumbnails/Kohli_characterRecreation1.jpg" width="200px" height="200px" alt="">
</a>
</td>
<td>
<a href="image/gallery/kohli_editableText3.jpg">
<img src="image/galleryThumbnails/Kohli_editableText3.jpg" width="200px" height="200px" alt="">
</a>
</td>
<td>
<a href="">
<img src="image/galleryThumbnails/Kohli_frankSinatra.jpg" width="200px" height="200px" alt="">
</a>
</td>
<td>
<a href="">
<img src="image/galleryThumbnails/postcard.png" width="200px" height="200px" alt="">
</a>
</td>
</tr>
<tr>
<td>
<a href="">
<img src="image/galleryThumbnails/Kohli_splatter.jpg" width="200px" height="200px" alt="">
</a>
</td>
<td>
<a href="">
<img src="image/galleryThumbnails/Kohli_valentinesDayCard2.jpg" width="200px" height="200px" alt="">
</a>
</td>
<td>
<a href="">
<img src="image/galleryThumbnails/Kohli_valentinesDayCard.jpg" width="200px" height="200px" alt="">
</a>
</td>
<td>
<a href="">
<img src="image/galleryThumbnails/postcard.png" width="200px" height="200px" alt="">
</a>
</td>
</tr>
</table>
<div class="lightbox" data-state="hidden">
<div class="lightbox-container">
<div class="lightbox-content">
<img class="lightbox-img" alt="">
</div>
</div>
</div>
CSS
table{
margin: 0 auto;
margin-top: .5%;
width: 60%;
}
td{
padding: 2%;
}
td img:hover{
transform: rotate(4deg) ;
background-color: white;
opacity: .7;
}
td img{
border: 1px solid #770BE0;
}
.lightbox {
position:fixed;
z-index: 10;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
display: none;
}
.lightbox-container{
position: absolute;
z-index: 10;
left: 15%;
right: 15%;
bottom: 15%;
top: 15%;
background-color: #FFFFFF;
border-radius: 6px;
box-shadow: 1px 1 px 4px #000;
}
.lightbox-content{
position: absolute;
top: 50%;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
}
.lightbox-img{
display: block;
width: 100%;
}
.lightbox[data-state="visible"] {
display: block;
}
jQuery的
<script>
$(document).ready(function(){
var $thumbs = $('.thumbs');
var $lbImg = $('.lightbox-img');
var $lb = $('.lightbox');
$(".thumbs td").click(function(event) {
event.preventDefault();
event.stopPropagation();
alert($(this).filter("[href]").attr('href'));
$lbImg.attr("src",content);
$lb.attr('data-state', 'visible');
});
});
</script>
你一定要明白所有的'href'屬性都是空的,對不對? – Tricky12
是的,我只是在測試第二個href,試圖讓它正確。 – Kylek54