Connexion

Récupérer mon mot de passe

Derniers sujets
» [TOUTES VERSIONS] Afficher un texte dans l'éditeur avec transition
par chrisnvidia Aujourd'hui à 8:00

» [TOUTES VERSIONS] Recherche de texte dans les templates
par Morane Sam 25 Jan 2020 - 15:56

» *RESOLU*[PHPBB2] Lien d'un message spécifique dans un topic
par Milouze14 Ven 24 Jan 2020 - 18:40

» *RESOLU*[EDGE] Tags sur la page d'accueil
par Milouze14 Mer 22 Jan 2020 - 17:33

» histoire du Jour sans fin
par Quad Daniel Mer 22 Jan 2020 - 8:03

» [PUNBB] Module de connexion type Forumactif
par soleda Lun 20 Jan 2020 - 16:05

» *RESOLU*[PHPBB2] Problème des membres non inscrits sur le Tchatt:
par Milouze14 Lun 20 Jan 2020 - 14:59

» [TOUTES VERSIONS sauf AwesomeBB] Ajouter une limite de caractères à la réponse rapide..
par Splash Sam 18 Jan 2020 - 10:25

» *CORBEILLE*[PHPBB2] Echange de trafic modifié en recherche interne inopérant
par Milouze14 Ven 17 Jan 2020 - 19:04

» [AWESOMEBB]Ajouter une limite de caractères à la réponse rapide..
par Milouze14 Ven 17 Jan 2020 - 16:28

» [TOUTES VERSIONS]Visualiser le mot de passe
par soleda Ven 17 Jan 2020 - 6:00

» *RESOLU*[PHPBB2] Nouveaux BBcode pour le TchatBox :
par Milouze14 Mer 15 Jan 2020 - 18:08

» *RESOLU*[PHPBB3] Bouton à Smileys
par Milouze14 Mer 15 Jan 2020 - 11:23

» Histoire de Blondes Sans Fin
par Quad Daniel Mar 14 Jan 2020 - 12:48

» [AWESOMEBB]Afficher les widgets à droite
par Splash Mar 14 Jan 2020 - 8:21

» [AWESOMEBB] Widget "Derniers Sujets"
par Milouze14 Mar 14 Jan 2020 - 7:20

» *RESOLU*[PHPBB3] Bouton à Smileys
par Milouze14 Sam 11 Jan 2020 - 16:13

» *RESOLU*[AWESOMEBB] Nombre de caractères restant sur les nouveaux sujets
par Milouze14 Sam 11 Jan 2020 - 15:55

» *RESOLU*[PHPBB3] Bouton avec menu déroulant
par Milouze14 Sam 11 Jan 2020 - 15:52

» C’est fort de calva !
par Quad Daniel Sam 11 Jan 2020 - 10:14

*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



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