Salut à tous !
Suite à la demande de Solid6Snake trouvable ici : https://www.never-utopia.com/t57456p15-pa-demande-code-page-d-accueil, je viens ici pour partager le LS qui en découle, ce dernier étant une Page d'Accueil (Abrégé en PA pour le reste du LS).
----------¤ Les liens utiles ¤----------
¤ Vous pouvez voir le LS ici : http://puu.sh/l5pXS/c80436aff3.png (le fond gris est le fond de mon forum de test)
¤ Vous pouvez tester le code ici : http://jsfiddle.net/Alzufen/c460senw/3/show/
----------¤ Les pré-requis ¤----------
¤ Être minimum Admin du forum : Il vous faudra accéder au panneau d'administration pour utiliser ce LS.
¤ [Optionnel] Être Codeur: Si vous souhaitez modifier le code, notamment le JS (car le CSS/HTML est plus à la portée de tout le monde) je vous recommande fortement de vous y connaître, sinon, n'y touchez pas tout ce fais automatiquement.
¤ [Optionnel] Être Graphiste : Si vous voulez faire des modifications et notamment faire un joli titre, je vous recommande de le faire en Graph' !
¤ Avoir activé le JS sur son forum et le JS activé sur le navigateur : Si le JavaScript est désactivé sur votre forum, ou sur votre navigateur, le code ne fonctionnera pas bien. Il n'y aura aucun ajout automatique, et aucun moyen de défiler alors veillez à faire attention à ça.
¤ Crédits : Vous êtes priés de ne pas retirer le crédit à NU, il est placé de manière discrète. Si jamais il vous dérange malgré tout, veuillez à créditer NU sur votre page d'accueil !
----------¤ Les fonctionnalités spéciales ¤----------
¤ Fonction SlideShow : SlideShow, Carroussel, PA Défilante, appelez ça comme vous voulez le principe est pour moi le même. Ca vous permet de mettre plusieurs blocs sur une même ligne et d'en afficher que certains en même temps tout en pouvant défiler pour voir les suivants. Ils défilent grâce aux boutons rond en dessous, qui permet d'aller directement au bloc qui correspond, ou grâce au flèches pour celui d'en bas qui permet un défilement les uns après les autres.
¤ Fonction Retour au début : Le SlideShow retourne au début si on défile avec la flèche de droite et qu'on est à la fin de tous les blocs, ou va à la fin si on défile avec la flèche gauche.
¤ Fonction Automatique : Les ronds qui permettent d'accéder au bloc correspondant s'ajoute automatiquement en fonction du nombre de bloc que vous avez.
¤ 5 Blocs en une fois : Le bloc d'en bas permet d'afficher 5 blocs à la fois de petites tailles ! Bien évidemment, veillez à en mettre toujours 5 sinon vous aurez un blanc à côté des derniers avant le retour au début.
¤ Blocs ou Vidéo ? : A l'origine le code est prévu pour accueillir des vidéos, je n'ai pas encore testé en mettant du texte, ça devrait fonctionner cependant il n'y a pas d'ascenseur le risque est donc que le texte dépasse. Par contre, vous pouvez tout à fait y afficher des images.
----------¤ A Venir ¤----------
Je prévois deux ajouts futurs et donc deux mises à jours à ce LS. A l'origine, le code demandait un défilement automatique, mais puisque j'ai un peu du mal à le réaliser avec mon code actuel et que je veux pas trop faire attendre le commanditaire, cette fonction viendra plus tard. De plus, je compte essayer de faire en sorte que les vidéos d'en bas soient une boucle. En gros, que vous mettiez un multiple de 5 en nombre de blocs (genre 15) ou moins (genre 13), on n'aura pas de bloc blanc à droite des derniers blocs mais le début de la PA.
Deux petites fonctions sympa, peut-être inutile pour certains mais donc indispensable !
Passons maintenant au code !
Le code HTML, à mettre dans :
Panneau d'administration > Affichage > Page d'Accueil > Généralité > Message sur la Page d'Accueil
Pour ajouter des blocs, il vous suffit de copier coller ceci à la suite des autres :
Si vous souhaitez mettre des images, vous pouvez soit remplacer la div par votre balise img (tout en veillant à rajouter la class) soit la mettre directement dans la div, mais veillez à retirer le "background" de la class "contenu" dans le CSS si jamais votre image n'est pas rectangulaire ou ne fais pas la taille totale de la div.
Pour mettre des vidéos, vous pouvez faire pareil que les images.
Le code CSS à mettre dans :
Panneau d'administration > Affichage > Images et Couleurs > Couleurs > Feuille de Style CSS
Certaines parties du code ne vous sont pas forcément utile. Je parle notamment des backgrounds ici :
Le premier sert à mettre une couleur de fond (rouge) à chaque contenu, mais si vous mettez des vidéos ou des images, cela vous servira à rien.
Le second sert à afficher une couleur de fond (jaune) au premier bloc contenu, pour distinguer le début et la fin, évidemment comme au dessus, cela vous sers à rien si vous mettez des images ou des vidéos.
Une mise à jour viendra avec des ajouts pour optimiser le code pour du texte ainsi que des commentaires dans le code CSS (et éventuellement JS) pour vous aider à savoir quoi modifier, quoi ajouter, etc. à votre guise.
Passons à la fin, le code JS, à mettre dans :
Panneau d'administration > Modules > HTML & JavaScript > Gestion des codes JavaScript > Veillez à bien avoir coché "Oui" à "Activer la gestion des codes Javascript :" et à enregistrer > Créer un nouveau code JavaScript > Mettez le titre que vous voulez (Par ex : Page d'Accueil) > Laissez coché "sur l'index" et seulement "sur l'index" puis copiez/collez :
Il vous suffira ensuite d'enregistrer le code et d'aller voir le résultat sur votre forum.
Sachez qu'en cas de problème, une section est mise à votre disposition pour toutes aides ici : https://www.never-utopia.com/f177-probleme-avec-mon-code n'hésitez donc pas à y poster si vous avez un quelconque soucis avec le code.
Suite à la demande de Solid6Snake trouvable ici : https://www.never-utopia.com/t57456p15-pa-demande-code-page-d-accueil, je viens ici pour partager le LS qui en découle, ce dernier étant une Page d'Accueil (Abrégé en PA pour le reste du LS).
----------¤ Les liens utiles ¤----------
¤ Vous pouvez voir le LS ici : http://puu.sh/l5pXS/c80436aff3.png (le fond gris est le fond de mon forum de test)
¤ Vous pouvez tester le code ici : http://jsfiddle.net/Alzufen/c460senw/3/show/
----------¤ Les pré-requis ¤----------
¤ Être minimum Admin du forum : Il vous faudra accéder au panneau d'administration pour utiliser ce LS.
¤ [Optionnel] Être Codeur: Si vous souhaitez modifier le code, notamment le JS (car le CSS/HTML est plus à la portée de tout le monde) je vous recommande fortement de vous y connaître, sinon, n'y touchez pas tout ce fais automatiquement.
¤ [Optionnel] Être Graphiste : Si vous voulez faire des modifications et notamment faire un joli titre, je vous recommande de le faire en Graph' !
¤ Avoir activé le JS sur son forum et le JS activé sur le navigateur : Si le JavaScript est désactivé sur votre forum, ou sur votre navigateur, le code ne fonctionnera pas bien. Il n'y aura aucun ajout automatique, et aucun moyen de défiler alors veillez à faire attention à ça.
¤ Crédits : Vous êtes priés de ne pas retirer le crédit à NU, il est placé de manière discrète. Si jamais il vous dérange malgré tout, veuillez à créditer NU sur votre page d'accueil !
----------¤ Les fonctionnalités spéciales ¤----------
¤ Fonction SlideShow : SlideShow, Carroussel, PA Défilante, appelez ça comme vous voulez le principe est pour moi le même. Ca vous permet de mettre plusieurs blocs sur une même ligne et d'en afficher que certains en même temps tout en pouvant défiler pour voir les suivants. Ils défilent grâce aux boutons rond en dessous, qui permet d'aller directement au bloc qui correspond, ou grâce au flèches pour celui d'en bas qui permet un défilement les uns après les autres.
¤ Fonction Retour au début : Le SlideShow retourne au début si on défile avec la flèche de droite et qu'on est à la fin de tous les blocs, ou va à la fin si on défile avec la flèche gauche.
¤ Fonction Automatique : Les ronds qui permettent d'accéder au bloc correspondant s'ajoute automatiquement en fonction du nombre de bloc que vous avez.
¤ 5 Blocs en une fois : Le bloc d'en bas permet d'afficher 5 blocs à la fois de petites tailles ! Bien évidemment, veillez à en mettre toujours 5 sinon vous aurez un blanc à côté des derniers avant le retour au début.
¤ Blocs ou Vidéo ? : A l'origine le code est prévu pour accueillir des vidéos, je n'ai pas encore testé en mettant du texte, ça devrait fonctionner cependant il n'y a pas d'ascenseur le risque est donc que le texte dépasse. Par contre, vous pouvez tout à fait y afficher des images.
----------¤ A Venir ¤----------
Je prévois deux ajouts futurs et donc deux mises à jours à ce LS. A l'origine, le code demandait un défilement automatique, mais puisque j'ai un peu du mal à le réaliser avec mon code actuel et que je veux pas trop faire attendre le commanditaire, cette fonction viendra plus tard. De plus, je compte essayer de faire en sorte que les vidéos d'en bas soient une boucle. En gros, que vous mettiez un multiple de 5 en nombre de blocs (genre 15) ou moins (genre 13), on n'aura pas de bloc blanc à droite des derniers blocs mais le début de la PA.
Deux petites fonctions sympa, peut-être inutile pour certains mais donc indispensable !
Passons maintenant au code !
Le code HTML, à mettre dans :
Panneau d'administration > Affichage > Page d'Accueil > Généralité > Message sur la Page d'Accueil
- Code:
<div class="pa_total">
<div class="slide_bloc" id="shidden">
<div class="slide">
<div class="contenu">
</div>
<div class="contenu">
</div>
</div>
</div>
<div class="selecteur">
</div>
<a style="position: absolute; right: 45px; font-size: 8px; margin-top: -14px; color: rgba(0,0,0,0.5); text-decoration: none!important;" href="http://www.never-utopia.com/">(c) Never-Utopia</a>
<div class="slide_bloc" id="shidden2">
<div class="slide_content">
<div class="slide">
<div class="contenu">
</div>
<div class="contenu">
</div>
<div class="contenu">
</div>
<div class="contenu">
</div>
<div class="contenu">
</div>
<div class="contenu">
</div>
<div class="contenu">
</div>
<div class="contenu">
</div>
<div class="contenu">
</div>
<div class="contenu">
</div>
<div class="contenu">
</div>
<div class="contenu">
</div>
<div class="contenu">
</div>
<div class="contenu">
</div>
<div class="contenu">
</div>
</div>
</div>
</div>
<div class="selecteur">
</div>
<div class="fleches">
<img src="http://image.noelshack.com/fichiers/2015/39/1443379244-150921023830175200.png" class="fleche gauche cliquable" /> <img src="http://image.noelshack.com/fichiers/2015/39/1443379244-150921023829827991.png" class="fleche droite cliquable" />
</div>
</div>
Pour ajouter des blocs, il vous suffit de copier coller ceci à la suite des autres :
- Code:
<div class="contenu">
</div>
Si vous souhaitez mettre des images, vous pouvez soit remplacer la div par votre balise img (tout en veillant à rajouter la class) soit la mettre directement dans la div, mais veillez à retirer le "background" de la class "contenu" dans le CSS si jamais votre image n'est pas rectangulaire ou ne fais pas la taille totale de la div.
Pour mettre des vidéos, vous pouvez faire pareil que les images.
Le code CSS à mettre dans :
Panneau d'administration > Affichage > Images et Couleurs > Couleurs > Feuille de Style CSS
- Code:
.pa_total {
position: relative;
width: 850px;
height: 490px;
margin: auto;
}
.slide_bloc {
position: relative;
width: 766px;
border: 1px solid #000;
overflow: hidden;
margin: auto;
z-index: 3;
}
#shidden {
height: 350px;
}
#shidden2 {
height: 100px;
}
.slide {
display: inline-block;
position: relative;
left: 0;
height: 0;
transition: 1s all;
}
.contenu {
display: inline-block;
background: red;
}
.contenu:first-child {
background: yellow;
}
#shidden .contenu {
width: 766px;
height: 350px;
}
#shidden2 .contenu {
width: 150px;
height: 100px;
}
.selecteur {
text-align: center;
margin-bottom: 5px;
}
.selecteur img {
opacity: 0.4;
height: 10px;
padding: 3px 1px 0;
cursor: pointer;
}
.selecteur img:hover {
opacity: 0.6;
}
.selecteur img.selected {
opacity: 1;
cursor: default;
}
.fleches {
position: absolute;
height: 100px;
width: 850px;
bottom: 19px;
z-index: 2;
}
.fleche {
position: absolute;
top: 50%;
margin-top: -16px;
opacity: 0.6;
cursor: pointer;
}
.fleche:hover {
opacity: 1;
}
.gauche {
left: 6px;
}
.droite {
right: 6px;
}
Certaines parties du code ne vous sont pas forcément utile. Je parle notamment des backgrounds ici :
- Code:
.contenu {
display: inline-block;
background: red;
}
.contenu:first-child {
background: yellow;
}
Le premier sert à mettre une couleur de fond (rouge) à chaque contenu, mais si vous mettez des vidéos ou des images, cela vous servira à rien.
Le second sert à afficher une couleur de fond (jaune) au premier bloc contenu, pour distinguer le début et la fin, évidemment comme au dessus, cela vous sers à rien si vous mettez des images ou des vidéos.
Une mise à jour viendra avec des ajouts pour optimiser le code pour du texte ainsi que des commentaires dans le code CSS (et éventuellement JS) pour vous aider à savoir quoi modifier, quoi ajouter, etc. à votre guise.
Passons à la fin, le code JS, à mettre dans :
Panneau d'administration > Modules > HTML & JavaScript > Gestion des codes JavaScript > Veillez à bien avoir coché "Oui" à "Activer la gestion des codes Javascript :" et à enregistrer > Créer un nouveau code JavaScript > Mettez le titre que vous voulez (Par ex : Page d'Accueil) > Laissez coché "sur l'index" et seulement "sur l'index" puis copiez/collez :
- Code:
$(window).load(function () {
$('.slide').each(function () {
var $this = $(this),
$contenu = $this.children(),
$parent = $this.parents('.slide_bloc'),
$selection = $parent.next(),
nbr = $contenu.length,
nbr2 = Math.ceil(nbr / 5),
width = ($contenu.width() + 4) * nbr,
slide_id = $parent.attr('id');
if (slide_id == 'shidden') {
for (var v = 1; v <= nbr; v++) {
$selection.append('<img src="http://image.noelshack.com/fichiers/2015/39/1443376395-150921023657255860.png" class="selection" />');
}
} else {
for (var v = 1; v <= nbr2; v++) {
$selection.append('<img src="http://image.noelshack.com/fichiers/2015/39/1443376395-150921023657255860.png" class="selection" />');
}
}
$selection.children().first().addClass('selected');
$this.css('width', width + 'px');
});
$('.selection').click(function () {
var $this = $(this),
position = $this.index(),
s_hidden = $this.parent().prev(),
sh_id = s_hidden.attr('id'),
$selection = $this.parent().children(),
$slide = s_hidden.find('.slide'),
width = $slide.children().width();
if ($this.not('.selected')) {
if (sh_id == 'shidden') {
var left = (width + 4) * position;
$slide.css('left', '-' + left + 'px');
} else {
var left = (width + 4) * 5 * position;
$slide.css('left', '-' + left + 'px');
}
$selection.removeClass('selected');
$this.addClass('selected');
}
});
$('.fleche').click(function () {
var $this = $(this),
$selecteur = $this.parent().prev(),
$selection = $selecteur.children(),
$next = $selecteur.children('.selected').next(),
$prev = $selecteur.children('.selected').prev(),
$c_slide = $('.slide_content'),
$fleche = $('.fleche'),
s_hidden = $this.parent().prev().prev(),
$slide = s_hidden.find('.slide').first(),
$contenu = $slide.children();
function clic() {
$fleche.addClass('cliquable');
}
function remove() {
$slide.remove();
}
if ($this.hasClass('cliquable')) {
$fleche.removeClass('cliquable');
$selection.removeClass('selected');
if ($this.hasClass('gauche')) {
var index = $prev.index();
if (index == -1) {
var width = ($slide.width() + 10) * 5,
nbr = $slide.children().length,
left = 770 * (nbr / 5);
$c_slide.css('width', width + 'px');
$selection.last().addClass('selected');
$slide.animate({
left: '+=770px'
},
5,
'linear');
$c_slide.append($slide.clone());
var $slide2 = s_hidden.find('.slide').last();
$slide2.css('left', '-' + left + 'px');
$c_slide.css('width', $slide.width() + 'px');
$slide2.animate({
left: '+=770px'
},
5,
'linear');
setTimeout(remove, 1000);
} else {
$prev.addClass('selected');
$slide.animate({
left: '+=770px'
},
5,
'linear');
}
} else {
var index = $next.index();
if (index == -1) {
var width = ($slide.width() + 10) * 2;
$c_slide.css('width', width + 'px');
$selection.first().addClass('selected');
$slide.animate({
left: '-=770px'
},
5,
'linear');
$c_slide.append($slide.clone());
var $slide2 = s_hidden.find('.slide').last();
$slide2.css('left', '770px');
$c_slide.css('width', $slide.width() + 'px');
$slide2.animate({
left: '-=770px'
},
5,
'linear');
setTimeout(remove, 1000);
} else {
$next.addClass('selected');
$slide.animate({
left: '-=770px'
},
5,
'linear');
}
}
setTimeout(clic, 1000);
}
});
});
Il vous suffira ensuite d'enregistrer le code et d'aller voir le résultat sur votre forum.
Sachez qu'en cas de problème, une section est mise à votre disposition pour toutes aides ici : https://www.never-utopia.com/f177-probleme-avec-mon-code n'hésitez donc pas à y poster si vous avez un quelconque soucis avec le code.
Vos commentaires et remerciements sont toujours bienvenus ^^
♥
