Message d'accueil en accordéon

par **Pinguino** Mer 21 Mar 2012 - 11:17

A travers cette astuce, nous allons apprendre comment créer un message d'accueil en accordéon comme celui qui suit :

Création du script

Citation :: Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des codes Javascript

Assurez-vous que la gestion des codes Javascript soit activée, puis créez un nouveau javascript ayant pour titre "Message d'accueil en accordéon" et pour placement "Sur l'index" (plus d'informations sur la gestion des scripts).

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 === 8) {
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);

Les variables containerWidth et containerHeight permettent de définir respectivement la largeur et la hauteur de votre message d'accueil en accordéon.

N'oubliez pas de cliquer sur le bouton Valider pour sauvegarder les modifications.

Insérer le code HTML

Citation :: Panneau d'administration  Affichage  Page d'accueil - Généralités

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

Vous pouvez modifier les éléments "Slide #" qui seront les titres des slides et remplacer les <img class="full" src="https://i.imgur.com/{...}.jpg" alt="image" /> par le HTML souhaitez.

N'oubliez pas de cliquer sur le bouton :enreg:

afin de sauvegarder les modifications.

Insertion du CSS

Nous vous proposons trois thèmes prêts à l'emploi. Toutefois, vous pouvez évidement modifier le CSS pour modifier l'aspect des slides selon vos désirs.

Citation :: Panneau d'administration  Affichage  Couleurs - Feuille de style CSS

Thème 1 : thème par défaut

Code:: @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; }

N'oubliez pas de cliquer sur le bouton Valider pour sauvegarder les modifications.

Thème 2 : Thème foncé

Code:: @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 }
.accordion noscript p { padding: 10px; margin: 0; background: white }

/****************************************** Dark */
.accordion {
border: 9px solid #353535;
border-bottom-width: 8px;
padding: 5px 5px 6px 0;
background: #030303;
-webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
-o-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
}
.accordion .slide > h2 { background: #030303; text-shadow: 0 -1px 0 #030303; line-height: 265% }
.accordion .slide > h2 span { background: #353535; color: white }
.accordion .slide > h2 b { background: #353535; color: #030303; text-shadow: -1px 1px 0 #5b5b5b }
.accordion .slide > h2.selected span, .accordion .slide > h2.selected span:hover {
background: #353535;
background: -moz-linear-gradient(left, #353535 0%, #555555 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#353535), color-stop(100%,#555555));
background: -webkit-linear-gradient(left, #353535 0%,#555555 100%);
background: -o-linear-gradient(left, #353535 0%,#555555 100%);
background: -ms-linear-gradient(left, #353535 0%,#555555 100%);
background: linear-gradient(left, #353535 0%,#555555 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#555555',GradientType=1 );
}
.accordion .slide > h2.selected b {
background: #383838;
background: -moz-linear-gradient(top, #3a3a3a 0%, #363636 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a3a3a), color-stop(100%,#363636));
background: -webkit-linear-gradient(top, #3a3a3a 0%,#363636 100%);
background: -o-linear-gradient(top, #3a3a3a 0%,#363636 100%);
background: -ms-linear-gradient(top, #3a3a3a 0%,#363636 100%);
background: linear-gradient(top, #3a3a3a 0%,#363636 100%);
}
.accordion .slide > div { background: #030303; margin-left: 5px }

/*************************************** 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 }
.ie.accordion .slide > h2 b { top: 44% }
.ie9.accordion .slide > h2.selected span, .ie9.accordion .slide > h2.selected span:hover { filter: none }

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

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

N'oubliez pas de cliquer sur le bouton Valider pour sauvegarder les modifications.

Thème 3 : Thème léger

Code:: @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 }
.accordion noscript p { padding: 10px; margin: 0; background: white }

/***************************************** Light */
.accordion {
border: 9px solid white;
border-bottom-width: 8px;
padding: 5px 5px 6px 0;
background: #a0a0a0;
-webkit-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
-moz-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
-ms-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
-o-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
}
.accordion .slide > h2 { background: #a0a0a0; text-shadow: 0 -1px 0 white; line-height: 265% }
.accordion .slide > h2 span {
background: #fcfcfc;
background: -moz-linear-gradient(left, #fcfcfc 0%, #ededed 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#fcfcfc), color-stop(100%,#ededed));
background: -webkit-linear-gradient(left, #fcfcfc 0%,#ededed 100%);
background: -o-linear-gradient(left, #fcfcfc 0%,#ededed 100%);
background: -ms-linear-gradient(left, #fcfcfc 0%,#ededed 100%);
background: linear-gradient(left, #fcfcfc 0%,#ededed 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ededed',GradientType=1 );
-webkit-box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;
-moz-box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;
-o-box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;
box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;
color: #909090;
}
.accordion .slide > h2 b { background: #ffffff; color: #909090; text-shadow: -1px 1px 0 white }
.accordion .slide > h2.selected span, .accordion .slide h2.selected span:hover, .accordion .slide > h2.selected b { background: #ffffff }
.accordion .slide > div { background: #a0a0a0; margin-left: 5px }

/*************************************** 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 }
.ie.accordion .slide > h2 b { top: 44% }
.accordion .slide > h2 span { filter: none }

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

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