Sujet Précédent Sujet Suivant

Slide javascript

Fermé
Spiskopat Messages postés 21 Date d'inscription mardi 27 mai 2008 Statut Membre Dernière intervention 8 avril 2020 - 29 oct. 2015 à 16:03
Nexii Messages postés 333 Date d'inscription jeudi 13 mars 2014 Statut Membre Dernière intervention 14 mars 2017 - 30 oct. 2015 à 10:41
Bonjour,

Ayant quelques petites bases en développement et création de site web (même si ça fait maintenant longtemps que je n'avais plus mis le nez dans un code source !), un collègue m'a demandé de l'aider à monter un blog un peu personnalisé. J'ai choisi la plateforme Blogger, un peu au pifomètre, ne sachant pas trop vers quelle service me tourner (mais de toute façon vu l'usage qui en sera fait, ce sera largement suffisant).

Bref ! Mon problème du jour : créer un slide des derniers articles postés. Je me suis inspiré de l'exemple de cette page :

http://www.leblogger.fr/2014/03/ajou...ages-avec.html

Mais je souhaiterais changer la disposition utilisée pour arriver à un grand bloc sur la gauche et sur toute la hauteur, ainsi que trois petit blocs sur la droite.

Et le moins qu'on puisse dire c'est que j'ai beaucoup de mal !
Donc si une âme charitable était prête à me donner un petit coup de pouce, je lui en serais très reconnaissant !

Merci d'avance !
A voir également:

1 réponse

Réponse 1 / 1
Nexii Messages postés 333 Date d'inscription jeudi 13 mars 2014 Statut Membre Dernière intervention 14 mars 2017 550
29 oct. 2015 à 16:55
Bonjour,

Déjà le lien est mal collé dans ton message, voici le lien correct :
https://www.leblogger.fr/2014/03/ajouter-les-derniers-messages-avec.html

Ensuite, j'ai trouvé l'article très mal expliqué. Erreur de grammaire et de construction de phrase, est-ce un site traduit ?!

Peu importe, je veux bine t'aider mais si tu nous montrais un peu ce que tu as actuellement avec un screen et éventuellement un jsFiddle
0
Spiskopat Messages postés 21 Date d'inscription mardi 27 mai 2008 Statut Membre Dernière intervention 8 avril 2020
Modifié par Spiskopat le 29/10/2015 à 17:42
Désolé pour le lien !
J'ai aussi trouve le site disons ... moyen, mais comme le code fonctionnait je n'y ai pas prêté attention.
Voici un petit screen : http://hpics.li/30b5a53

Voici le code : 

<style scoped="" type="text/css">
/*trickstoo modified widget of abt slider widget*/
ul.abt-sidebar-slider *{
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
ul.abt-sidebar-slider{
font:normal normal 11px embria
}
ul.abt-sidebar-slider,ul.abt-sidebar-slider li{
margin:0;
padding:0;
list-style:none;
position:relative
}
ul.abt-sidebar-slider{
width:100%;
height:320px
}
ul.abt-sidebar-slider li{
height:24.5%;
position:absolute; 
padding:0;
width:49.5%;
float:left;
overflow:hidden;
display:none
}
ul.abt-sidebar-slider li:nth-child(1),ul.abt-sidebar-slider li:nth-child(2),ul.abt-sidebar-slider li:nth-child(3),ul.abt-sidebar-slider li:nth-child(4){
display:block
}
ul.abt-sidebar-slider img{
border:0;
width:100%;
height:100%} ul.abt-sidebar-slider li:nth-child(1){width:100%;
height:49.5%;
margin:0 0 2px;
left:0;top:0
}
ul.abt-sidebar-slider li:nth-child(1){width:74%;left:0%;top:0%}
ul.abt-sidebar-slider li:nth-child(2){width:25%;left:75%;top:0%}
ul.abt-sidebar-slider li:nth-child(3){width:25%;left:75%;top:25%}
ul.abt-sidebar-slider li:nth-child(4){width:25%;left:75%;top:50%}{
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out
}
ul.abt-sidebar-slider .overlayx{
width:100%;
height:100%;
position:absolute;
z-index:2;
left:0;
top:0;
background-image:url(http://1.bp.blogspot.com/-FtnGJHMcWH8/UIV3IE-aaJI/AAAAAAAAGHs/WvLypnWxg5A/s1600/linebg-fade.png);
background-position:50% 50%;
background-repeat:repeat-x
}
ul.abt-sidebar-slider .overlayx,ul.abt-sidebar-slider img{
border:4px solid black;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px
}
ul.abt-sidebar-slider li:nth-child(1) .overlayx{
background-position:50% 25%
}
ul.abt-sidebar-slider .overlayx:hover{
-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";
filter:alpha(opacity=10);-khtml-opacity:0.1;
-moz-opacity:0.1;opacity:0.1
}
ul.abt-sidebar-slider h4{
position:absolute;
bottom:30px;
z-index:2;
color:white;
margin:0;
width:100%;
padding:0 10px;
line-height:1.5em; 
font:embria;
font-weight:normal
}
ul.abt-sidebar-slider li:nth-child(1) h4,ul.abt-sidebar-slider li:nth-child(4) h4{
font-size:150%
}
ul.abt-sidebar-slider .label_text{
position:absolute;
bottom:10px;
left:10px;
z-index:2;
color:white;
font-size:90%}
ul.abt-sidebar-slider li:nth-child(2) .autname,ul.abt-sidebar-slider li:nth-child(3) .autname{
display:none
}
.buttons{
margin:5px 0 0
}
.buttons a{
display:inline-block;
text-indent:-9999px;
width:15px;
height:25px;
position:relative
}
.buttons a::before{
content:"";
width:0;
height:0;
border-width:8px 7px;
border-style:solid;
border-color:transparent #535353 transparent transparent;
position:absolute;
top:50%;
margin-top:-8px;margin-left:-10px;
left:50%
}
.buttons a.nextx::before{
border-color:transparent transparent transparent #535353;
margin-left:-3px
}
</style>
<div id="featuredpostside"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="https://trickstoo-slider-recent-posts.googlecode.com/svn/trickstoo-slider.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
FeaturedPostSide({
blogURL:"<style scoped="" type="text/css">
/*trickstoo modified widget of abt slider widget*/
ul.abt-sidebar-slider *{
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
ul.abt-sidebar-slider{
font:normal normal 11px embria
}
ul.abt-sidebar-slider,ul.abt-sidebar-slider li{
margin:0;
padding:0;
list-style:none;
position:relative
}
ul.abt-sidebar-slider{
width:100%;
height:320px
}
ul.abt-sidebar-slider li{
height:24.5%;
position:absolute; 
padding:0;
width:49.5%;
float:left;
overflow:hidden;
display:none
}
ul.abt-sidebar-slider li:nth-child(1),ul.abt-sidebar-slider li:nth-child(2),ul.abt-sidebar-slider li:nth-child(3),ul.abt-sidebar-slider li:nth-child(4){
display:block
}
ul.abt-sidebar-slider img{
border:0;
width:100%;
height:100%} ul.abt-sidebar-slider li:nth-child(1){width:100%;
height:49.5%;
margin:0 0 2px;
left:0;top:0
}
ul.abt-sidebar-slider li:nth-child(2){left:0;top:50%}
ul.abt-sidebar-slider li:nth-child(3){left:50.5%;top:50%}
ul.abt-sidebar-slider li:nth-child(4){width:100%;left:0;top:75%}
ul.abt-sidebar-slider .overlayx,ul.abt-sidebar-slider li{
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out
}
ul.abt-sidebar-slider .overlayx{
width:100%;
height:100%;
position:absolute;
z-index:2;
left:0;
top:0;
background-image:url(http://1.bp.blogspot.com/-FtnGJHMcWH8/UIV3IE-aaJI/AAAAAAAAGHs/WvLypnWxg5A/s1600/linebg-fade.png);
background-position:50% 50%;
background-repeat:repeat-x
}
ul.abt-sidebar-slider .overlayx,ul.abt-sidebar-slider img{
border:4px solid black;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px
}
ul.abt-sidebar-slider li:nth-child(1) .overlayx{
background-position:50% 25%
}
ul.abt-sidebar-slider .overlayx:hover{
-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";
filter:alpha(opacity=10);-khtml-opacity:0.1;
-moz-opacity:0.1;opacity:0.1
}
ul.abt-sidebar-slider h4{
position:absolute;
bottom:30px;
z-index:2;
color:white;
margin:0;
width:100%;
padding:0 10px;
line-height:1.5em; 
font:embria;
font-weight:normal
}
ul.abt-sidebar-slider li:nth-child(1) h4,ul.abt-sidebar-slider li:nth-child(4) h4{
font-size:150%
}
ul.abt-sidebar-slider .label_text{
position:absolute;
bottom:10px;
left:10px;
z-index:2;
color:white;
font-size:90%}
ul.abt-sidebar-slider li:nth-child(2) .autname,ul.abt-sidebar-slider li:nth-child(3) .autname{
display:none
}
.buttons{
margin:5px 0 0
}
.buttons a{
display:inline-block;
text-indent:-9999px;
width:15px;
height:25px;
position:relative
}
.buttons a::before{
content:"";
width:0;
height:0;
border-width:8px 7px;
border-style:solid;
border-color:transparent #535353 transparent transparent;
position:absolute;
top:50%;
margin-top:-8px;margin-left:-10px;
left:50%
}
.buttons a.nextx::before{
border-color:transparent transparent transparent #535353;
margin-left:-3px
}
</style>
<div id="featuredpostside"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="https://trickstoo-slider-recent-posts.googlecode.com/svn/trickstoo-slider.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
FeaturedPostSide({
blogURL:"http://bait-tech.blogspot.com/",
MaxPost:8,
idcontaint:"#featuredpostside",
ImageSize:300,
interval:4000,
autoplay:false,
tagName:false
});
//]]>
</script>


Je patauge complètement dans le JS, j'arrive à modifier certaines choses en tâtonnant mais ça reste compliqué.
0
Nexii Messages postés 333 Date d'inscription jeudi 13 mars 2014 Statut Membre Dernière intervention 14 mars 2017 550
30 oct. 2015 à 10:41
Bon ca n'a pas l'air tip top comme développement. Pour faire ton blog, je te conseil d'utiliser un CMS open source, comme WordPress ou Joomla. Il y aura une petite prise en main, un temps d'adaptation mais largement rentabilisé plus tard pour le développement et la maintenance.. Si tu trouve l'intégration d'un slider déjà difficile à travers ce site, je te conseil de ne pas aller plus loin car ces modules sont en général assez simples à intégrer. Sinon tu peux essayer des CMS propriétaire tels que Wix.
0

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
Nodejs.exe est-ce un virus
Maverik1956 -
Malekal_morte- -

13 réponses
[Javascript] Tables de Multiplication
pigeonus -
hachim -

6 réponses
javascript:void(0);
nano -
JCVD -

18 réponses