Dans page html choix Css en fonction de la page

[photoclic]

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.

[Milouze14]

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

Code:


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

}



a++

[photoclic]

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]

Petit up.

[Milouze14]

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 .
a++

[photoclic]

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.

[Milouze14]

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

a++

[photoclic]

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.

[Milouze14]

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++

[photoclic]

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.

[Milouze14]

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

a++

[photoclic]

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.

[chattigre]

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 !

[photoclic]

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
Un grand merci pour ton aide.

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

[chattigre]

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

[photoclic]

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.