画廊（图片淋浴）

时间：2017-05-04 20:03:02

标签： html css

我正在我的网站（项目）上创建一个图库页面，我放了<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 {
	background-color: #00C5CD;
  box-sizing: border-box;
}

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

div.desc {
	padding: 10px;
	text-align: center;
	color: black;
	background-color: white;
	font-size: 20px;
	font-family:"Jockey One";
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	
<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>

2 个答案:

答案 0 :(得分：0)

您需要搜索灯箱库 JavaScript插件。其中很多都是。

您提供的示例中使用的名称为 Colorbox 。您可以在此处找到有关它的更多信息：http://www.jacklmoore.com/colorbox/

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

如果您只需要图库并且不想使用jQuery，可以试试 jsLightbox http://jslightbox.felixhagspiel.de/这是一个基于纯JavaScript的图库。

答案 1 :(得分：0)

这是一个粗略但功能性的图片库示例，它以模态弹出：

＆＃13;
＆＃13; 
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');
});
＆＃13; 
* {
  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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题