Sujet Précédent Sujet Suivant

Problème code html css javascript

Fermé
lyllouvpl - 20 mai 2022 à 15:37
 DoctorHow - 21 mai 2022 à 14:35
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!!!



Configuration: Windows / Firefox 100.0
A voir également:

1 réponse

Réponse 1 / 1
jordane45 Messages postés 38314 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
20 mai 2022 à 18:51
Bonjour,

Déjà, il serait bien de préciser les langages dans les balises de code
explications ( à lire entièrement) disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

Ensuite, il est d'usage de ne poser qu' UNE seule question par discussion... ( surtout quand ça mélange plusieurs technos/langages)
Par exemple, pour le point 1 il faudrait les poser dans le forum qui traite du CSS : https://forums.commentcamarche.net/forum/css-156

Pour le point 2 .. il faudrait expliquer en quoi ça ne marche pas .. et ce que signifie, pour toi, le faire marcher..

Pour le point 3: il existe des tonnes d'exemples de lightbox sur le net.. suffit d'en choisir un et d'essayer de l'adapter à ton besoin.

Pour le 4 : regarde le code source de la page que tu donnes en exemple, tu devrais pouvoir y trouver ce dont tu as besoin pour reproduire la même chose. A noter que tu devras sûrement repartir de leur structure html et non pas la tienne

Et enfin.. pour la 5 ... ne sachant pas comment sont faites tes autres pages .. comment tu détermines les filtres que tu peux y appliquer ... impossible en l'état de te répondre.
J'ai peur que le JS ne suffise pas et qu'il te faille, en plus, un peu de langage côté serveur ( du php ? )
Le tout en AJAX éventuellement...

Bref, trop de questions en une seule discussion
Pas assez d'explications
Et surtout.. ici on veut bien AIDER .. mais pas faire le travail à ta place. ( et on ne fournis pas de codes sources prêts à l'emploi .. pour ça tu as google & co .. )

0
lyllouvpl
20 mai 2022 à 19:19
ok je demande des exemples ou tutos
0
DoctorHow > lyllouvpl
Modifié le 21 mai 2022 à 14:37
Salut,
un exemple pour détecter le scroll:
https://developer.mozilla.org/fr/docs/Web/API/Document/scroll_event

L'idée est bien de décomposer chaque action qui doit être faite à la suite pour obtenir ce que l'on veut(un algorithme plus ou moins).
Une fois détectée le scroll on obtient par exemple la valeur de ce scroll(positive ou négative selon le sens, le déplacement -en pixels il me semble- à partir de la dernière position connue) et donc il faut reporter calculer ou traiter cette valeur à sa signification ou ce qu'elle implique(et ratios éventuels).
Par exemple : si le scroll est positif passé à l'image suivante d'une liste(donc implique d'avoir une liste ET de connaître quelle est l'image affichée en cours) et inversement(scroll négatif) la précédente image d'une liste pour la changer dans ce qui est affcihé.

Exemple de comment changer le contenu d'un élément:
https://developer.mozilla.org/fr/docs/Web/API/Element/innerHTML
ou simplement un attribut HTML d'un élément:
https://developer.mozilla.org/fr/docs/Web/API/Element/setAttribute
Pour le cas d'une image cela revient à changer l'attribut SRC contenant l'adresse de l'image à afficher.

Si vous comprenez ce qui est expliqué ci dessus vous avez compris le principe d'une lightbox, il ne reste plus qu'à le faire(ou utiliser une lightbox déjà faite si vous n'avez pas envie de la développer même si c'est relativement simple).
Concrètement une lightbox c'est la possibilité de changer les images d'une liste qui sont affichées dans une zone de visionnage.

Dans le cas de faire défiler la partie affichée de la page comme l'exemple que vous montrez ce n'est pas une lightbox(diaporama ou visionneuse d'images en français) mais autre chose.
Obtenue par exemple en changeant la position du container global des images qui sont affichées par la page en fonction du mouvement de la molette de la souris.
Ce qui implique une position de base(0 par exemple) et une limite(la largeur cumulée de toutes les images).


Effectivement de nombreuses questions, il serait plus fructueux pour vous de vous concentrer sur une chose à la fois pour bien le comprendre et le mettre en pratique.
La réponse de toute façon sera:
  • apprenez les possibilités et fonctionnement des technologies qui vous manquent(un exemple doit servir à cela car il est illusoire de croire que vous pouvez faire un copier coller sans comprendre d'un contexte pour l'adapter à un autre) et la logique(les différentes étapes/algorithme) qui sont employées.


On peut vous aider en vous orientant sur ce qui se fait et comment cela se fait mais on peut pas apprendre pour vous.
Par exmple pour faire une visionneuse d'images j'ai détaillé le principe et les outils qui peuvent être utilisés. Ce n'est pas exhaustif bien sûr et il n'y a pas une bonne méthode mais des actions à faire en fonction des besoins exprimées:
appuyer sur un bouton "'suivant" ou détecter le mouvement de la molette de la souris ou d'une scrollbar comme conditions pour changer une image de la page sont différentes mais au final elle impliquent pour une lightbox de pouvoir changer une image affichée par une autre.
Je vous ait montré un exemple pour le faire en changeant l'attribut SRC qui relie par hypertexte l'adresse de l'image affichée.
Il y a bien d'autres façons de faire, par exemple : supprimer l'image et en ajouter une nouvelle en lieu et place(voir donc createElement, les attributs nécessaires d'une image en HTML, les méthodes removeElement et appendChild qui permettent respectueusement d'enlever un élément de la page et d'ajouter un élément( dans son container).

Plus généralement la manipulation du DOM avec JavaScript.
Même chose si vos besoins nécessitent autre chose.
Dans le cas de l'exemple du défilement d'une ligne d'images cela peut se faire, la plus simple façon donc probablement la meilleure, en changeant le positionnement en CSS.
Il vous faut donc être au point sur le positionnement CSS et comment le changer avec JavaScript et après tout roule^^

Une vision d'ensemble avant d'aller dans le particulier me semble plus propice à ce que vous puissiez faire ce que vous voulez, commencez par cela plutôt qu'un point particulier qui ne vous permet ni de comprendre l'ensemble ni la méthode qui sera forcément particulière: à la demande et ses particularités, à vos contenus et spécifités.
Si vous comprenez l'ensemble vous pouvez ensuite aller(rechercher et trouver comment) dans le détails. Le détail ne vous apportera pas cette compréhension et ne permettra pas que vous puissiez adapter cela à différents cas(votre page et son HTML particulier, l'interaction avec tel ou tel bouton de la souris ou un bouton dans la page qui doit conduire au même résultat).

Donc plutôt qu'un tuto particulier vous devez comprendre les étapes et cela passe par un apprentissage global ou plutôt des bases qui explique les étapes.

Pour les tutos plus spécifiques si c'est à votre portée(donc que vous avez les bases et le raisonnement derrière) vous pouvez faire ce genre de recherches:

https://duckduckgo.com/?q=cr%C3%A9er+un+diaporama+javascript

https://duckduckgo.com/?q=positionnement+CSS
0

Discussions similaires

code d'activation GTA 5 steam
ylyes59 -
David -

6 réponses
Code de renvoi d'appel : Ooredo, Mobilis...
midoou07 -
Camille -

13 réponses
Codes bateaux et avion GTA vice city Stories
matt3610 -
Diglo -

30 réponses