Community Of Gamers
Bienvenue sur le forum !
Nous vous souhaitons un agréable moment parmi nous en espérant que vous, vous y plairez !

Cordialement, Le Staff !



 
Accueil  S'enregistrer  Connexion  Adminstration  
Derniers sujets

Partagez
 

 Faire un Message d'acceuille En Accordéon

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Iron CrazeK
Fondateur du Forum.
Fondateur du Forum.
Iron CrazeK

Messages : 108
Jeton de Gameurs : 1112224287
Réputation : 4
Date d'inscription : 12/09/2014

Faire un Message d'acceuille En Accordéon Empty
MessageSujet: Faire un Message d'acceuille En Accordéon   Faire un Message d'acceuille En Accordéon EmptyMer 8 Oct - 13:07


1. Créer une page javascript

Aller dans :
Panneau d'Administration Modules HTML & Javascript Gestion des codes javascript

Cliquez sur "créer un nouveau javascript"

Données :

- Mettre le titre souhaité
- Choisir la Position : dans l'index
- Coller ce code :

$(document).ready(function() {
$("#accordeon-pa").each(function(){
$(this).liteAccordion({
autoPlay:true,
pauseOnHover:true,
rounded:true,
enumerateSlides:true,
containerWidth: 960,
containerHeight: 320
})
});
});
/*************************************************!
*
* project: liteAccordion - a horizontal accordion plugin for jQuery
* author: Nicola Hibbert
* url: http://nicolahibbert.com/liteaccordion-v2/
* demo: http://www.nicolahibbert.com/demo/liteAccordion/
*
* Version: 2.0.2
* Copyright: (c) 2010-2011 Nicola Hibbert
* Licence: MIT
*
**************************************************/
(function(b){var a=function(g,l){var i={headerWidth:48,activateOn:"click",firstSlide:1,slideSpeed:800,onTriggerSlide:function(){},onSlideAnimComplete:function(){},autoPlay:false,pauseOnHover:false,cycleSpeed:6000,easing:"swing",theme:"basic",rounded:false,enumerateSlides:false,linkable:false},h=b.extend({},i,l),c=g.children("ol").children("li"),j=c.children(":first-child"),k=c.length,f=h.containerWidth-k*h.headerWidth,e={play:function(m){var n=d.nextSlide(m&&m);if(d.playing){return}d.playing=setInterval(function(){j.eq(n()).trigger("click.liteAccordion")},h.cycleSpeed)},stop:function(){clearInterval(d.playing);d.playing=0},next:function(){e.stop();j.eq(d.currentSlide===k-1?0:d.currentSlide+1).trigger("click.liteAccordion")},prev:function(){e.stop();j.eq(d.currentSlide-1).trigger("click.liteAccordion")},destroy:function(){e.stop();b(window).unbind(".liteAccordion");g.attr("style","").removeClass("accordion basic dark light stitch").removeData("liteAccordion").unbind(".liteAccordion").find("li > :first-child").unbind(".liteAccordion").filter(".selected").removeClass("selected").end().find("b").remove();c.removeClass("slide").children().attr("style","")},debug:function(){return{elem:g,defaults:i,settings:h,methods:e,core:d}}},d={setStyles:function(){g.width(h.containerWidth).height(h.containerHeight).addClass("accordion").addClass(h.rounded&&"rounded").addClass(h.theme);c.addClass("slide").children(":first-child").width(h.containerHeight).height(h.headerWidth).eq(h.firstSlide-1).addClass("selected");j.each(function(m){var p=b(this),o=m*h.headerWidth,n=j.first().next(),q=parseInt(n.css("marginLeft"),10)||parseInt(n.css("marginRight"),10)||0;if(m>=h.firstSlide){o+=f}p.css("left",o).next().width(f-q).css({left:o,paddingLeft:h.headerWidth});h.enumerateSlides&&p.append("<b>"+(m+1)+"</b>")})},bindEvents:function(){if(h.activateOn==="click"){j.bind("click.liteAccordion",d.triggerSlide)}else{if(h.activateOn==="mouseover"){j.bind({"mouseover.liteAccordion":d.triggerSlide,"click.liteAccordion":d.triggerSlide})}}if(h.pauseOnHover&&h.autoPlay){g.bind("mouseover.liteAccordion",function(){d.playing&&e.stop()}).bind("mouseout.liteAccordion",function(){!d.playing&&e.play(d.currentSlide)})}},linkable:function(){var m=(function(){var o=[];c.each(function(){if(b(this).attr("name")){o.push((b(this).attr("name")).toLowerCase())}});return m=o})();var n=function(p){var o;if(p.type==="load"&&!window.location.hash){return}if(p.type==="hashchange"&&d.playing){return}o=b.inArray((window.location.hash.slice(1)).toLowerCase(),m);if(o>-1&&o<m.length){j.eq(o).trigger("click.liteAccordion")}};b(window).bind({"hashchange.liteAccordion":n,"load.liteAccordion":n})},currentSlide:h.firstSlide-1,nextSlide:function(m){var n=m+1||d.currentSlide+1;return function(){return n++%k}},playing:0,animSlideGroup:function(m,o,n){var p=n?":lt("+(m+1)+")":":gt("+m+")";c.filter(p).each(function(){var r=b(this),q=c.index(r);r.children().stop(true).animate({left:(n?0:f)+q*h.headerWidth},h.slideSpeed,h.easing,function(){if(!d.slideAnimCompleteFlag){h.onSlideAnimComplete.call(o);d.slideAnimCompleteFlag=true}})})},slideAnimCompleteFlag:false,triggerSlide:function(p){var o=b(this),m=j.index(o),n=o.next();d.currentSlide=m;d.slideAnimCompleteFlag=false;j.removeClass("selected").filter(o).addClass("selected");if(p.originalEvent&&h.autoPlay){e.stop();e.play(m)}if(h.linkable&&!d.playing){window.location.hash=o.parent().attr("name")}h.onTriggerSlide.call(n);d.animSlideGroup(m,n,true);d.animSlideGroup(m,n)},ieClass:function(){var m=+(b.browser.version).charAt(0);if(m<7){e.destroy()}if(m===7||m===Cool{c.each(function(n){b(this).addClass("slide-"+n)})}g.addClass("ie ie"+m)},init:function(){if(b.browser.msie){d.ieClass()}d.setStyles();d.bindEvents();if(h.cycleSpeed<h.slideSpeed){h.cycleSpeed=h.slideSpeed}if(h.linkable&&"onhashchange" in window){d.linkable()}h.autoPlay&&e.play()}};d.init();return e};b.fn.liteAccordion=function(e){var d=this,c=d.data("liteAccordion");if(typeof e==="object"||!e){return d.each(function(){var f;if(c){return}f=new a(d,e);d.data("liteAccordion",f)})}else{if(typeof e==="string"&&c[e]){if(e==="debug"){return c[e].call(d)}else{c[e].call(d);return d}}}}})(jQuery);




Si ce n'est pas déjà fait, pensez à activer la gestion des javascripts Wink


2. Mettre le code HTML comme message de la page d'accueil

Allez dans :
Panneau d'Administration Affichage Page d'Accueil Général Message sur la page d'accueil

Collez ce code :



<div id="accordeon-pa" class="accordion">
<ol>
<li>
<h2><span>Slide 1</span></h2>
<div>
<figure>
<img class="full" src="https://i.imgur.com/SHaqP.jpg" alt="image" />
</figure>
</div>
</li>
<li>
<h2><span>Slide 2</span></h2>
<div>
<figure>
<img class="full" src="https://i.imgur.com/v5LuU.jpg" alt="image" />
</figure>
</div>
</li>
<li>
<h2><span>Slide 3</span></h2>
<div>
<figure>
<img class="full" src="https://i.imgur.com/VdDge.jpg" alt="image" />
</figure>
</div>
</li>
<li>
<h2><span>Slide 4</span></h2>
<div>
<figure>
<img class="full" src="https://i.imgur.com/EwuD0.jpg" alt="image" />
</figure>
</div>
</li>
<li>
<h2><span>Slide 5</span></h2>
<div>
<figure>
<img class="full" src="https://i.imgur.com/Wl1P6.jpg" alt="image" />
</figure>
</div>
</li>
</ol>
</div>




3. Mettre le code CSS

Allez dans :

Panneau d'Administration Affichage Image et couleurs Couleurs Feuille de style CSS

Coller un des trois codes suivants :

Thème de base :


@charset 'utf-8';
/*************************************************!
*
* project: liteAccordion - a horizontal accordion plugin for jQuery
* author: Nicola Hibbert
* url: http://nicolahibbert.com/liteaccordion-v2/
* demo: http://www.nicolahibbert.com/demo/liteAccordion/
*
* Version: 2.0.2
* Copyright: (c) 2010-2011 Nicola Hibbert
* Licence: MIT
*
**************************************************/
/****************************************** Core */
.accordion { text-align: left; font: 'Helvetica Neue', Verdana, Arial, sans-serif }
.accordion > ol { position: relative; overflow: hidden; height: 100%; margin: 0; padding: 0; list-style-type: none }
.accordion .slide > h2 {
color: black;
font-size: 16px;
font-weight: normal;
margin: 0;
z-index: 100;
position: absolute;
top: 0;
left: 0;
-webkit-transform: translateX(-100%) rotate(-90deg);
-webkit-transform-origin: right top;
-moz-transform: translateX(-100%) rotate(-90deg);
-moz-transform-origin: right top;
-o-transform: translateX(-100%) rotate(-90deg);
-o-transform-origin: right top;
transform: translateX(-100%) rotate(-90deg);
transform-origin: right top;
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.accordion .slide > h2 span {
display: block;
padding-right: 8%;
text-align: right;
height: 90%;
margin-top: 5px;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
.accordion .slide > h2 b {
display: inline-block;
position: absolute;
top: 13%;
left: 10%;
text-align: center;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.accordion .slide > h2:hover { cursor: pointer }
.accordion .slide > div { height: 100%; position: absolute; top: 0; z-index: 10; overflow: hidden; background: white }

/****************************************** Basic */
.accordion .slide > h2 { background: #333; color: white; line-height: 225% }

/*************************************** Rounded */
.rounded, .rounded > ol { -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px }
.rounded .slide > h2 span { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px }

/******************************************** IE */
.ie .slide > h2 b { top: 42%; left: 5% }
.ie9 .slide > h2 { filter: none; -ms-transform: translateX(-100%) rotate(-90deg); -ms-transform-origin: right top }

/******************************************** FA */
.accordion figure .full { width: 100%; height: 100%; }
.accordion h2 { border: none; }

/* centrer l'accordéon */
.accordion { margin: auto; }


_________________
Fondateur du Forum!

Faire un Message d'acceuille En Accordéon Rank-admin
Revenir en haut Aller en bas
https://jeux-games.forumactif.com
Themelomeli
Fondateur du Forum.
Fondateur du Forum.
Themelomeli

Messages : 39
Jeton de Gameurs : 1122224113
Réputation : 3
Date d'inscription : 21/09/2014
Age : 20
Localisation : Françe

Faire un Message d'acceuille En Accordéon Empty
MessageSujet: Re: Faire un Message d'acceuille En Accordéon   Faire un Message d'acceuille En Accordéon EmptySam 18 Oct - 10:58

Bon Tuto.

_________________
Fondateur officiel du Forum.

PAS D'AIDE EN MESSAGE PRIVÉ /! Merci


Faire un Message d'acceuille En Accordéon Rank-admin
Revenir en haut Aller en bas
http://So-good.forumactif.org
 

Faire un Message d'acceuille En Accordéon

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Comment faire pour ne plus voir le bandeau publicitaire de votre site ?
» Faire disparaître les pores voyants...
» Tonner considere faire une poupée Jem !
» faire ses impots soi meme
» Faire un glacage sur vos gateau

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Community Of Gamers :: Apprentissage :: Apprentissage des Languages Html :: Le Language [Javascript]-