gallery css js bootstrap

Bonjour

1) Premièrement j'ai ce code non fonctionnel d'images avec un menu mais je ne sais pas comment enlever les puces et mettre les boutons les uns à côté des autres. Avez vous un exemple?

2) Comment faire fonctionner le menu des images?

3) Avec mon code avez vous un exemple de comment faire une lightbox qui change d'image en scrollant? (Avec des images miniatures au départ et en affichant ensuite l'image au centre de l'écran à 100% ...)

4) J'aurai aimé faire défiler le bloc d'image avec la souris comme ici : https://html5up.net/parallelism , mais je ne sais pas comment m'y prendre avez vous un exemple avec ma base de code?

5) Afin de changer les images régulièrement sur la première page "index.html" j'aurai voulu utiliser javascript mais je ne le connais pas assez pour faire ce que je veux. C'est à dire appeler des images d'une autre page, plus préciser des images filtrées par catégories, et afficher automatiquement 10 images pour chaque catégories sur ma 1ere page. Avez vous un exemple?

HTML:

<!DOCTYPE HTML>
<!--
	Landed by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
	<head>
		<title>Landed by HTML5 UP</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
		<link rel="stylesheet" href="assets/css/main.css" />
	<!--	<noscript><link rel="stylesheet" href="assets/css/js.css" /></noscript>  -->
	<!-- four:::-->
<script src="assets/js/galeryct.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!--end four-->

	</head>
	<body class="is-preload landing">
		
			<!-- Four -->

<div class="container-fluid" style="margin-top:20px;">
<h1 style="text-align:center;color:hotpink;">Portfolio Gallery Filter</h1><br>
<div class="row">


<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="showall-tab" data-toggle="pill" href="#showall" role="tab" aria-controls="showall" aria-selected="true">Show All</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="Cars-tab" data-toggle="pill" href="#Cars" role="tab" aria-controls="Cars" aria-selected="false">Cars</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="City-tab" data-toggle="pill" href="#City" role="tab" aria-controls="City" aria-selected="false">City</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="Forest-tab" data-toggle="pill" href="#Forest" role="tab" aria-controls="Forest" aria-selected="false">Forest</a>
  </li>
</ul>
</div><hr noshade style="margin-top:-20px;">
<div class="container">
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="showall" role="tabpanel" aria-labelledby="showall-tab">
    <div class="Portfolio"><a href="#!"><img class="card-img" src="http://placehold.it/400x400" alt=""></a><div class="desc">Car 1</div></div>
    <div class="Portfolio"><a href="#!"><img class="card-img" src="http://placehold.it/400x400" alt=""></a><div class="desc">City 1</div></div>
    <div class="Portfolio"><a href="#!"><img class="card-img" src="http://placehold.it/400x400" alt=""></a><div class="desc">Car 2</div></div>
    <div class="Portfolio"><a href="#!"><img class="card-img" src="http://placehold.it/400x400" alt=""></a><div class="desc">Forest 1</div></div>
    <div class="Portfolio"><a href="#!"><img class="card-img" src="http://placehold.it/400x400" alt=""></a><div class="desc">Forest 2</div></div>
    <div class="Portfolio"><a href="#!"><img class="card-img" src="http://placehold.it/400x400" alt=""></a><div class="desc">City 2</div></div>
    <div class="Portfolio"><a href="#!"><img class="card-img" src="http://placehold.it/400x400" alt=""></a><div class="desc">Car 3</div></div>
    <div class="Portfolio"><a href="#!"><img class="card-img" src="http://placehold.it/400x400" alt=""></a><div class="desc">City 3</div></div>
    <div class="Portfolio"><a href="#!"><img class="card-img" src="http://placehold.it/400x400" alt=""></a><div class="desc">Forest 3</div></div>
    
  </div>
  <div class="tab-pane fade" id="Cars" role="tabpanel" aria-labelledby="Cars-tab">
    <div class="Portfolio"><a href="#!"><img class="card-img" src="http://placehold.it/400x400" alt=""></a><div class="desc">Car 1</div></div>
    <div class="Portfolio"><a href="#!"><img class="card-img" src="http://placehold.it/400x400" alt=""></a><div class="desc">Car 2</div></div>
    <div class="Portfolio"><a href="#!"><img class="card-img" src="http://placehold.it/400x400" alt=""></a><div class="desc">Car 3</div></div>
  </div>
  <div class="tab-pane fade" id="City" role="tabpanel" aria-labelledby="City-tab">
    <div class="Portfolio"><a href="#!"><img class="card-img" src="http://placehold.it/400x400" alt=""></a><div class="desc">City 1</div></div>
    <div class="Portfolio"><a href="#!"><img class="card-img" src="http://placehold.it/400x400" alt=""></a><div class="desc">City 2</div></div>
    <div class="Portfolio"><a href="#!"><img class="card-img" src="http://placehold.it/400x400" alt=""></a><div class="desc">City 3</div></div>
  </div>
  <div class="tab-pane fade" id="Forest" role="tabpanel" aria-labelledby="Forest-tab">
    <div class="Portfolio"><a href="#!"><img class="card-img" src="http://placehold.it/400x400" alt=""></a><div class="desc">Forest 1</div></div>
    <div class="Portfolio"><a href="#!"><img class="card-img" src="http://placehold.it/400x400" alt=""></a><div class="desc">Forest 2</div></div>
    <div class="Portfolio"><a href="#!"><img class="card-img" src="http://placehold.it/400x400" alt=""></a><div class="desc">Forest 3</div></div>
  </div>
</div>
</div>

</div>


	
			
	</body>
</html>

CSS:

.Portfolio {
    position: relative;
    margin: 5px;
    border: 2px solid black;
    float: left;
    width: 180px;
    transition-duration: 0.4s;
    border-radius: 5px;
    animation: winanim 0.5s ;
-webkit-backface-visibility:visible;
    backface-visibility:visible;
    box-shadow:0 3px 5px -1px rgba(0,0,0,.2),0 5px 8px 0 rgba(0,0,0,.14),0 1px 14px 0 rgba(0,0,0,.12)
}

.Portfolio:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19);
}

.Portfolio img {
    width: 100%;
    height: auto;
    border-radius: 5px
}

.desc {
    padding: 5px;
    text-align: center;
    font-size: 90%;
    background:black;
    color:hotpink
}

.nav {
    padding:20px;
    margin-left:340px;
    margin-top:-30px;
}

.nav li a { 
    margin:5px;
    padding: 15px 50px; 
    font-size:16px; 
    color:hotpink; 
    background: #000;
    transition-duration: 0.4s;
}
.nav a:hover { 
    background:#333; 
}
.nav .active { 
    background-color:hotpink !important;
    color:#fff;
}

@keyframes winanim {
    0%{opacity:0;transform:scale3d(.3,.3,.3)}
    50%{opacity:1}
    
}

JS:

???BESOIN D'AIDE SVP!!!

menu gallery, thumbnail, ..

gallery css js bootstrap

Supprimer

Modérer

Signaler le message aux modérateurs