Dotclear

Vous n'êtes pas identifié(e).

Annonce

13 février 2024 Sortie de Dotclear 2.29

#1 2009-11-29 12:34:46

i_love_dc
Membre
Inscription : 2007-07-13

[Slider] Integrer un slider

Suite a se billet sur le thème hybrid + slider
et sous les conseils d'amalgame a fin de ne pas "polluer " le billet de support du thème "Hybrid" je refaits donc un billet plus approprier ici.

Aux vues des belles modifications du thème Hybrid faites par SiK_22 avec son slider

J'ai voulu tenter une intégration d'un slider (code gratuit proposé à droite, à gauche sur le net)
Le plus gros soucis n'est pas l'intégration, mais le besoin d'essayer de faire une boucle de code qui "automatiserait" (plus ou moins) le slider...
Afin d'éviter de manuellement changer les URL's + resumés d'articles + images

- Alors l'idée très théorique c'est d' essayer de faire quelque chose comme....

Image > {{tpl:EntryFirstImage size="t" class="first-image"}} (changer au besoin la config)
Titre H2 > <h2 class="post-title">  <a href="{{tpl:EntryURL}}">{{tpl:EntryTitle encode_html="1"}}</a></h2>
Résumer de l'article > <div class="post-content"><p>{{tpl:EntryContent full="1" encode_html="1" remove_html="1" cut_string="350"}}...</p></div>

Mais comment "techniquement" mettre en place quelque chose comme....?

<div id="slider"> 
<tpl:LoopPosition start="1" length="5"> (pour 5articles par exemple) ?
{{tpl:EntryFirstImage size="t" class="first-image"}}
</tpl:LoopPosition>

<h2 class="post-title">
             <a href="{{tpl:EntryURL}}">{{tpl:EntryTitle encode_html="1"}}</a>
             <!-- # Number of comments -->
             <tpl:EntryIf has_comment="1">
             <span class="comment-count">
               <a href="{{tpl:EntryURL}}#comments" title="{{tpl:EntryCommentCount}}">{{tpl:EntryCommentCount one="%s" more="%s"}}</a>
             </span>
             </tpl:EntryIf>
           </h2>
<div class="post-content">
               <p>{{tpl:EntryContent full="1" encode_html="1" remove_html="1" cut_string="350"}}...</p>
             </div>
</div>

Le le test d'intégration du slider est plus que concluant, ca marche très bien...
Voici la demo + code source du slider en question


Voici ou j en suis pour le moment :

Dans le home.html de Hybrid pour éviter une gros bazar j'ai mis après

     <!-- end #menu -->

un

 {{tpl:include src="slider.html"}}

Dans le fichier slider.html jai est copier le code source de l'index livrer dans le zip du slider avec les modifs qu'il faut pour un bon fonctionnement.

<h3>» Featured Content Slider Using jQuery</h3>
		
		<div id="featured" >
		  <ul class="ui-tabs-nav">
	        <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="{{tpl:BlogThemeURL}}/img/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li>
	        <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="{{tpl:BlogThemeURL}}/img/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li>
	        <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="{{tpl:BlogThemeURL}}/img/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li>
	        <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="{{tpl:BlogThemeURL}}/img/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li>
	      </ul>

	    <!-- First Content -->
	    <div id="fragment-1" class="ui-tabs-panel" style="">
			<img src="{{tpl:BlogThemeURL}}/img/image1.jpg" alt="" />
			 <div class="info" >
				<h2><a href="#" >15+ Excellent High Speed Photographs</a></h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>
			 </div>
	    </div>

	    <!-- Second Content -->
	    <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
			<img src="{{tpl:BlogThemeURL}}/img/image2.jpg" alt="" />
			 <div class="info" >
				<h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>
				<p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>
			 </div>
	    </div>

	    <!-- Third Content -->
	    <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
			<img src="{{tpl:BlogThemeURL}}/img/image3.jpg" alt="" />
			 <div class="info" >
				<h2><a href="#" >35 Amazing Logo Designs</a></h2>
				<p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p>
	         </div>
	    </div>

	    <!-- Fourth Content -->
	    <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
			<img src="{{tpl:BlogThemeURL}}/img/image4.jpg" alt="" />
			 <div class="info" >
				<h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>
				<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>
	         </div>
	    </div>

		</div>

J'ai collé le CSS du slider a la fin du style.css du theme Hybrid + les modifs qui vont bien pour les images
J'ai télécharger et ajouté dans le "head.html" de Hybrid les ligne d'appel au script jQuery avec les fichiers .js déposer dans le dossier [/b]/js/[/b] du thème Hybrid + les modifs qui vont bien.

<script type="text/javascript" src="{{tpl:BlogThemeURL}}/js/jquery.min.js" ></script>
<script type="text/javascript" src="{{tpl:BlogThemeURL}}/js/jquery-ui.min.js" ></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
	});
</script>

Envoyer les images dans le dossier /img/ du thème Hybrid....et voila!

Tout marche a la perfection...
Reste juste à essayer de débattre, se dépatouiller pour trouver comment changer les URL's..etc en code DOTCLEAR a fin que la reconnaissance se fasse d'elle même et non manuelle

Merci d'avance pour tous coups de mains ou idées proposées

comment peut on faire?
commencer par changer les <h2></h2> par des <h2 class="post-title"></h2> ???

Hors ligne

#2 2009-11-29 14:39:17

SiK_22
Membre
Inscription : 2008-08-23

Re : [Slider] Integrer un slider

C'est sympa de voir qu'on a inspiré d'autres personnes.

Par contre, mon propre script est vraiment de la bidouille à certain endroit, c'est pour ca que je ne le propose pas encore à la communauté. Je vais le retravailler un peu cette après-midi et je verrais si j'arrive à un résultat correct.

Pour le moment, mon soucis c'est qu'Opéra ne comprend pas très bien le width: 25% des post par rapport au conteneur (qui fait 400% du diaporama, pour cacher sur la droite les posts), si quelqu'un peut trouver pourquoi...
Dans le même ordre d'idée, IE n'affiche pas les vidéos, sans que je sache pourquoi. D'ailleurs, ma méthode très bidouille génère 2 vidéos à chaque fois (cadre dextra dans le code), je suis obligé d'en effacer une pour garder un code correct.

Sinon I_Love_Dc, tu pourrais nous faire partager le résultat final de ton travail :) ?


Fab.

Hors ligne

#3 2009-11-29 19:42:23

SiK_22
Membre
Inscription : 2008-08-23

Re : [Slider] Integrer un slider

Après une dure après-midi de travail, j'ai pu refaire une bonne partie du script pour qu'il soit plus beau, simple et correct, même si de la bidouille reste encore présente sur un point.

Je voulais donc un script léger, qui ne nécessite pas de plugin supplémentaire, et soit relativement fonctionnelle et joli. La première version etait calqué sur le HTML mis en place, qui mérite aussi à être plus joli, mais qui fonctionne bien pour le moment.

Pour expliquer le principe, on ouvre un <div id="diaporama">, avec un <div id="conteneur"> dedans. Le diaporama fais 100% en largeur, et le conteneur 400% (valeur prévue pour 4 billets, mais qui permet plus). Les billets affichés font tous 25% des 400%, soit 100% la aussi. On prend simplement le premier billet, qu'on tire vers la gauche avec une marge négative. Pour reprendre ce à quoi je pensais en le faisant, ce sont les "languettes" dans les livres pour enfants, qui font défiler les images dans la page.
Pour que l'effet soit continu, on prend le premier qu'on copie toute à la fin. Une fois arrivé à cette fin, on repasse directement sur la première, pour que l'effet ne soit pas perceptible à l'œil nu. C'est comme si la première et la dernière image de la languette étaient les même, et qu'on tirait très vite pour revenir au début, donnant l'illusion de voir une boucle.

Le deuxième principe que je voulais, c'était avoir le post d'un coté, et une illustration de l'autre coté. Mais la plupart des sliders que je voyais n'intégrait que des images, alors que je voulais absolument les vidéos (c'est ce qui a déclenché la création du script fait main au lieu d'adapter un existant et/ou utiliser un plugin).
La technique est simple. On fait un display: none; sur les <object> du post, on prend le premier via jQuery, on le clone et on le colle dans le cadre d'illustration, en ajustant la taille.
Puisqu'on ne pouvait pas faire la même technique avec une image (tpl:EntryFirstImage renvoie une balise <img>, qui aurait pu etre en conflit avec un <object>), j'ai rusé en affichant l'image ailleurs, et en la cachant avec un display: none, pour récupérer l'attribut src pour le mettre en background: url(src) du cadre d'illustration. Ainsi, l'image obtenue n'est pas recadrée pour coller au cadre, mais s'affiche en fond, ce qui est plus joli. On peut très bien avoir un <object> dans le cadre, qui cacherait l'image derrière.

Le reste du code a été pour gérer la lecture du slider, j'ai réussi cette après-midi à en faire une fonction infinie au lieu d'une queue mise bout-à-bout 300 fois (oui, c'était bidouille). J'ai aussi disposé un bouton lecture/pause et des accès aux différents billets.

Le gros du travail de mon après-midi a été de faire quelque chose de flexible, qui n'est pas limité par le nombre de billet. La plupart des sliders proposent un nombre fixe de billet, 4 ou 5, et je ne trouvais pas ca très pratique. J'ai réussi à le faire puisque tout se base sur un <tpl:entries> (modulable donc), le "tirage de languette" autant de fois qu'il y a de billet, les boutons pour chaque sont affichés et ajuster en fonction aussi.

Voici le code HTML, il n'est pas spécifique au thème Hybrid, mais vous devrez changer les tailles normalement. Je ne prends ici que les billets "selectionnés", mais à vous de faire votre propre selecteur. J'ai mis un lastn="100" car il semblerait qu'il n'en prenait que 5 par défaut.

<div id="diaporama">        
  <div id="dcontainer"><tpl:Entries selected="1" lastn="100"><div id="diapo{{tpl:EntryID}}" class="post {{tpl:EntryIfOdd}} {{tpl:EntryIfFirst}}">             
        <div class="dextra"></div>                      
<div class="dpost-content">{{tpl:EntryFirstImage class="dextraimg" size="o"}}
  <tpl:EntryIf has_comment="1">                                       
    <a href="{{tpl:EntryURL}}#comments" class="comment_count">{{tpl:EntryCommentCount none="0" one="1" more="%s"}}</a>
    </tpl:EntryIf>                             
    <h2 class="post-title">                         
      <a href="{{tpl:EntryURL}}">{{tpl:EntryTitle encode_html="1"}}</a></h2>                                                              
    <!-- # Entry with an excerpt -->                                           
    <tpl:EntryIf extended="1">                                                   
      <div class="post-content">{{tpl:EntryExcerpt}}
      </div>            
      </tpl:EntryIf>                                                   
      <!-- # Entry without excerpt -->                                                   
      <tpl:EntryIf extended="0">                                                           
        <div class="post-content">{{tpl:EntryContent}}<br />                                                            
        </div>                                                           
        </tpl:EntryIf>                       
</div>
<!-- End dpost-content -->
<div class="dpost-info">
  <p class="read-it">                                                                   
    <a href="{{tpl:EntryURL}}" title="{{tpl:lang Continue reading}} {{tpl:EntryTitle encode_html="1"}}">{{tpl:lang Continue reading}}...</a>                                                           
  </p>                                        
  <tpl:EntryIf has_category="1">                                                  
    <a class="post-category" href="{{tpl:EntryCategoryURL}}">{{tpl:EntryCategory encode_html="1"}}</a>                                                  
    </tpl:EntryIf>                                                   
    <p class="post-info">{{tpl:EntryDate}}, {{tpl:EntryTime}}
    </p>
</div></div><!-- End Post--></tpl:Entries></div>  <!--  End dcontainer -->   
</div><!-- End Diaporama -->

Attention ! Ne touchez pas à l'indentation au début et à la fin. Si les blocs sont décollés dans le code, il apparait des espaces entre les blocs, qui sont bien visible sur la page. Ainsi, les diapositives se décalent progressivement, à la fin on voit le début de la suivante apparaitre.

Voici le CSS que j'utilise, libre à vous de changer les couleurs et les hauteurs, mais évitez de tout changer si vous ne savez pas ce que ca implique.

 /* Diaporama
------------------------------------------------------------------------ */

#diaporama {
display:none;
float:left;
height:24em;
margin:1em 0 0;
overflow:hidden;
padding:0;
width:916px;
}
#diapochanger {
color:white;
display:inline-block;
float:left;
margin:1em 0;
width:40px;
}

#diapochanger span {
cursor: pointer;
background: #3FA9FF;
float:left;
text-align:center;
width:40px;
font-weight: bolder;
}

#dcontainer {
height:24em;
margin:0;
padding:0;
width:400%;
}

#diaporama .post {
width: 25%;
min-width: 25%;
height: 24em;
display: -moz-inline-stack;
display: inline-block;
vertical-align: top;
margin: 0;
padding: 0;
position: relative;
}
#diaporama .post .dextra {
width: 40%;
height: 23.9em;
float: left;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
#diaporama .post .dpost-content {
width: 58%;
float: right;
padding: 0 1%;
position: relative;
border-top:1px solid #CCCCCC;
}
#diaporama .post .dpost-content h2 a {
color: #333;
font-weight: normal;
border: none;
}
#diaporama .post .dpost-content a {
color: #3FA9FF;
font-weight: 700;
border-bottom: 1px dotted #3FA9FF;
}
#diaporama .post .dpost-content a:hover {
text-decoration: none;}

#diaporama .dpost-info {
position: absolute;
bottom: 0;
right: 0;
width: 60%;
border-bottom:1px solid #CCCCCC;
}

#diaporama .post-content {
height: 21em;
overflow: hidden;
}

#diaporama .comment_count{
display:block;
float:right;
margin-right: 1em;
padding:0.25em 1em;
color: white;
text-decoration: none;
}

#diaporama .post-category {
float: left;
padding: 0 1%;
background: #F5F5F5;
}
#diaporama .post-info {
display: inline;
float: right;
padding: 0 1em;
margin: 0;
background: #F5F5F5;
}

#diaporama .read-it {
background: #3FA9FF;
color: white;
text-align: center;
margin: 1em;
padding: 1em;
}
#diaporama .read-it a{
color: white;
}

#diaporama .post sup, #diaporama .post .footnotes, #diaporama .post .post-content h2, #diaporama .post .post-content h3, #diaporama .post .post-content h4, #diaporama .post object, #diaporama .post img {
display: none;
}

#diaporama .post .dextra object {
display: inline;
width: 99%;
height: 24em;
}

Et finalement, le script en lui même.

$(document).ready(function(){
// Diaporama
$("#diaporama").after("<div id='diapochanger'></div>");
$("#diapochanger").append("<span id='play'>Play</span>");
$("#diapochanger").append("<span id='stop'>Stop</span>");
for ( var nbrPost = 1; nbrPost <= $("#diaporama .post").size() ; nbrPost++) {
 $("#diapochanger").append("<span id='dchanger" + nbrPost + "' class='piste'>" + nbrPost + "</span>");
}
$("#diapochanger span").height( $("#diaporama").height() / $("#diapochanger span").size() ).css("line-height",$("#diapochanger span").height() + "px");
$("#diapochanger span:odd").css("opacity","0.5");

$("#diaporama .read-it").css("opacity","0.8");

var postclone = $("#diaporama .post:first").clone();
$("#diaporama .post:last").after(postclone);

$("#diaporama .post").each(function(){
var id = $(this).attr("id");
var clone = $("#diaporama .post[id='" + id + "'] .dpost-content:has(object) object:first").clone();
$("#diaporama .post[id='" + id + "'] .dextra").addClass(id);
$("#diaporama .post[id='" + id + "'] .dextra[class*='" + id + "']").html(clone);

$("#diaporama .post[id='" + id + "'] .dextraimg").addClass(id);
var src = $("#diaporama .post[id='" + id + "'] .dextraimg[class*='" + id + "']").attr("src");
$("#diaporama .post[id='" + id + "'] .dextra[class*='" + id + "']").css("background","white url('"+ src + "') no-repeat center");
});

function Lecture() {
  for ( var nbrPost = 1; nbrPost < $("#diaporama .post").size() ; nbrPost++) {
  $("#diaporama .post:first").animate( {opacity : "1" }, 3500);
  $("#diaporama .post:first").animate( {marginLeft : "-=25%"}, 1000);
  }
$("#diaporama .post:first").animate( {marginLeft : "0%"}, 0, Lecture);
}
function reinitialiser() {
$("#diaporama .post:first").queue("fx", []).animate( {marginLeft : "0%"}, 1000, Lecture);
}

$("#diaporama .post:first").animate( {opacity : "1" }, 3500);
Lecture();

$(".piste").click( function() {
var index = $(".piste").index(this);
var taille = $("#diaporama .post").width();
var margin = -(index*taille);
$("#diaporama .post:first").stop().queue("fx", []).animate( {marginLeft : margin}, (index + 1) * 500);
$("#diaporama .post:first").animate( {opacity : "1" }, 30000, reinitialiser);
});

$("#play").click( function() {
$("#diaporama .post:first").queue("fx", []).animate( {marginLeft : "0%"}, 1000, Lecture);
});
$("#stop").click( function() {
$("#diaporama .post:first").queue("fx", []);
});

$("#diaporama").slideDown("5000");

// End Diaporama
});

Tout ce code est fonctionnel, et provient de mon blog.

Si vous avez des questions sur des commandes, comment inclure le slider, comment modifier certains paramètres, n'hésitez pas à les poster ici-même, je vous répondrais. Je vous conseille d'ailleurs d'en poser avant de tenter une intégration, sauf si vous savez ce que vous faites. Pour ajouter des fonctions/effets, ca sera selon mes capacités et le temps que j'aurais.

Amusez-vous bien !


Fab.

Hors ligne

#4 2009-11-29 19:49:58

SiK_22
Membre
Inscription : 2008-08-23

Re : [Slider] Integrer un slider

Et je terminerais mon triple post avec ces remarques :

- Vous pouvez le voir en action à l'adresse de mon blog (signature).

Problèmes à fixer :
-  Opéra qui reconnait mal les tailles relatives des billets (si quelqu'un à une solution ou une piste, je suis preneur)
- N'affiche pas les vidéos sous IE, et l'effet est particulièrement moche à gauche, la solution serait de ne pas avoir le script sous IE (radical mais c'est IE..)

A venir :
- Reformatage du HTML pour qu'il soit plus propre.
- Ajout éventuel d'opacité entre les billets
- Affichage du billet en cours dans la liste sur le coté

Si quelqu'un veut en faire un plugin, qu'il me contacte.


Fab.

Hors ligne

#5 2009-11-29 22:39:28

i_love_dc
Membre
Inscription : 2007-07-13

Re : [Slider] Integrer un slider

Bon joli joli Sik_22 reste plus qu' a tester tout ca en temps et en heure...

Pour le plugin je te conseil de voir avec JcDenis qui est un performeur en matière de pluginage ;-)

Hors ligne

#6 2009-11-29 23:29:55

SiK_22
Membre
Inscription : 2008-08-23

Re : [Slider] Integrer un slider

Comme dirait Perceval, "c'est pas faux".

Sinon, j'ai rebidouillé un peu tout cela pour que ca soit plus propre (double container par exemple) et j'ai réglé un des problèmes d'Opéra en mettant tout en x * 916px, la largeur du contenu (même si maintenant l'effet de transition est inexistant). Avec ma chance habituelle, ca marche un peu mieux qu'avant soue IE, mais pas l'ombre d'un changement concernant les vidéos, je constate que ca viendrait du script puisque la balise <div id="dextra"> est belle et bien vide.

Je continuerais tout ca plus tard.


Fab.

Hors ligne

#7 2009-11-30 09:41:58

i_love_dc
Membre
Inscription : 2007-07-13

Re : [Slider] Integrer un slider

Erff j'avais pas vu sous IE6 et IE7 c'est u gros gros bazar :-(

Hors ligne

#8 2009-11-30 14:26:43

JcDenis
Membre
Lieu : Lyon, France
Inscription : 2007-08-31
Site Web

Re : [Slider] Integrer un slider

@i_love_dc,
J'avais délibérément zappé cette discussion car je sentais venir mon envie d'essayer...
Je n'ai pas trop le temps en ce moment, j'ai déjà pris pas mal de retard sur mes plougs, mais si j'ai éventuellement 5min de trop je regarderais pour faire une intégration. (si personne ne le fait avant.)


Cordialement,
_JC | Intérimaire | En mode invisible

Hors ligne

#9 2009-11-30 14:34:04

i_love_dc
Membre
Inscription : 2007-07-13

Re : [Slider] Integrer un slider

Alors merci d'avance pour une éventuelle futur tentative de ploug de ta part ;-)

Hors ligne

#10 2009-11-30 15:10:22

SiK_22
Membre
Inscription : 2008-08-23

Re : [Slider] Integrer un slider

Merci bien JcDenis, envoie moi un tweet pour avoir la dernière version du truc.


Fab.

Hors ligne

#11 2009-11-30 15:44:32

JcDenis
Membre
Lieu : Lyon, France
Inscription : 2007-08-31
Site Web

Re : [Slider] Integrer un slider

i_love_dc a écrit :

Alors merci d'avance pour une éventuelle futur tentative de ploug de ta part ;-)

SiK_22 a écrit :

Merci bien JcDenis, envoie moi un tweet pour avoir la dernière version du truc.

N'allez pas trop vite rien n'est encore fait! Comment ils me refilent le boulot ces deux!
Je fini le ticket #260 du lab et je suis à vous.


Cordialement,
_JC | Intérimaire | En mode invisible

Hors ligne

#12 2009-11-30 17:42:53

Moe
Responsable du mini-bar
Lieu : France
Inscription : 2004-09-19
Site Web

Re : [Slider] Integrer un slider

JcDenis a écrit :

Comment ils me refilent le boulot ces deux!

Ils auraient tort de s'en priver, ça marche. :)

Hors ligne

#13 2009-11-30 19:10:32

SiK_22
Membre
Inscription : 2008-08-23

Re : [Slider] Integrer un slider

Et puis dans le fond, tu aimes ca non ? Au moins un peu.

J'ai essayé une bonne partie l'aprem de faire correspondre le changement de diapos à une animation du numéro sur le coté, sans succès. jQuery est vraiment bien, mais pour la queue, c'est une horreur. Le problème réside dans la sélection de chaque <span class="piste">, pour les animer à la suite dans la boucle for (function Lecture).
Même en faisant une deuxième fonction, synchronisée avec la première, impossible de faire en sorte que l'animation suive la boucle (d'abord 1, puis 2, puis ... jusque n le nombre de piste). J'ai contourné le problème dans Lecture car je ne fais bouger que le .post:first, j'ai eu de la chance.

Donc si quelqu'un sait comment se dépatouiller avec ca, je veux bien. Sachant que les .get(i), .eq(i) ou :eq(i) ou même $("")[i] ne fonctionne pas dans une boucle, et qu'un .each() le fait pour tous en même temps. J'ai voulu contourner en faisant correspondre un attribut (piste 1 class A, post 1 class A aussi et ainsi de suite, pour faire un selecteur $("x[id="A"]) anime un $("y[id="A")), mais impossible la aussi.

Au rang des reussites, j'ai juste mis une variable pour la largeur, pour que le script soit plus simple à utiliser.


Fab.

Hors ligne

#14 2009-11-30 20:51:39

i_love_dc
Membre
Inscription : 2007-07-13

Re : [Slider] Integrer un slider

alors désolé d'être qu' un tout petit et de ne pas pouvoir apporter une reelle contribution....
J'essaye de mon coté de voir du coté css pour être compatible avec IE6 et IE7 mais j'y arrive pas c chaud

Hors ligne

#15 2009-11-30 20:53:33

BG
Membre
Lieu : 17
Inscription : 2005-05-11
Site Web

Re : [Slider] Integrer un slider

Très intéressant ce fil, l'effet est sympa Sik_22 !


Installer votre premier blog : http://abc.dotaddict.org
Documentation Dotclear2:    http://fr.dotclear.org/documentation/2.0/
Astuces (Tips), Plugins, Thèmes: http://dotaddict.org/

Hors ligne

#16 2009-11-30 21:00:57

SiK_22
Membre
Inscription : 2008-08-23

Re : [Slider] Integrer un slider

J'ai remis les mains dedans ce soir, en voulant mettre le thème en largeur relative. Tous les morceaux sont donc à la bonne taille comparé à leurs parents / à la page elle même.

Par contre, si on charge la page, et qu'on la redimensionne, hop la, l'effet est gâché... Il va falloir que je joue avec .resize() surement.

Le dernier bug sous IE reste la vidéo (bug qui viendrait du script), sinon l'affichage est nickel et c'est un miracle à mes yeux. Opera a toujours du mal, mais je présume que c'est le display: inline-block; qui est mal supporté, sans pouvoir vérifier. L'effet est moins beau, mais ca marche quand même.

Sous FF 3.6 et Safari, c'est un régal, et ca fait plaisir.

On approche d'une version plus que finale !


Fab.

Hors ligne

#17 2009-11-30 21:05:07

i_love_dc
Membre
Inscription : 2007-07-13

Re : [Slider] Integrer un slider

SiK_22 tu a modifier quoi au niveau du css pour un affiche correct sous ie6 et ie7 stp
(ou alors jai pas compris)???

Hors ligne

#18 2009-11-30 21:09:05

i_love_dc
Membre
Inscription : 2007-07-13

Re : [Slider] Integrer un slider

Bon ok je viens de voir ton site sous IE6 ET IE7 la compatibilité n'est toujours pas bonne...
Donc effectivement désolé, une fois n'est pas coutume jai mal lu ou mal compris ....

Hors ligne

#19 2009-11-30 21:17:11

SiK_22
Membre
Inscription : 2008-08-23

Re : [Slider] Integrer un slider

Euh qu'est ce que tu appelles "pas bonne" ? Hormis la vidéo, le CSS m'a l'air bon puisque je ne constate pas de soucis avec mon IE... 8, et zut alors j'avais même pas regardé.

Si quelqu'un peut me montrer ce que ca rend sous IE 7 et 6 ?

Pour le resize, ca marche très bien et quand c'est du premier coup, ca fait plaisir.


Fab.

Hors ligne

#20 2009-11-30 21:48:25

SiK_22
Membre
Inscription : 2008-08-23

Re : [Slider] Integrer un slider

Oups, j'ai encore parlé trop vite, le resize fonctionne mais me fait une chose étrange : la queue Lecture comporte normalement 11 animations à peu près (d'après FireQuery), normal puisqu'il y a nombre de post * 2 animations : la transition, et la pause sur la diapos (une animation d'opacité pendant 3 secondes).

Quand je resize, j'ai beau réinitialiser la queue, quand Lecture() se relance, il ne prend plus en compte les animations de pause, et enchaine les transitions.

Et si après resize, je clique sur Stop puis Play, la queue est bonne et les pauses se font !

En attendant de corriger ca, je pense que je vais laisser un redémarrage manuel après redimensionnement, ca sera plus simple. Mais si quelqu'un a une idée d'ou ca vient, je lui tire mon chapeau.


Fab.

Hors ligne

#21 2009-11-30 21:56:56

i_love_dc
Membre
Inscription : 2007-07-13

Re : [Slider] Integrer un slider

Pour voir les resultat (malheureusement foutoirdesque) des différentes versions de IE
- IE 6
- IE 7
- IE 8
Tu peut utiliser "gratuitement" se freeware IECollection (internet explorer collection)
Tu verra et pourra juger voir résoudre toi même du résultat sous les versions obsolètes de IE8. Car sincèrement faire une prise d'écran ne te montrerai pas trop non plus le résultat plus que bordélique sous ses versions (IE6 et IE7)

Enfaite pour te décrire vaguement, les post ne s'enchainent pas à la "queueleuleu" mais ils ont tous les uns sous les autres
écrasant carrément le contenu du blog, foutant la mise en page en vrac...
Mais par contre, le premier post du slider  lui se barre tout de même vers la gauche (mais sort bizarrement) et laisse un gros espaces blanc!

Bref, DL le programme installe le et essaye les deux dites versions...tu te rendra compte par toi même car c'est un peu compliqué à expliquer.

Hors ligne

#22 2009-11-30 22:02:59

i_love_dc
Membre
Inscription : 2007-07-13

Re : [Slider] Integrer un slider

ERFF désolé erreur de lien

- IECollection (internet explorer collection).

La dernière version en date est la Internet Explorer Collection 1.6.0.3

Hors ligne

#23 2009-12-01 08:32:18

i_love_dc
Membre
Inscription : 2007-07-13

Re : [Slider] Integrer un slider

Bon...Alors jai reussi un grand pas (lol) dans la résolution des bugs d'affichage chez IE6 et IE7

D'origine SiK_22 ton css (code-ci dessus)

#diaporama {
display:none;
float:left;
height:24em;
margin:1em 0 0;
overflow:hidden;
padding:0;
width:916px;
}

Mais sous IE6+7, les billets s'affichent en cascade les uns sous les autres écrasant la mise en page et le contenu du blog.
Pour ne plus avoir les billets en cascade les uns sous les autres ils suffit d'ajouter un position:relative;

#diaporama {
position: relative;
display:none;
float:left;
height:24em;
margin:1em 0 0;
overflow:hidden;
padding:0;
width:916px;
}

L'affichage devient alors correct (comme sous FF et respecte la mise en page!) se qui est déjà bien...
Reste un autre problème et de taille. Chez moi (reste à savoir chez vous sous ses dites versions IE6+7)...
Le premier billet et tout se qu'il contient s'affiche correctement, il s'en va ensuite vers la gauche, jusque l'a tout est normal...
Mais sous IE6+7 il laisse un espace vide et blanc, puis ensuite au bout de quelques secondes (suivant le nombres de billets sélectionnes)  ça repart au début de la boucle en affichant le premier billet...ainsi de suite...
Si se bug se résolu..l'affichage serait parfait sous toutes les versions différentes... :-(

Voila pour ma pitite contribution du jour ;-)

Hors ligne

#24 2009-12-01 13:15:12

Azork
Membre
Inscription : 2006-03-14
Site Web

Re : [Slider] Integrer un slider

Salut,
j'ai fait un test de mon cote pour voir, j'ai rien touche aux fichiers sources sauf pour intégrer le slider au fichier home.html.
voici le code que j'utilise:

<div id="featured" >

      <tpl:Entries lastn="4">
        <tpl:EntriesHeader><ul class="ui-tabs-nav"></tpl:EntriesHeader>
        <tpl:EntryIf first="1">
        <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-{{tpl:EntryID}}"><a href="#fragment-{{tpl:EntryID}}"><img src="images/image1-small.jpg" alt="" /><span>{{tpl:EntryTitle encode_html="1"}}</span></a></li>
        </tpl:EntryIf>
        <tpl:EntryIf first="0">
        <li class="ui-tabs-nav-item" id="nav-fragment-{{tpl:EntryID}}"><a href="#fragment-{{tpl:EntryID}}"><img src="images/image4-small.jpg" alt="" /><span>{{tpl:EntryTitle encode_html="1"}}</span></a></li>
        </tpl:EntryIf>
        <tpl:EntriesFooter></ul></tpl:EntriesFooter>
      </tpl:Entries>

      <tpl:Entries lastn="4">
        <tpl:EntryIf first="1">
          <div id="fragment-{{tpl:EntryID}}" class="ui-tabs-panel" style="">
            <img src="images/image1.jpg" alt="" />
            <div class="info" >
              <h2><a href="#" >{{tpl:EntryTitle encode_html="1"}}</a></h2>
              <p>{{tpl:EntryContent full="1" encode_html="1" remove_html="1" cut_string="100"}}...<a href="#" >read more</a></p>
            </div>
          </div>
        </tpl:EntryIf>
        <tpl:EntryIf first="0">
          <div id="fragment-{{tpl:EntryID}}" class="ui-tabs-panel ui-tabs-hide" style="">
            <img src="images/image2.jpg" alt="" />
            <div class="info" >
              <h2><a href="#" >{{tpl:EntryTitle encode_html="1"}}</a></h2>
              <p>{{tpl:EntryContent full="1" encode_html="1" remove_html="1" cut_string="100"}}...<a href="#" >read more</a></p>
            </div>
          </div>
        </tpl:EntryIf>
      </tpl:Entries>

</div>

c'est du brut de décoffrage, me reste juste a voir pour les images maintenant, mais l'effet est plutôt sympa.

c'est visible ici: http://www.azork.net/dotcleartest/index.php?theme=ui

Ciao

Hors ligne

#25 2009-12-01 13:26:10

i_love_dc
Membre
Inscription : 2007-07-13

Re : [Slider] Integrer un slider

Azork.. juste pour confirmation
sa se base sur le slider que je donne en lien dans le billet 1 ou sur celui de SiK_22 ??

Hors ligne

Vous n'êtes pas identifié(e).

Pied de page des forums

Sites map