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
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
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  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.
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; }
N'oubliez pas de cliquer sur le bouton Valider pour sauvegarder les modifications.
|
Accueil
Créer un forum
Message d'accueil en accordéon
par Pinguino Mer 21 Mar 2012 - 11:17
Sujets similaires