[PHPBB3] Variables dans html

[photoclic]

• Version du forum :
  PHPBB3
• Templates modifiés :
  oui
• Navigateur :
  Firefox

Bonjour à tous les milouziens,

J'ai besoin d'un cours de programmation, mais je ne sais pas si cela est réalisable.

Dans une page html que m'avait faite Philippe qui ressemble à ça et qui permet de faire défiler des images (3 dans cet exemple):

Code:


<meta name="viewport" content="width=device-width, initial-scale=1" />

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

/*auteur*/  
div.slideshow-container div.mySlides.fade span em {
color: #27AAB8;
display: block;text-align:center;
font-size: 16px;
font-family: Comic Sans MS;
}

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;
}
</style>

<div class="slideshow-container">
 
 <div class="mySlides fade">
        <a target="_blank" href="https://photoclic.forum-pro.fr/t23521-animaux-une-petite-bleue#295456"><img src="https://i.servimg.com/u/f31/19/32/37/01/21051410.jpg" /> </a><span><em>Lulu</em></span>                                                                                                                                                                                                                                                                                                                         
        </div>
  
 <div class="mySlides fade">
        <a target="_blank" href="https://photoclic.forum-pro.fr/t23558-animaux-vert-le-petit-petite-famille-d-oies#295821"><img src="https://i.servimg.com/u/f82/16/32/20/49/p1110823.jpg" /> </a><span><em>Bertidom</em></span>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         
 </div>
        
 <div class="mySlides fade">
 <a target="_blank" href="https://photoclic.forum-pro.fr/t23459-architecture_et_graphisme-reverie-au-bureau#294870" target="_blank"><img src="https://i.servimg.com/u/f30/12/83/63/12/20130514.jpg" /> </a><span><em>Patlaine</em></span>                                                                                                                                                                                                                                                                                                                   
        </div>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
        
        <span class="dot"></span>      <span class="dot"></span>      <span class="dot"></span>    
        
</div>

 <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, 3000); // Change image every 3 seconds
    }
    </script>


Serait-il possible d'avoir dans le div de la 1ière image par exemple à cette ligne :

Code:


<a target="_blank" href="https://photoclic.forum-pro.fr/t23521-animaux-une-petite-bleue#295456"><img src="https://i.servimg.com/u/f31/19/32/37/01/21051410.jpg" /> </a><span><em>Lulu</em></span>

A la place de :

Code:

href="https://photoclic.forum-pro.fr/t23521-animaux-une-petite-bleue#295456"

et:

Code:

img src="https://i.servimg.com/u/f31/19/32/37/01/21051410.jpg"

les variables:

Code:


var vlien1= "https://photoclic.forum-pro.fr/t23521-animaux-une-petite-bleue#295456";
Var vimage1= "https://i.servimg.com/u/f31/19/32/37/01/21051410.jpg";


ce qui donnerait un truc dans le genre:

Code:


<a target="_blank" href="vlien1"><img src="vimg1" /> </a><span><em>Lulu</em></span>

De même pour les 2 autres div.

Merci pour votre aide.

[Milouze14Fondateur]

Hello Serge,
cette page html devrait convenir,
il faut importer la librairie jQuery et ensuite donner des class différente pour chaque div (balise a et img)


Je dois me sauver, je verrais tout cela ce soir:

Tu peux tester ceci:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <style type="text/css">
    * {box-sizing:border-box;}
     
    body {
    font-family: Verdana,sans-serif;
    max-width: 350px;
    max-height: 350px;
    overflow:hidden !important;
        }
     
    .mySlides {display:none}

    /*auteur*/ 
    div.slideshow-container div.mySlides.fade span em {
    color: #27AAB8;
    display: block;text-align:center;
    font-size: 16px;
    font-family: Comic Sans MS;
    }

    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;
    }
    </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
  </head>

      <body>

<script>
$(function(){
  //premier envoi
var vlien1= "https://photoclic.forum-pro.fr/t23521-animaux-une-petite-bleue#295456";
var vimage1= "https://i.servimg.com/u/f31/19/32/37/01/21051410.jpg";
$('.vlien1').attr('href',vlien1);
$('.vimage1').attr('src',vimage1);
  //deuxieme envoi
var vlien2= "https://photoclic.forum-pro.fr/t23558-animaux-vert-le-petit-petite-famille-d-oies#295821";
var vimage2= "https://i.servimg.com/u/f82/16/32/20/49/p1110823.jpg";
$('.vlien2').attr('href',vlien2);
$('.vimage2').attr('src',vimage2);
 
  //troisieme envoi
var vlien3= "https://photoclic.forum-pro.fr/t23459-architecture_et_graphisme-reverie-au-bureau#294870";
var vimage3= "https://i.servimg.com/u/f30/12/83/63/12/20130514.jpg";
$('.vlien3').attr('href',vlien3);
$('.vimage3').attr('src',vimage3);
 
 
 
  });
 
</script>
    <div class="slideshow-container">
   
    <div class="mySlides fade">
 <a target="_blank" href="" class="vlien1">
  <img class="vimage1"src="" /> </a><span><em>Lulu</em></span>                                                                                                                                                                                                                                                                                                                 
            </div>
     
    <div class="mySlides fade">
<a target="_blank" href="" class="vlien2">
  <img class="vimage2"src="" /> </a><span><em>Bertidom</em></span>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
    </div>
           
    <div class="mySlides fade">
<a target="_blank" href="" class="vlien3">
  <img class="vimage3"src="" /> </a><span><em>Patlaine</em></span>                                                                                                                                                                                                                                                                                                                 
            </div>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
           
            <span class="dot"></span>      <span class="dot"></span>      <span class="dot"></span>   
           
    </div>

    <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, 3000); // Change image every 3 seconds
        }
        </script>

  </body>

</html>

[photoclic]

Bonjour Philippe,

ça fonctionne parfaitement l'ami 

Un grand merci pour ce cours.

[Milouze14Fondateur]

Re Serge,
j’en conclus que tu n’as besoin d’avoir des explications

[photoclic]

Re Phil,

J'ai bien tout compris.
Je me doutais qu'il fallait pour les variables passer par du JS (javanais) pour les définir et tu parles cette langue couramment et moi pas du tout  

J'ai vu aussi ton complément html.

Je te remercie beaucoup Phil et je passe en résolu.

[Milouze14Fondateur]

De rien cher ami .

Hello


Sujet résolu et déplacé dans le forum adéquate

A bientôt pour une prochaine demande