Welcome

Halloween Autres

Annonces Défilantes Nuit

Halloween, LS codage Forumactif Templates & Eléments Autres Annonces défilantes Nuit

PHPBB2

Optimisé Un bloc à placer avant votre page d'accueil. Les liens concernent des liens utiles. Système de slider pour faire défiler des images de nouveautés ou d'évènements. Un index complet, une liste des sujets, un message & profil ainsi qu'un profil sont également disponibles.
Réalisé pour le forum :

Retour

Codage Annonces défilantes Nuit Halloween Forumactif

Pour ajouter la police

Pour ajouter la police Oswald, coller le code suivant dans le template "Overall_header", avant la ligne 18.

CSS

/************************************************ BLOC PRECEDANT LA PAGE D ACCUEIL ************************************************/
.informations_supplementaires {
        margin: 2% auto;
        text-align: center;
  	width: 660px;
  	font-family: 'Oswald', sans-serif;
        color: #8e8f8d;
        line-height: 1.5;
        font-size: 14px;
}

.is_liens {
        float: left;
        width: 10.7%;
        box-sizing: border-box;
        padding: 4% 0 0;
}

.is_liens a {
        background: rgba(92,92,89,.2);
        border-radius: 5px;
        color: #807e7e !important;
        display: block;
        letter-spacing: 1px;
        margin: 3% 0;
        text-transform: uppercase;
}

.is_liens a:hover {
  	background: #121a15;
  	font-style: italic;
}

.content_slider {
        background: url(https://i.imgur.com/4EgZvBh.png);
        box-sizing: border-box;
        float: left;
        height: 150px;
        margin: 0 1%;
        padding: 3% 2.5%;
        width: 500px;
}

/* SLIDER */
.slideshow, .slide {
        width: 450px;
        height: 115px;
}

.slideshow {
        background: none;
        margin: 0;
        overflow: hidden;
  	border-radius: 25px;
}

.slideshow div {
        position: relative;
        top: 0;
        left: 0;
}
  
.slide {
        margin: auto;
        overflow: auto;
        display: inline-block;
        vertical-align: middle;
}

.slide img {
  	width: 450px;
  	height: 115px;
  	object-fit: cover;
}

.informations_supplementaires::after {
        display: block;
        content: "";
        clear: both;
}

a.credits_annonces {
        font-size: 10px;
        text-align: right;
        display: block;
        color: #ddd;
}

Index_body

A insérer à la ligne 2 du template, juste après "JAVASCRIPT".

<div class="informations_supplementaires">
  	<div class="is_liens">
          	<a href="#">
                	Lien
          	</a>
          
          	<a href="#">
                	Lien
          	</a>
          	
          	<a href="#">
                	Lien
          	</a>
          
          	<a href="#">
                	Lien
          	</a>
  	</div>
  
  	<div class="content_slider">
          	<div id="slideshow" class="slideshow">                
			<div id="slideshow-container">                         
				<div class="slide">
					<a href="#">
                                             	<img src="https://imgur.com/qbaD4Sv.gif" alt="" />
                                  	</a>
				</div>
				                                                         
				<div class="slide">
					<a href="#">
                                             	<img src="https://imgur.com/qbaD4Sv.gif" alt="" />
                                  	</a>
				</div>
                          
                          	<div class="slide">
					<a href="#">
                                             	<img src="https://imgur.com/qbaD4Sv.gif" alt="" />
                                  	</a>
				</div>
			</div>  
          	</div>
	</div>
  
  	<div class="is_liens">
          	<a href="#">
                	Lien
          	</a>
          
          	<a href="#">
                	Lien
          	</a>
          	
          	<a href="#">
                	Lien
          	</a>
          
          	<a href="#">
                	Lien
          	</a>
  	</div>
  
  	<a href="http://ls-halloween.fr/" target="_blank" class="credits_annonces">
          	Halloween
  	</a>
</div>

Javascript

Créer un nouveau Javascript, à afficher sur l'index du nom de votre choix.

$(function () {
    //VARIABLES MODIFIABLES
    var delaiSwitch    = 5000;                    // Délai (en ms) d'affichage d'un slide
    var delaiTransition = 1000;                    // Délai (en ms) de l'animation de transition
    var direction      = 'left';                  // Sens (left ou right) du défilement
    var idSlideshow    = '#slideshow';            // ID du slideshow
    var idContainer    = '#slideshow-container';  // ID du container
  
    //VARIABLES SYSTEME
    var slideshowWidth  = parseInt($(idSlideshow).css('width'));
    var slideshowHeight  = parseInt($(idSlideshow).css('height'));
    var nbSlides        = $(idContainer+' > .slide').length;
  
    //ADAPTE LA TAILLE DU CONTENEUR AU NOMBRE DE BLOCS QU'IL CONTIENT
    $(idContainer).css('width', slideshowWidth*nbSlides+'px');

//REDEFINIT LE CONTENU POUR SUPPRIMER LES EVENTUELS ECARTS DUS AUX BORDERS
    if(direction==='right') {
        var decalageLeft = -slideshowWidth*(nbSlides-1);
        $(idContainer).css('left', decalageLeft+'px');
      
        $(idContainer+' > .slide').each(function() {
            var el = $(this).remove();
            $(idContainer).prepend(el);
        }, this);
    } else {
        $(idContainer+' > .slide').each(function() {
            var el = $(this).remove();
            $(idContainer).append(el);
        }, this);
    }
  
    //ADAPTE LA TAILLE DES IMAGES AUX DIMENSIONS DU SLIDESHOW
    $(idSlideshow+' img').css('max-width', slideshowWidth);
    $(idSlideshow+' img').css('max-height', slideshowHeight);
  
    //LANCEMENT DE L'ANIMATION
    setInterval(function() {
        slideshow()
    }, delaiSwitch);
  
    //FONCTION DE DEFILEMENT
    function slideshow() {
        var compteur = 0;      // Compte les slides ayant bougé
      
        if(direction==='right') {
            $(idContainer+' > .slide').animate({left: '+='+slideshowWidth}, delaiTransition, function() {
                compteur++;
              
                // Lorsque le dernier slide à bougé, on crée la boucle
                if(compteur===nbSlides) {
                    var el = $(idContainer+' > .slide:last').remove();
                    $(idContainer).prepend(el);
                    $(idContainer+' > .slide').css('left', '0');
                  
                    compteur = 0;
                }
            });
        } else {
            $(idContainer+' > .slide').animate({left: '-='+slideshowWidth}, delaiTransition, function() {
                compteur++;
              
                // Lorsque le dernier slide à bougé, on crée la boucle
                if(compteur===nbSlides) {
                    var el = $(idContainer+' > .slide:first').remove();
                    $(idContainer).append(el);

$(idContainer+' > .slide').css('left', '0');
                  
                    compteur = 0;
                }
            });
        }      
    }
});

Dernière modification : 25 April 2020 23 : 32.

#Nuit #autres #forumactif #codage #libreservice

Halloween