我用jQuery,CSS和&编码了一个画廊。 HTML,我想添加下一个图像和以前的图像按钮,所以我已经将它们添加到页面中,我已经为它们创建了功能,但我不知道我将如何做到这一点。这是我的代码,如果有任何机构知道这样做的好方法,我会很高兴!谢谢! 编辑我还没有收到回复,所以我会尝试提供更多信息,我试图在图片的左侧和右侧放置箭头,以便我可以转到上一张和下一张图片,我不知道该怎么做。
$(document).ready(function(){
$('.thumbnail').click(function(){
$('.backdrop').animate({'opacity':'.5'}, 300, 'linear');
$('.box').animate({'opacity' : '1.00'}, 300, 'linear');
$('.box, .selectors, .backdrop').css('display', 'block');
$('.box').html('<img class="boximg" src="' + $(this).attr('src') + '">');
//$('.box').html('<img class="boximg" src="' + src + '">');
});
$('.nextimg').click(function(){
$('.box').html('<img class="boximg" src="' + '">');
});
$('.previmg').click(function(){
$('.box').html('<img class="boximg" src="'+'">');
});
$('.backdrop').click(function(){
close_box();
});
});
$(document).keydown(function(event){
if (event.keyCode == 27 || event.keyCode == 13){
close_box();
};
});
function close_box(){
$('.backdrop, .box').animate({'opacity': '0'}, 300, 'linear', function(){
$('.backdrop, .box').css('display', 'none');
$('.selectors').css('display', 'none');
});
}
&#13;
.backdrop{
position: absolute;
display: none;
top: 0px;
left: 0px;
background-color: #000;
opacity: 0;
height: 100%;
width: 100%;
}
.box{
position: absolute;
display: none;
background-color: white;
opacity: 0;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
border-radius: 13px;
}
.close{
float: right;
margin-right: 5px;
}
.boximg {
position: absolute;
top: 3%;
left: 2%;
width: 96%;
height: 94%;
}
.thumbnail{
border-radius: 30px;
height: 300px;
width: 300px;
}
.selectors{
display: none;
}
.nextimg{
position: absolute;
right: 3%;
top: 50%;
}
.previmg{
position: absolute;
left: 3%;
top: 50%;
}
&#13;
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
</head>
<body>
<div class="images">
<img class="thumbnail" src="urlttr.jpeg">
<img class="thumbnail" src="http://www.hdwallpapers.eu/wp/sci-fi-planet-background-1920x1080.jpg">
<img class="thumbnail" src="http://www.wallpapersdb.org/wallpapers/beach/sunrise_1920x1080.jpg">
<img class="thumbnail" src="http://free-hq-wallpapers.com/wp-content/uploads/2009/07/New-York-Sunset-1920x1080.jpg">
</div>
<div class="backdrop"></div>
<div class="box"></div>
<div class="selectors">
<image class="nextimg" src="right_arrow.png">
<image class="previmg" src="left_arrow.png">
</div>
</body>
</html>
&#13;
答案 0 :(得分:1)
将您的代码带到jsfiddle,I came up with this as a solution。
<div class="images">
<!-- In the a-href you put the path to the big sized image. In the image src the small thumb path. -->
<a href="/city-q-c-640-480-3.jpg">
<img class="thumbnail" src="/city-q-c-640-480-3.jpg"/>
</a>
<a href="/sci-fi-planet-background-1920x1080.jpg">
<img class="thumbnail" src="/sci-fi-planet-background-1920x1080.jpg"/>
</a>
<a href="/sunrise_1920x1080.jpg">
<img class="thumbnail" src="/sunrise_1920x1080.jpg"/>
</a>
<a href="/New-York-Sunset-1920x1080.jpg">
<img class="thumbnail" src="/New-York-Sunset-1920x1080.jpg"/>
</a>
</div>
<div class="backdrop"></div>
<div class="box"></div>
<div class="selectors">
<img class="nextimg" src="right_arrow.png"/>
<img class="previmg" src="left_arrow.png"/>
</div>
你可以在那里看到,我用拇指包围拇指 - 您也可以使用数据属性或类似的东西来添加大图像的路径。
$(function() {
var $currentImageLink; // the current a tag
$('.images a').click(function(event){
event.preventDefault();
$currentImageLink = $(this);
$('.backdrop').animate({'opacity':'.5'}, 300, 'linear');
$('.box').animate({'opacity' : '1.00'}, 300, 'linear');
$('.box, .selectors, .backdrop').css('display', 'block');
$('.box').html('<img class="boximg" src="' + $(this).attr('href') + '">');
});
$('.nextimg').click(function() {
$currentImageLink = $currentImageLink.next('a');
if (0 == $currentImageLink.length) {
$currentImageLink = $('.images a:first-child');
}
$('.box').html('<img class="boximg" src="' + $currentImageLink.attr('href') + '">');
});
$('.previmg').click(function() {
$currentImageLink = $currentImageLink.prev('a');
if (0 == $currentImageLink.length) {
$currentImageLink = $('.images a:last-child');
}
$('.box').html('<img class="boximg" src="' + $currentImageLink.attr('href') +'">');
});
$('.backdrop').click(function() {
close_box();
});
});
$(document).keydown(function(event) {
if (event.keyCode == 27 || event.keyCode == 13) {
close_box();
}
});
function close_box() {
$('.backdrop, .box').animate({'opacity': '0'}, 300, 'linear', function() {
$('.backdrop, .box').css('display', 'none');
$('.selectors').css('display', 'none');
});
}
此外,我添加了变量$ currentImageLink,其中我总是放置当前链接元素,该元素在您的图库中显示。 在next和prev的函数中,变量用下一个/ prev链接元素填充。如果没有这样的元素,它将成为第一个或最后一个元素。
根据您要对图库执行的操作,也许您可以使图像淡出/ -in或预加载大图像。