Aperçu du thème X
Connexion

Récupérer mon mot de passe

Derniers sujets
» *RESOLU*[PHPBB3] Cadre des messages dans un sujet
par Milouze14 Aujourd'hui à 18:43

» [BESTOF] Supprimer le qui est en ligne sur la droite
par Milouze14 Aujourd'hui à 10:14

» *RESOLU*[PHPBB3] Message au dessus de l'éditeur
par Milouze14 Hier à 11:56

» *RESOLU*[PHPBB2] Fenetres en haut du forum suite
par Milouze14 Mar 31 Mar 2020 - 19:39

» *RESOLU*[PHPBB3] Smiley dans miniatures
par Milouze14 Sam 28 Mar 2020 - 18:23

» [PHPBB2] Petites précisions script remplace terme invité
par Milouze14 Sam 28 Mar 2020 - 18:22

» [PHPBB2] Remplacer le mot Invité
par Mi Neth Sam 28 Mar 2020 - 14:42

» [TOUTES VERSIONS] Edition rapide
par Mi Neth Ven 27 Mar 2020 - 13:05

» [TOUTES VERSIONS] Recherche de texte dans les templates
par Mi Neth Jeu 26 Mar 2020 - 17:07

» [PHPBB3] Cacher les boutons citer et multi-citation pour un membre spécifique
par Milouze14 Jeu 26 Mar 2020 - 15:53

» [PHPBB2] Descendre des infos dans le profil simple,
par Milouze14 Mar 24 Mar 2020 - 15:26

» [PHPBB2] Modifier un menu section membres
par Milouze14 Sam 21 Mar 2020 - 15:06

» *RESOLU*[PHPBB3] Modifier couleur titre de colonne dans les catégories
par Milouze14 Ven 20 Mar 2020 - 18:33

» *RESOLU*[PHPBB3] Miniatures sur profil
par Milouze14 Ven 20 Mar 2020 - 18:30

» *RESOLU*[PHPBB2] Message automatique au déplacement d'un sujet
par Milouze14 Ven 20 Mar 2020 - 11:22

» *RESOLU*[PHPBB3] Bouton Favoris sous l'avatar
par Milouze14 Dim 15 Mar 2020 - 5:57

» *RESOLU*[PHPBB3] Bouton photos dans Phototest
par Milouze14 Dim 15 Mar 2020 - 5:56

» [AWESOMEBB] Ajouter son copyright
par christ77000 Jeu 12 Mar 2020 - 14:30

» [PHPBB2] Menu déroulant et Profil Rechercher et Nouveau M.P séparé
par Ptite_Perle Mer 11 Mar 2020 - 18:28

» [PHPBB2]Afficher les statistiques dans la liste des membres
par christ77000 Mer 11 Mar 2020 - 16:26

*RESOLU*[PHPBB3] Récup images d'une page html

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

photoclic
photoclic
Milouzien

Messagephotoclic le Sam 4 Jan 2020 - 23:48

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

J'ai sur mon forum une page html qui m'a été écrite par Philippe, qui présente des photos sous forme de diaporama.
Cela fonctionne à merveille.

Serait-il possible en modifiant le script de cette page d'avoir dans un sujet les photos présentes dans ce diaporama les unes au dessous des autres et numérotées?

(Ce sujet me servirait ensuite pour organiser un sondage).

La page HTML:
Code:

<meta content="width=device-width, initial-scale=1" name="viewport" />    <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;
}  
  

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



   /* On smaller screens, decrease text size */
    @media only screen and (max-width: 300px;) {
      .text {font-size: 11px;}
    }
    </style>                            
<div class="slideshow-container">
    
 <div class="mySlides fade">
                                                                                                                                                                                                                                                         <a href="https://photoclic.forum-pro.fr/t21453-animaux-la-gourmande#" target="_blank"><img src="https://i.servimg.com/u/f13/18/70/41/54/la_gou11.jpg" style="border: 4px white;border-style: ridge;display: block;margin-left: auto;margin-right: auto;max-height:210px;max-width:320px;" /> </a><span style="display: block;text-align:center;font-size: 16px;font-family: Comic Sans MS;color: #3b699c;"><em>Guénolé</em></span>                                                                                                                                                                                                                                                                                                              
 </div>
      
 <div class="mySlides fade">
                                                                                                                                                                                                                                                         <a href="https://photoclic.forum-pro.fr/t21422-macro_et_proxy-fleur-rose-eglantier#" target="_blank"><img src="https://i.servimg.com/u/f12/14/45/70/73/dsc_5611.jpg" style="border: 4px white;border-style: ridge;display: block;margin-left: auto;margin-right: auto;max-height:210px;max-width:320px;" /> </a><span style="display: block;text-align:center;font-size: 16px;font-family: Comic Sans MS;color: #3b699c;"><em>chassefoudre</em></span>                                                                                                                                                                                                                                                                                                              
 </div>
        
 <div class="mySlides fade">
                                                                                                                                                                                                                                                       <a href="https://photoclic.forum-pro.fr/t21279-portraits-il-balayait-je-passais-par-la#" target="_blank"><img src="https://i.servimg.com/u/f54/12/36/17/88/p1180611.jpg" style="border: 4px white;border-style: ridge;display: block;margin-left: auto;margin-right: auto;max-height:210px;max-width:320px;" /> </a><span style="display: block;text-align:center;font-size: 16px;font-family: Comic Sans MS;color: #3b699c;"><em>Ma Poule</em></span>                                                                                                                                                                                                                                                                                                            
 </div>
          
 <div class="mySlides fade">
                                                                                                                                                                                                                                                       <a href="https://photoclic.forum-pro.fr/t21265-portraits-wet-hair#274362" target="_blank"><img src="https://i.servimg.com/u/f77/19/43/10/81/114.jpg" style="border: 4px white;border-style: ridge;display: block;margin-left: auto;margin-right: auto;max-height:210px;max-width:320px;" /> </a><span style="display: block;text-align:center;font-size: 16px;font-family: Comic Sans MS;color: #3b699c;"><em>Indigoblue</em></span>                                                                                                                                                                                                                                                                                                            
 </div>
              
 <div class="mySlides fade">
                                                                                                                                                                                                                                                        <a target="_blank" href="https://photoclic.forum-pro.fr/t21247-paysages-le-vercors#274174"><img style="border: 4px white;border-style: ridge;display: block;margin-left: auto;margin-right: auto;max-height:210px;max-width:320px;" src="https://i.servimg.com/u/f95/20/06/12/19/1000_d88.jpg" /> </a><span style="display: block;text-align:center;font-size: 16px;font-family: Comic Sans MS;color: #3b699c;"><em>Fax</em></span>                                                                                                                                                                                                                                                                                                              
 </div>
                
 <div class="mySlides fade">
                                                                                                                                                                                                                                                       <a href="https://photoclic.forum-pro.fr/t21159-varanasi-on-arrive#273414" target="_blank"><img src="https://i.servimg.com/u/f54/12/36/17/88/img_4510.jpg" style="border: 4px white;border-style: ridge;display: block;margin-left: auto;margin-right: auto;max-height:210px;max-width:320px;" /> </a><span style="display: block;text-align:center;font-size: 16px;font-family: Comic Sans MS;color: #3b699c;"><em>Ma Poule</em></span>                                                                                                                                                                                                                                                                                                            
 </div>
                  
 <div class="mySlides fade">
                                                                                                                                                                                                                                                       <a href="https://photoclic.forum-pro.fr/t21114-photo-gagnante-semaine-30#272952" target="_blank"><img src="https://i.servimg.com/u/f95/20/06/12/19/1000_d37.jpg" style="border: 4px white;border-style: ridge;display: block;margin-left: auto;margin-right: auto;max-height:210px;max-width:320px;" /> </a><span style="display: block;text-align:center;font-size: 16px;font-family: Comic Sans MS;color: #3b699c;"><em>Fax</em></span>                                                                                                                                                                                                                                                                                                            
 </div>
                    
 <div class="mySlides fade">
                                                                                                                                                                                                                                                       <a href="https://photoclic.forum-pro.fr/t21039-ramatuelle-au-petit-matin#" target="_blank"><img src="https://i.servimg.com/u/f95/20/06/12/19/1000_d13.jpg" style="border: 4px white;border-style: ridge;display: block;margin-left: auto;margin-right: auto;max-height:210px;max-width:320px;" /> </a><span style="display: block;text-align:center;font-size: 16px;font-family: Comic Sans MS;color: #3b699c;"><em>Fax</em></span>                                                                                                                                                                                                                                                                                                            
 </div>
                      
 <div class="mySlides fade">
                                                                                                                                                                                                                                                       <a href="https://photoclic.forum-pro.fr/t21062-panoramas-vik-i-myrdal-panorama-vers-dyrholaey#" target="_blank"><img src="https://i.servimg.com/u/f82/16/32/20/49/vzyk_z12.jpg" style="border: 4px white;border-style: ridge;display: block;margin-left: auto;margin-right: auto;max-height:210px;max-width:320px;" /> </a><span style="display: block;text-align:center;font-size: 16px;font-family: Comic Sans MS;color: #3b699c;"><em>Bertidom</em></span>                                                                                                                                                                                                                                                                                                            
 </div>
                        
 <div class="mySlides fade">
                                                                                                                                                                                                                                                     <a href="https://photoclic.forum-pro.fr/t20922-la-voyante-de-pattadakal#271327" target="_blank"><img src="https://i.servimg.com/u/f54/12/36/17/88/00000112.jpg" style="border: 4px white;border-style: ridge;display: block;margin-left: auto;margin-right: auto;max-height:210px;max-width:320px;" /> </a><span style="display: block;text-align:center;font-size: 16px;font-family: Comic Sans MS;color: #3b699c;"><em>Ma Poule</em></span>                                                                                                                                                                                                                                                                                                          
 </div>
                            
 <div class="mySlides fade">
                                                                                                                                                                                                                                                      <a target="_blank" href="https://photoclic.forum-pro.fr/t20885-paysages-breizhonie#270976"><img style="border: 4px white;border-style: ridge;display: block;margin-left: auto;margin-right: auto;max-height:210px;max-width:320px;" src="https://i.servimg.com/u/f41/15/75/39/21/p1050910.jpg" /> </a><span style="display: block;text-align:center;font-size: 16px;font-family: Comic Sans MS;color: #3b699c;"><em>Evinrude</em></span>                                                                                                                                                                                                                                                                                                            
 </div>
                                                                                                                                                                                                                                                     <span class="dot"></span>      <span class="dot"></span>      <span class="dot"></span>    <span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span><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, 4000); // Change image every 4 seconds
    }
    </script>


Merci pour votre aide.



Dernière édition par photoclic le Lun 6 Jan 2020 - 18:00, édité 1 fois
fascicularia
fascicularia
Milouzien

Messagefascicularia le Dim 5 Jan 2020 - 2:37

Bonjour Serge,
pour 10 images, il ne serait pas plus simple de faire un copier/coller des liens, de les insérer avec des balises img et de les numéroter ?

Simple question ou je n'ai pas compris la problématique.

photoclic
photoclic
Milouzien

Messagephotoclic le Dim 5 Jan 2020 - 20:00

Bonsoir Stéphane,

Tu as bien compris la problématique Stéphane.

Le html que j'ai mis comporte effectivement une dizaine d'image pour ne pas surcharger.

Mais le html que je vais utiliser qui est identique en comporte environ une cinquantaine.
(C'est à dire pour mon forum 1 photo gagnante par semaine sur 1 an, et c'est sur cette cinquantaine de photos que le sondage portera).

Si le script à remplacer dans le html est un truc compliqué, je ferais alors des copier/coller comme tu le suggères.  

fascicularia
fascicularia
Milouzien

Messagefascicularia le Dim 5 Jan 2020 - 23:39

Bonjour Serge ,
en rajoutant à chaque séquence html un numéro avec :

Code:
 <h1>le numéro </h1>


Par exemple :

Code:
 <div class="mySlides fade">
                                                                                                                                                                                                                                                        <a href="https://photoclic.forum-pro.fr/t21453-animaux-la-gourmande#" target="_blank"><img src="https://i.servimg.com/u/f13/18/70/41/54/la_gou11.jpg" style="border: 4px white;border-style: ridge;display: block;margin-left: auto;margin-right: auto;max-height:210px;max-width:320px;" /> </a><span style="display: block;text-align:center;font-size: 16px;font-family: Comic Sans MS;color: #3b699c;"><em>Guénolé</em><h1>1</h1></span>                                                                                                                                                                                                                                                                                                             
 </div>

et en appelant la page html en iframe dans un message ou en fournissant le lien ?

photoclic
photoclic
Milouzien

Messagephotoclic le Lun 6 Jan 2020 - 0:11

Bonsoir Stéphane,

Merci pour l’intérêt porté à cette demande

Alors pour le n° au dessus des photos,  je viens de me souvenir que cela se fait déjà automatiquement sur les sujets quand on poste une photo ou une image.

Par contre, dans le html en bas, il y a un script qui fait défiler l'ensemble des photos sous forme de diaporama.

Peut-être mettre l'iframe dans un sujet comme tu le préconises, en remplaçant le script actuel pour afficher le n° au dessus de la photo.
En retirant le .mySlides {display:none} du style, on a bien les photos les unes au dessus des autres mais elles ne sont pas numérotées.

Je suis peut-être complétement à coté de la plaque :-)


Milouze14
Milouze14
Fondateur

MessageMilouze14 le Lun 6 Jan 2020 - 17:02

Hello Serge et Stéphane,
alors à l'heure actuelle on ne peut pas récupérer la page html car le haute de page n'est pas activé je présume, alors on va tricher un peu et cocher "Voulez-vous utiliser le haut et le bas de page de votre forum ?"

Ensuite on masque tout dans le style entre les balises:
Code:
<style>
et
Code:
</style>
Déposes ceci:

Code:

#page-header,#page-footer,#left,#right,.inner{display:none!important;}
#wrap{width:0px!important;height:0px !important;background-color:transparent!important;};




N'oublies pas de publier Serge.

Ensuite on va créer le sujet (à ta guise)
puis dans le corps du message dépose ce code html:

Code:
<div id="M14_recup_html"></div>

Repères ensuite le lien de ta page html (enfin a partir de la barre oblique):

Ma page html se termine ainsi:
Code:

/h1-serge

Et le script ou tu déposeras le lien de ta page ici:
Code:
$.get('/h1-serge' , function(data){


Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.
Cocher  Sur les sujets

Déposer ceci:

Code:

$(function(){

$.get('/h1-serge' , function(data){
var number=0;
$(data).find('.slideshow-container').find('.mySlides').each(function(){
number+=$(this).find('img').length;
var img=$(this).find('img').attr('src');
var link=$(this).find('a[href]').attr('href');
$('#M14_recup_html').append('<div class="M14_cont-html"><span class="M14_number_html"><span>'+number+'</span></span><br /><a href="'+link+'"title="Voir le message"><img src="'+img+'"/></a></div>');
});});});

Penser a cliquer sur le bouton Valid

Puis pour finir la c.s.s:

Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajouter ceci:

Code:

/*L ID DANS LE MESSAGE*/
#M14_recup_html
{
border:3px solid #4cd8eb;
padding:5px;
width:400px;
background-color:white;
}

/*LE CONTENEUR DES IMAGES*/
.M14_cont-html
{
width:400px;
height:auto;
padding:5px;
border-bottom:3px dotted black;
text-align: center;
}
/*Les chiffres*/
.M14_number_html
{
border-radius: 16px;
height: 16px;
text-align: center;
width: 16px;
display: inline-block;
background:black;
margin-bottom: 3px;

}
.M14_number_html span{font-size: 11px;color:white;top: -2px;position: relative;}
/*Les images*/
.M14_cont-html img
{
max-width:300px;
max-height:300px;
margin-left:50px;
  
}

Penser a cliquer sur le bouton *RESOLU*[PHPBB3] Récup images d'une page html Sans_t10


Edit:
ce script affichera pour les invités un tag leurs suggérant de se connecter etc:
Code:
$(function(){

$.get('/h1-serge' , function(data){
var number=0;
$(data).find('.slideshow-container').find('.mySlides').each(function(){
number+=$(this).find('img').length;
var img=$(this).find('img').attr('src');
var link=$(this).find('a[href]').attr('href');
$('#M14_recup_html').append('<div class="M14_cont-html"><span class="M14_number_html"><span>'+number+'</span></span><br /><a href="'+link+'"title="Voir le message"><img src="'+img+'"/></a></div>');
if(!_userdata["session_logged_in"])
{
$('#M14_recup_html').html('<div id="M_noconnect"><div><h3>Message à l\'intention des invités</h3>Bonjour, <br><br><a href="/register" style="color:#993741"><img src="https://illiweb.com/fa/prosilver/icon_register.gif"> S\'inscrire</a> ou <a href="/login" style="color:#993741"> se connecter</a>  pour avoir accès à l\'ensemble du forum sans publicités,<br><br>ou pour poster vous-même une photo ou un commentaire. Merci.</div></div>');
}



});});});



Et voilou  hinhin




photoclic
photoclic
Milouzien

Messagephotoclic le Lun 6 Jan 2020 - 18:00

Bonsoir Philippe,

Un excellent travail que tu m'as fait là. Super!
Je n'imaginais pas cela ainsi avec un script externe.

Tout fonctionne parfaitement l'ami tape la

Je passe en résolu.

Milouze14
Milouze14
Fondateur

MessageMilouze14 le Lun 6 Jan 2020 - 18:14

N'est-ce pas, de plus tu as les liens pour chaque images,
j'avais oublié de le mentionner.


Hello


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

A bientôt pour une prochaine demande clin oeil





Le respect mutuel est le fondement de la véritable harmonie.(Dalaï Lama).

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

Sujets similaires

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

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