Dans page html choix Css en fonction de la page

3 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Dans page html choix Css en fonction de la page

Message par photoclic Lun 20 Fév 2023 - 21:11

Bonjour,

J'utilise sur ma page d'accueil une page html qui affiche un diaporama de photos.

Code:

<title>photo Best-of</title><meta name="Photo Best-of forum photoclic" content="width=device-width, initial-scale=1" />              

<style>
* {box-sizing:border-box;}
    body {
      font-family: Verdana,sans-serif;
          max-width: 450px;
          max-height: 450px;
      overflow:hidden !important;
    }
  
    .mySlides {display:none}

/* Slideshow container */
    .slideshow-container {
      max-width: 500px;
      position: relative;
      margin: auto;
    }

 /* Titre slideshow*/
.nametext {
 font-size: 18px;
 font-family: Comic Sans MS;
 color: #3b699c;
 padding: 8px 12px;
 position: relative;
 text-align:center;
}  

/*auteurs*/  
div.slideshow-container div.mySlides.fade span em {
color: #27AAB8;
display: block;text-align:center;
font-size: 16px;
font-family: Comic Sans MS;
}
/*photos*/
div.mySlides.fade a img {
border: 4px white;
border-style: ridge;
display: block;
margin-left: auto;
margin-right: auto;
max-height:210px;
max-width:320px;
}

/* Fading animation */
    .fade {
      -webkit-animation-name: fade;
      -webkit-animation-duration: 5s;
      animation-name: fade;
      animation-duration: 5s;
    }

    @-webkit-keyframes fade {
      from {opacity: .5;}
      to {opacity: 1;}
    }

    @keyframes fade {
      from {opacity: .5;}
      to {opacity: 1;}
    }
  
</style>

<div class="slideshow-container">
                  
 <div class="mySlides fade">
 <a href="https://photoclic.forum-pro.fr/t27081-animaux-un-soir-aux-cinq-terres-ajout-v2#336602" target="_blank"><img src="https://i.servimg.com/u/f30/12/83/63/12/imgp1711.jpg" /></a><span><em>Patlaine</em></span>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
 </div>
                    
 <div class="mySlides fade">
 <a href="https://photoclic.forum-pro.fr/t27079-paysages-la-tombee-du-jour#336588" target="_blank"><img src="https://i.servimg.com/u/f53/19/59/79/32/la_tom10.jpg" /></a><span><em>Tomanic</em></span>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
 </div>
            
</div>
</span><span class="dot"></span><span class="dot"></span>    

<script>
    var slideIndex = 0;
    showSlides();

    function showSlides() {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        var dots = document.getElementsByClassName("dot");
        for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";  
        }
        slideIndex++;
        if (slideIndex > slides.length) {slideIndex = 1}    
        for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex-1].style.display = "block";  
        dots[slideIndex-1].className += " active";
        setTimeout(showSlides, 4000); // Change image every 4 seconds
    }
    </script>


La taille de la photo est définie dans le css:
Code:

max-height:210px;
max-width:320px;

Serait-il possible d'avoir cette taille max pour la photo quand la page html est mise sur la page d'accueil, et d'avoir une autre taille max de la photo quand la page html est mise sur le portail.
Pour le portail, ce serait:
Code:

max-height:180px;
max-width:160px;

Merci pour votre aide.


Dernière édition par photoclic le Ven 24 Fév 2023 - 23:24, édité 1 fois
photoclic

photoclic
Membre habitué

Masculin
Messages : 1350
Inscrit(e) le : 20/11/2015

http://photoclic.forum-pro.fr/
photoclic a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Dans page html choix Css en fonction de la page

Message par Milouze14 Mar 21 Fév 2023 - 5:51

Salut Serge,
sur ton portail tu as une div ayant cet ID ==> M14_showIframe ou se trouve ton slide Wink .
tu peux essayer avec ce style


Code:

#M14_showIframe .mySlides.fade a img
{
max-height:180px!important;
max-width:160px!important;

}



a++
Milouze14

Milouze14
***

Masculin
Messages : 147
Inscrit(e) le : 03/12/2021

https://le-site-milouze14.bbactif.com
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Dans page html choix Css en fonction de la page

Message par photoclic Mar 21 Fév 2023 - 11:09

Bonjour Philippe,

Merci pour ton aide.

En fait actuellement j'ai dupliqué cette page html.
Sur l'une j'ai le css correspondant pout la page d'accueil et sur l'autre le css correspondant pour le portail.

L'objet de cette demande, serait de n'avoir qu'une seule page html avec un script à l'intérieur qui choisit l'un ou l'autre css en fonction de la page. Je ne sais pas si cela est possible.
ça éviterait lorsque j'ajoute ou retire une photo d'avoir à le faire 2 fois.
photoclic

photoclic
Membre habitué

Masculin
Messages : 1350
Inscrit(e) le : 20/11/2015

http://photoclic.forum-pro.fr/
photoclic a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Dans page html choix Css en fonction de la page

Message par photoclic Mer 22 Fév 2023 - 21:36

Petit up.
photoclic

photoclic
Membre habitué

Masculin
Messages : 1350
Inscrit(e) le : 20/11/2015

http://photoclic.forum-pro.fr/
photoclic a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Dans page html choix Css en fonction de la page

Message par Milouze14 Jeu 23 Fév 2023 - 18:32

Salut Serge,
hum, le mieux a faire et de cloner l'actuelle et de créer une autre page html
mon ami et de mettre la bonne résolution correspondante à tes souhaits d'affichage Wink .
a++
Milouze14

Milouze14
***

Masculin
Messages : 147
Inscrit(e) le : 03/12/2021

https://le-site-milouze14.bbactif.com
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Dans page html choix Css en fonction de la page

Message par photoclic Jeu 23 Fév 2023 - 18:38

Bonjour Philippe,
Merci pour ton retour.

le mieux a faire et de cloner l'actuelle et de créer une autre page html
C'est le cas actuellement. Je vais donc laisser ainsi, s'il n'y a pas d'autre solution.

Bonne soirée Phil.
photoclic

photoclic
Membre habitué

Masculin
Messages : 1350
Inscrit(e) le : 20/11/2015

http://photoclic.forum-pro.fr/
photoclic a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Dans page html choix Css en fonction de la page

Message par Milouze14 Jeu 23 Fév 2023 - 18:42

Re,
je voulais dire de créer autant de page en fonction des endroits désirés Serge Wink .

a++
Milouze14

Milouze14
***

Masculin
Messages : 147
Inscrit(e) le : 03/12/2021

https://le-site-milouze14.bbactif.com
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Dans page html choix Css en fonction de la page

Message par photoclic Jeu 23 Fév 2023 - 18:54

Oui, si j'ai bien compris, c'est bien ce que j'ai aujourd'hui.
Une page html avec une taille d'image en style appelée sur la page d'accueil , et une autre page html avec une autre taille d'image en style appelée dans un widget du portail .
Chaque fois que j'ajoute une image dans une page, je répète l'opération dans l'autre page.
C'est ce que je souhaitais éviter en fait.
photoclic

photoclic
Membre habitué

Masculin
Messages : 1350
Inscrit(e) le : 20/11/2015

http://photoclic.forum-pro.fr/
photoclic a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Dans page html choix Css en fonction de la page

Message par Milouze14 Jeu 23 Fév 2023 - 19:34

Re,

je reviens sur ton message initial:
https://forum.forumactif.com/t408363-dans-page-html-choix-css-en-fonction-de-la-page#3403053

Tu utilises donc une iframe pour les diverses parties de ton forum avec la même page html .
Est-ce bien cela ?

a++
Milouze14

Milouze14
***

Masculin
Messages : 147
Inscrit(e) le : 03/12/2021

https://le-site-milouze14.bbactif.com
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Dans page html choix Css en fonction de la page

Message par photoclic Jeu 23 Fév 2023 - 21:16

Oui, c'est bien ça Philippe.
J'ai actuellement 2 pages html identiques (h7 et h17) (au bout de style suivant près) avec à l'intérieur:
. le style suivant pour les images de la page d'accueil:
Code:

div.mySlides.fade a img {
max-height:210px;
max-width:320px;
}
. et le style suivant pour les images du portail:
Code:

div.mySlides.fade a img {
max-height:180px;
max-width:160px;
}


Avec sur la page d'accueil dans les généralités la page html h7-slideshow.
Code:

<iframe style="width:350px;border:none;height: 280px;" src="https://photoclic.forum-pro.fr/h7-slideshow"></iframe>

Et dans un widget du portail la page html h17-best-of-annee-et-widget-portail
Code:

<iframe style="display: block;margin:auto;height: 220px;width: 180px;padding: 2px;border: none; " src="https://photoclic.forum-pro.fr/h17-best-of-annee-et-widget-portail"> </iframe>                                  
 </div>

Et le but de cette demande était l'éventuelle possibilité de n'avoir qu'une seule de ces 2 pages avec à l'intérieur un éventuel script qui change ces bouts de style en fonction de la page.
photoclic

photoclic
Membre habitué

Masculin
Messages : 1350
Inscrit(e) le : 20/11/2015

http://photoclic.forum-pro.fr/
photoclic a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Dans page html choix Css en fonction de la page

Message par Milouze14 Ven 24 Fév 2023 - 18:40

Salut Serge,
je doute qu'un script puisse faire quelque chose sur le contenu d'une Iframe mon ami Wink .

a++
Milouze14

Milouze14
***

Masculin
Messages : 147
Inscrit(e) le : 03/12/2021

https://le-site-milouze14.bbactif.com
Milouze14 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Dans page html choix Css en fonction de la page

Message par photoclic Ven 24 Fév 2023 - 19:03

Bonsoir Philippe,

Ah dommage, comme il y a déjà un script dans l'iframe, je pensais qu'il pouvait y en avoir un autre ou un complément de l'existant.
Tant pis et merci Philippe pour t'être penché sur le sujet; je vais donc garder les 2 pages html.
photoclic

photoclic
Membre habitué

Masculin
Messages : 1350
Inscrit(e) le : 20/11/2015

http://photoclic.forum-pro.fr/
photoclic a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Dans page html choix Css en fonction de la page

Message par chattigre Ven 24 Fév 2023 - 19:52

Bonjour,

Normalement, on peut accéder aux propriétés de la page parente dans le cas d'une iframe au moins du même domaine.

Code:
$(function() {
  var pw = parent.location.pathname;
  if(pw == '/portal') {
    $("div.mySlides").addClass("slides-portal");
  }
  else if(pw == '/') {
    $("div.mySlides").addClass("slides-home");
  }
});
A placer entre balises <script> dans la page HTML en question...

Ensuite, pour le CSS :
Code:
div.mySlides.slides-portal.fade a img {
max-height:180px;
max-width:160px;
}
div.mySlides.slides-home.fade a img {
max-height:210px;
max-width:320px;
}
Une autre méthode serait aussi d'ajouter un paramètre dans l'URL de la page incluse (iframe) et de détecter ledit paramètre en JS pour changer le style en conséquence...

Bonne journée !
chattigre

chattigre
Aidactif
Aidactif

Masculin
Messages : 3584
Inscrit(e) le : 17/04/2019

https://test1-chattigre.forumactif.fr
chattigre a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Dans page html choix Css en fonction de la page

Message par photoclic Ven 24 Fév 2023 - 21:58

Bonsoir Chattigre,

Un souci aux premiers essais car il m'a fallu ajouter dans la page html le code suivant pour que le JS fonctionne sans défaut:
Code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Maintenant c'est tout bon bounce
Un grand merci pour ton aide.

Je valide mon essai et passerai en résolu ensuite si tu veux bien.
photoclic

photoclic
Membre habitué

Masculin
Messages : 1350
Inscrit(e) le : 20/11/2015

http://photoclic.forum-pro.fr/
photoclic a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Dans page html choix Css en fonction de la page

Message par chattigre Ven 24 Fév 2023 - 22:20

Bonjour,

Oui effectivement pardon j'étais dans l'optique d'une page avec haut et bas de page par défaut (dans laquelle JQuery aurait déjà été inclus automatiquement par FA.)

Avec ta ligne rajoutée (avant le script) ça doit bien fonctionner normalement.

Bonne journée
chattigre

chattigre
Aidactif
Aidactif

Masculin
Messages : 3584
Inscrit(e) le : 17/04/2019

https://test1-chattigre.forumactif.fr
chattigre a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Dans page html choix Css en fonction de la page

Message par photoclic Ven 24 Fév 2023 - 22:27

Oui, ça fonctionne parfaitement.

Un grand merci à nouveau à toi, à Philippe et à tous les travailleurs de l'ombre qui font que nos forums s'améliorent.
photoclic

photoclic
Membre habitué

Masculin
Messages : 1350
Inscrit(e) le : 20/11/2015

http://photoclic.forum-pro.fr/
photoclic a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum