画廊（图片淋浴）

-1

我在我的网站（项目）上制作一个画廊页面，我已经把<a target="_blank"，但我不喜欢它：P。所以我记得在一些网站上有弹出窗口和图片，当你点击图片的左侧或右侧时，它会滑动到下一张或上一张图片。最好的解释方法是向你展示LINK。提前致谢。画廊（图片淋浴）

编辑下皮肤点击这些图片!!!!

body { 
 
    background-image: url("https://s-media-cache-ak0.pinimg.com/originals/e4/98/1a/e4981a3dd4aa2fa6f0bc84cde9087c7a.jpg"); 
 
    background-attachment: fixed; 
 
    box-sizing: border-box; 
 
    margin-left: 20px; 
 
    margin-right: 20px; 
 
    margin-top: 0px; 
 
    margin-bottom: 0px; 
 
    border-top-left-radius: 25px; 
 
    border-top-right-radius: 25px; 
 
    border-right: solid rgb(200, 101, 103); 
 
    border-left: solid rgb(200, 101, 103); 
 
    border-bottom-left-radius: 25px; 
 
    border-bottom-right-radius: 25px; 
 
} 
 

 
#header { 
 
    height: 50px; 
 
    box-sizing: border-box; 
 
    width: auto; 
 
} 
 

 
#navigacija { 
 
    right: 20px; 
 
    left: 20px; 
 
    height: 50px; 
 
    overflow: hidden; 
 
    text-align: right; 
 
    background-color: #089DE3; 
 
    z-index: 9999; 
 
    box-sizing: border-box; 
 
    border-radius: 25px; 
 
    position: fixed; 
 
    border-top: solid rgb(200, 101, 103); 
 
    border-bottom: solid rgb(200, 101, 103); 
 
} 
 

 
.navitem { 
 
    background: #089DE3; 
 
    color: white; 
 
    line-height: 50px; 
 
    font-size: 30px; 
 
    font-family: "Fjalla One"; 
 
    display: inline-block; 
 
    padding-left: 50px; 
 
    padding-right: 50px; 
 
    box-sizing: border-box; 
 
} 
 

 
.home:hover { 
 
    background: #00C5CD; 
 
    box-sizing: border-box; 
 
} 
 

 
.gallery:hover { 
 
    background: #00C5CD; 
 
    box-sizing: border-box; 
 
} 
 

 
.contact:hover { 
 
    box-sizing: border-box; 
 
    background: #00C5CD; 
 
} 
 

 
.info:hover { 
 
    box-sizing: border-box; 
 
    background: #00C5CD; 
 
} 
 

 
.active { 
 
\t background-color: #00C5CD; 
 
    box-sizing: border-box; 
 
} 
 

 
h1 { 
 
\t text-align: center; 
 
\t font-family: "Jockey One"; 
 
\t font-size: 100px; 
 
\t color: white; 
 
} 
 
div.galerija { 
 
\t margin-left: 10px; 
 
\t margin-right:32px; 
 
\t margin-bottom:10px; 
 
\t border: 1px solid rgb(200, 101, 103); 
 
\t float: left; 
 
\t width: 300px; 
 
} 
 
div.galerija:hover { 
 
\t border: 1px solid white; 
 
} 
 

 
div.desc { 
 
\t padding: 10px; 
 
\t text-align: center; 
 
\t color: black; 
 
\t background-color: white; 
 
\t font-size: 20px; 
 
\t font-family:"Jockey One"; 
 
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
\t 
 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
 

 
<head> 
 

 
<meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org" /> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
 
<title>GALLERY</title> 
 
<link rel="stylesheet" href="Gallery.css" type="text/css" /> 
 
<link href="https://fonts.googleapis.com/css?family=Jockey+One" rel="stylesheet" type="text/css" /> 
 
<link href="https://fonts.googleapis.com/css?family=Allerta+Stencil" rel="stylesheet" type="text/css" /> 
 
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet" type="text/css" /> 
 

 
</head> 
 

 
<body> 
 

 

 
    <div id="header"> 
 
    <div id="navigacija"> 
 
     <a href="Home.html"> 
 
     <div class="navitem home"><strong>HOME</strong></div> 
 
     </a> 
 
     <a href="Gallery.html"> 
 
     <div class="navitem gallery active"><strong>GALLERY</strong></div></a> 
 
     <a href="#"></a> 
 
     <div class="navitem contact"><strong>CONTACT</strong></div> 
 
     <a href="#"></a> 
 
     <div class="navitem info"><strong>INFO</strong></div> 
 
    </div> 
 
    </div> 
 
    
 
    <h1><strong>GALLERY</strong></h1> 
 
    
 
    <div class="galerija"> 
 
    <a target="_blank" href="http://www.downvids.net/video/bestimages/img-aatrox-the-darkin-blade-196.jpg"> 
 
    <img src="http://www.downvids.net/video/bestimages/img-aatrox-the-darkin-blade-196.jpg" alt="Aatrox" width="300" height="200"> 
 
    </a> 
 
    <div class="desc">Aatrox, the Darkin Blade</div> 
 
    </div> 
 
    
 
    <div class="galerija"> 
 
    <a target="_blank" href="https://i.ytimg.com/vi/xE4e_cLMgjU/maxresdefault.jpg"> 
 
    <img src="https://i.ytimg.com/vi/xE4e_cLMgjU/maxresdefault.jpg" alt="Ahri" width="300" height="200"></a> 
 
    <div class="desc">Ahri, the Nine-Tailed Fox</div> 
 
    </div> 
 
    
 
    <div class="galerija"> 
 
    <a target="_blank" href= "https://cdn.tryhardgopro.com/static/ddragon/cdn/img/champion/splash/Akali_0.jpg "> 
 
    <img src="https://cdn.tryhardgopro.com/static/ddragon/cdn/img/champion/splash/Akali_0.jpg " alt="Akali" width="300" height="200"></a> 
 
    <div class="desc">Akali, the Fist of Shadow</div> 
 
    </div> 
 
    
 
    <div class="galerija"> 
 
    <a target="_blank" href="http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Alistar_0.jpg"> 
 
    <img src="http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Alistar_0.jpg" alt="Alistar" width="300" height="200"></a> 
 
    <div class="desc">Alistar, the Minotaur</div> 
 
    </div> 
 
    
 
    <div class="galerija"> 
 
    <a target="_blank" href="https://cdn.tryhardgopro.com/static/ddragon/cdn/img/champion/splash/Amumu_0.jpg"> 
 
    <img src="https://cdn.tryhardgopro.com/static/ddragon/cdn/img/champion/splash/Amumu_0.jpg" alt="Amumu" width="300" height="200"></a> 
 
    <div class="desc">Amumu, the Sad Mummy</div> 
 
    </div> 
 
    
 
    <div class="galerija"> 
 
    <a target="_blank" href="http://static.lolskill.net/img/skins/1215/anivia_0.jpg"> 
 
    <img src="http://static.lolskill.net/img/skins/1215/anivia_0.jpg " alt="Anivia" width="300" height="200"></a> 
 
    <div class="desc">Anivia, the Cryophoenix</div> 
 
    </div> 
 
    
 
    <div class="galerija"> 
 
    <a target="_blank" href="http://media-titanium.cursecdn.com/loldiffs/AirClientDiff_1_28_2013_2_28_PM/images/Annie_Splash_0.jpg"> 
 
    <img src="http://media-titanium.cursecdn.com/loldiffs/AirClientDiff_1_28_2013_2_28_PM/images/Annie_Splash_0.jpg" alt="Annie" width="300" height="200"></a> 
 
    <div class="desc">Annie, the Dark Child</div> 
 
    </div> 
 
    
 
    <div class="galerija"> 
 
    <a target="_blank" href="http://images2.wikia.nocookie.net/__cb20101005190542/leagueoflegends/images/c/c0/Ashe_OriginalSkin.jpg"> 
 
    <img src="http://images2.wikia.nocookie.net/__cb20101005190542/leagueoflegends/images/c/c0/Ashe_OriginalSkin.jpg" alt="Ashe" width="300" height="200"></a> 
 
    <div class="desc">Ashe, the Frost Archer</div> 
 
    </div> 
 
    
 
    <div class="galerija"> 
 
    <a target="_blank" href="http://s.lolstatic.com/site/mount-targon/079694fdf251b5e7de788d9ab439d401d31ae160/img/champions/aurelion-sol/aurelion-sol-splash-fallback.jpg"> 
 
    <img src="http://s.lolstatic.com/site/mount-targon/079694fdf251b5e7de788d9ab439d401d31ae160/img/champions/aurelion-sol/aurelion-sol-splash-fallback.jpg" alt="Aurelion Sol" width="300" height="200"></a> 
 
    <div class="desc">Aurelion Sol, the Star Forger</div> 
 
    </div> 
 
    
 
    <div class="galerija"> 
 
    <a target="_blank" href="https://assets.vg247.com/current//2015/09/league_of_legnds_azir.jpg"> 
 
    <img src="https://assets.vg247.com/current//2015/09/league_of_legnds_azir.jpg" alt="Azir" width="300" height="200"></a> 
 
    <div class="desc">Azir, the Emperor of the Sands</div> 
 
    </div> 
 
    
 
    <div class="galerija"> 
 
    <a target="_blank" href="http://news.cdn.leagueoflegends.com/public/images/pages/2015/breveal/img/Bard_Splash_WP.jpg"> 
 
    <img src="http://news.cdn.leagueoflegends.com/public/images/pages/2015/breveal/img/Bard_Splash_WP.jpg" alt="Bard" width="300" height="200"></a> 
 
    <div class="desc">Bard, the Wandering Caretaker</div> 
 
    </div> 
 
    
 
    <div class="galerija"> 
 
    <a target="_blank" href="http://static.lolskill.net/img/skins/1215/blitzcrank_0.jpg"> 
 
    <img src="http://static.lolskill.net/img/skins/1215/blitzcrank_0.jpg" alt="Blitzcrank" width="300" height="200"></a> 
 
    <div class="desc">Blitzcrank, the Great Steam Golem</div> 
 
    </div> 
 
    
 
    <div class="galerija"> 
 
    <a target="_blank" href="http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Brand_0.jpg"> 
 
    <img src="http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Brand_0.jpg" alt="Brand" width="300" height="200"></a> 
 
    <div class="desc">Brand, the Burning Vengeance</div> 
 
    </div> 
 
    
 
    <div class="galerija"> 
 
    <a target="_blank" href="http://na.leagueoflegends.com/sites/default/files/styles/scale_xlarge/public/upload/b-splash.jpg?itok=vJzNVWjn"> 
 
    <img src="http://na.leagueoflegends.com/sites/default/files/styles/scale_xlarge/public/upload/b-splash.jpg?itok=vJzNVWjn" alt="Braum" width="300" height="200"></a> 
 
    <div class="desc">Braum, the Heart of the Freljord</div> 
 
    </div> 
 
    
 
    <div class="galerija"> 
 
    <a target="_blank" href="https://img.clipartfox.com/5633c6d56bed03beb9292dd8c7f26199_-league-of-legends-and-caitlyn-league-of-legends-clipart_1215-717.jpeg"> 
 
    <img src="https://img.clipartfox.com/5633c6d56bed03beb9292dd8c7f26199_-league-of-legends-and-caitlyn-league-of-legends-clipart_1215-717.jpeg" alt="Caitlyn" width="300" height="200"></a> 
 
    <div class="desc">Caitlyn, the Sheriff of Piltover</div> 
 
    </div> 
 
    
 
    <div class="galerija"> 
 
    <a target="_blank" href="http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Camille_0.jpg"> 
 
    <img src="http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Camille_0.jpg" alt="Camille" width="300" height="200"></a> 
 
    <div class="desc">Camille, the Steel Shadow</div> 
 
    </div> 
 
    
 
    </body> 
 
    
 
    </html>

来源

2017-05-04 Marko Ribic

您希望我们能够为你的图片库？ – StefanBob

不，只需要一点帮助，我该怎么做... –

使用lightbox插件。谷歌对于“灯箱”，有很多可用的解决方案 - 全部使用JavaScript，但在很大程度上或多或少预先写好 – Johannes

你需要寻找一个灯箱画廊的JavaScript plugin.There的很多人在那里。

您给出的示例中使用的名称为Colorbox。在这里您可以找到更多关于它的信息：http://www.jacklmoore.com/colorbox/

Colorbox基于jQuery库，因此您需要使用booth。

如果您只需要画廊，你不想使用jQuery你可以给一个尝试jsLightboxhttp://jslightbox.felixhagspiel.de/这是一个纯粹的基于JavaScript库。

来源

2017-05-04 23:07:22 jaumemk

下面是粗看，但在一个模式弹出一个图片库的功能例如：

var images = $('.slideshow img'); 
 
var numImages = $('.slideshow img').length - 1; 
 
var modalButton = $('.modal-button'); 
 
var prev = $('.prev'); 
 
var next = $('.next'); 
 
var num = 0; 
 

 

 
modalButton.on('click', function() { 
 
    $('.slideshow').toggleClass('active'); 
 
}) 
 

 
prev.on('click', function() { 
 
    images.removeClass('active'); 
 
    num--; 
 
    if (num < 0) { 
 
    num = numImages; 
 
    } 
 
    images.eq(num).addClass('active'); 
 
}); 
 

 
next.on('click', function() { 
 
    images.removeClass('active'); 
 
    num++; 
 
    if (num > numImages) { 
 
    num = 0; 
 
    } 
 
    images.eq(num).addClass('active'); 
 
});

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.content { 
 
    width: 100%; 
 
    max-width: 1024px; 
 
    min-height: 100vh; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    text-align: center; 
 
    background-color: gray; 
 
} 
 

 
.modal-button { 
 
    padding: 10px; 
 
    position: relative; 
 
    border: 2px solid green; 
 
    background-color: #fff; 
 
    z-index: 3; 
 
} 
 

 
.modal-button:hover { 
 
    cursor: pointer; 
 
} 
 

 
.slideshow { 
 
    display: none; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    margin: auto; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background-color: rgba(0, 0, 0, 0.7); 
 
    z-index: 2; 
 
} 
 

 
.slideshow.active { 
 
    display: flex; 
 
} 
 

 
.image-container { 
 
    margin: 0 auto; 
 
} 
 

 
.image-container img { 
 
    display: none; 
 
} 
 

 
.image-container img.active { 
 
    display: inline; 
 
} 
 

 
.slideshow-controls { 
 
    width: 350px; 
 
    margin: 0 auto; 
 
    padding: 20px; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    text-align: center; 
 
    background-color: tomato; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section class="content"> 
 
    <a class="modal-button">Click here to toggle slideshow</a> 
 
    <section class="slideshow"> 
 
    <div class="image-container"> 
 
     <img class="active" src="http://placehold.it/350x350/000/bae"> 
 
     <img src="http://placehold.it/250x150/fff/58b"> 
 
     <img src="http://placehold.it/350x200/333/aeb"> 
 
     <img src="http://placehold.it/400x150/666/33c"> 
 
    </div> 
 
    <div class="slideshow-controls"> 
 
     <button class="prev">Prev</button> 
 
     <button class="next">Next</button> 
 
    </div> 
 
    </section> 
 
</section>

来源

2017-05-05 14:34:37 StefanBob

画廊（图片淋浴）

回答

相关问题