Dotclear

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

Annonce

13 février 2024 Sortie de Dotclear 2.29

#26 2009-12-01 13:41:33

Azork
Membre
Inscription : 2006-03-14
Site Web

Re : [Slider] Integrer un slider

Salut,

j'ai juste récupéré le code source via le site que tu proposes dans ton premier post: http://demo.webdeveloperplus.com/featur … nt-slider/

Ciao

Hors ligne

#27 2009-12-01 13:58:17

i_love_dc
Membre
Inscription : 2007-07-13

Re : [Slider] Integrer un slider

Bon jai fais en 10secondes lol
de legere modifs qui permettent de prendre les URLS

<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 class="post-title">
               <a href="{{tpl:EntryURL}}">{{tpl:EntryTitle encode_html="1"}}</a></h2>
              <p>{{tpl:EntryContent full="1" encode_html="1" remove_html="1" cut_string="100"}}...<a href="{{tpl:EntryURL}}">Lire la suite</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 class="post-title">
               <a href="{{tpl:EntryURL}}">{{tpl:EntryTitle encode_html="1"}}</a></h2>
              <p>{{tpl:EntryContent full="1" encode_html="1" remove_html="1" cut_string="100"}}...<a href="{{tpl:EntryURL}}">Lire la suite</a></p>
            </div>
          </div>
        </tpl:EntryIf>
      </tpl:Entries>

</div>

Par contre a la place du <tpl:Entries lastn="4"> jai voulu mettre un <tpl:Entries selected="1" lastn="100">
Histoire de n'afficher que les post selectionner (pour plus de facilitées) ..ca les affichent, mais tout est figé l'animation etc ne fonctionne plus
(jai du oublier un truc)

jai aussi tester le FirstEntryImages mais sans succès...
par contre le code est valide sous toutes les versions de IE ;-)

Hors ligne

#28 2009-12-01 14:05:48

Azork
Membre
Inscription : 2006-03-14
Site Web

Re : [Slider] Integrer un slider

i_love_dc a écrit :

Par contre a la place du <tpl:Entries lastn="4"> jai voulu mettre un <tpl:Entries selected="1" lastn="100">
Histoire de n'afficher que les post selectionner (pour plus de facilitées) ..ca les affichent, mais tout est figé l'animation etc ne fonctionne plus
(jai du oublier un truc)

ça marche chez moi pourtant pour les billets sélectionnés
par contre, étant donne que le slider est supposé afficher 4 billets , moi je ferais ma boucle comme cela:

<div id="featured" >

      <tpl:Entries selected="1" 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 selected="1" 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>

Hors ligne

#29 2009-12-01 14:19:57

Azork
Membre
Inscription : 2006-03-14
Site Web

Re : [Slider] Integrer un slider

tiens voila le code final pour afficher les images et les liens:

<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}}">{{tpl:EntryFirstImage size="sq"}}<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}}">{{tpl:EntryFirstImage size="sq"}}<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="">
            {{tpl:EntryFirstImage size="s"}}
            <div class="info" >
              <h2><a href="{{tpl:EntryURL}}" >{{tpl:EntryTitle encode_html="1"}}</a></h2>
              <p>{{tpl:EntryContent full="1" encode_html="1" remove_html="1" cut_string="100"}}...<a href="{{tpl:EntryURL}}" >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="">
            {{tpl:EntryFirstImage size="s"}}
            <div class="info" >
              <h2><a href="{{tpl:EntryURL}}" >{{tpl:EntryTitle encode_html="1"}}</a></h2>
              <p>{{tpl:EntryContent full="1" encode_html="1" remove_html="1" cut_string="100"}}...<a href="{{tpl:EntryURL}}" >read more</a></p>
            </div>
          </div>
        </tpl:EntryIf>
      </tpl:Entries>

</div>

Hors ligne

#30 2009-12-01 15:09:03

i_love_dc
Membre
Inscription : 2007-07-13

Re : [Slider] Integrer un slider

OK j'avais fais une erreur oui desolé...
Par contre reste le hic des images..peut -on calibrer les images ?

Car en "S" elles sont trop petites et en "M" elles dépassent..malgré quelles dépassent on peu pas forcer l'affichage juste dans la box a image  (meme si l image st trop grande?

Hors ligne

#31 2009-12-01 15:40:50

Azork
Membre
Inscription : 2006-03-14
Site Web

Re : [Slider] Integrer un slider

i_love_dc a écrit :

OK j'avais fais une erreur oui desolé...
Par contre reste le hic des images..peut -on calibrer les images ?

Car en "S" elles sont trop petites et en "M" elles dépassent..malgré quelles dépassent on peu pas forcer l'affichage juste dans la box a image  (meme si l image st trop grande?

oui ça doit être possible
fait un test en éditant le fichier featured.css et ajoute une règle css genre:

#featured .ui-tabs-panel img{ 
	width:400px; height:250px; 
	display: block;
}

après ça risque d'être moche si ton image n'est pas au format 400x250, mais ça marche...

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

Hors ligne

#32 2009-12-01 16:29:56

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

Re : [Slider] Integrer un slider

Azork a écrit :
i_love_dc a écrit :

OK j'avais fais une erreur oui desolé...
Par contre reste le hic des images..peut -on calibrer les images ?

Car en "S" elles sont trop petites et en "M" elles dépassent..malgré quelles dépassent on peu pas forcer l'affichage juste dans la box a image  (meme si l image st trop grande?

oui ça doit être possible
fait un test en éditant le fichier featured.css et ajoute une règle css genre:

#featured .ui-tabs-panel img{ 
	width:400px; height:250px; 
	display: block;
}

après ça risque d'être moche si ton image n'est pas au format 400x250, mais ça marche...

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

Faut récupérer la taille des miniatures des images depuis les settings du blog :) puis ajouter la règle CSS avec le behavior publicHeadContent


Cordialement,
_JC | Intérimaire | En mode invisible

Hors ligne

#33 2009-12-01 16:37:48

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

Re : [Slider] Integrer un slider

PS: c'est dans le cas ou ça sortira en version plugin :)

fichier _public.php

<?php
$core->addBehavior('publicHeadContent',array(publicSlider','publicHeadContent'));
class publicSlider
{
  public static function publicHeadContent($core)
  {
    $s = $core->blog->settings->media_img_s_size;

    echo 
    "\n<!-- CSS for slider --> \n".
    "<style type=\"text/css\"> \n".
    "  #featured .ui-tabs-panel img { width:".$s."px; display: block; }\n".
    "</style>\n";
    }
}
?>

Cordialement,
_JC | Intérimaire | En mode invisible

Hors ligne

#34 2009-12-01 20:50:50

SiK_22
Membre
Inscription : 2008-08-23

Re : [Slider] Integrer un slider

(j'étais persuadé d'avoir déjà répondu avant)

i_love_dc a écrit :

Bon...Alors jai reussi un grand pas (lol) dans la résolution des bugs d'affichage chez IE6 et IE7
...
Voila pour ma pitite contribution du jour ;-)

J'avais déjà remarqué le changement, je pense même que j'ai du effacé ce position: relative; au cours de mon travail. Mais merci beaucoup, c'est corrigé.

Je vais essayer ton programme, et voir ce que je peux faire.

Pour le calibrage d'image sur l'essai d'Azork, vous pouvez passer par la même méthode que moi (mettre l'image en fond du cadre), c'est un peu moins prise de tête.


Fab.

Hors ligne

#35 2009-12-01 20:58:51

i_love_dc
Membre
Inscription : 2007-07-13

Re : [Slider] Integrer un slider

Sik_22 mettre l'image en fond mais comment?

Hors ligne

#36 2009-12-01 21:42:25

SiK_22
Membre
Inscription : 2008-08-23

Re : [Slider] Integrer un slider

Tu affiches la miniature quelque part, en display: none ; avec une boucle .each() de jQuery, tu récupères l'attribut src que tu met en background: url("src_copié"); et le tour est joué.

C'est ce que j'ai fait dans mon script, c'est vraiment la partie bidouille mais ca marche très bien je trouve. Et avec CSS3 tu peux rajouter des propriétés pour choisir comment le fond est appliqué au cadre (je suis gentil : http://www.alsacreations.com/tuto/lire/ … round.html ) si tu veux redimensionner un peu.


Fab.

Hors ligne

#37 2009-12-01 23:19:24

SiK_22
Membre
Inscription : 2008-08-23

Re : [Slider] Integrer un slider

Après moults essais de différents mécanismes, le problème d'Opera a de grandes chances de venir de display: inline-block;

Si a la place d'une marge négative, on efface le billet, le suivant prend la place uniquement quand le précédent est totalement caché, et ne se décale pas progressivement. On obtient donc le même effet de cassure entre les diapositives, seule la transition  est différente.

Si au lieu d'une marge à droite, on utilise une marge vers le haut (slider avec les billets venant "d'en bas"), le problème est résolu, mais l'enchainement ne dépasse pas la deuxième diapo ; il ne semble pas apprécier d'avoir du contenu caché "au dessus" de lui.

je vais peut-etre voir pour un slider, qui n'en sera plus un, sous forme d'accordéons.


Fab.

Hors ligne

#38 2009-12-02 08:00:32

i_love_dc
Membre
Inscription : 2007-07-13

Re : [Slider] Integrer un slider

SiK_22 > merci pour le lien d'alsa...c'est plus qu'instructif, malheureusement ca n'a pas l'air de passer sur tous les navigateurs.
Et tes conseils plus haut sont trop complexes lorsque que l'on connait rien au jquery.

JcDenis > J'ai pas encore tester ton bout de code a inclure dans le _public.php...
Mais juste pour infos (j'ai du mal a suivre hein...désolé) ton bout de code...il fait quoi exactement??

Hors ligne

#39 2009-12-02 13:51:30

SiK_22
Membre
Inscription : 2008-08-23

Re : [Slider] Integrer un slider

Peut-être en effet. La partie du code est la suivante :

$("#diaporama .post").each(function(){ // pour chaque post
var id = $(this).attr("id"); // on récupère l'id pour différencier les posts, et mettre tout au bon endroit
var clone = $("#diaporama .post[id='" + id + "'] .dpost-content:has(object) object:first").clone(); // on prend la vidéo s'il y en a une
$("#diaporama .post[id='" + id + "'] .dextra").addClass(id); // on diférencie chaque cadre de gauche (le cadre d'illustration)
$("#diaporama .post[id='" + id + "'] .dextra[class*='" + id + "']").html(clone); // on y insère la video

$("#diaporama .post[id='" + id + "'] .dextraimg").addClass(id); // on différencie la miniature cachée
var src = $("#diaporama .post[id='" + id + "'] .dextraimg[class*='" + id + "']").attr("src"); // on prend son attribut src
$("#diaporama .post[id='" + id + "'] .dextra[class*='" + id + "']").css("background","white url('"+ src + "') no-repeat center"); // on le met en background du cadre d'illustration
});

Voila comment ca marche, après il faut adapter selon votre HTML.


Fab.

Hors ligne

#40 2009-12-03 08:08:03

i_love_dc
Membre
Inscription : 2007-07-13

Re : [Slider] Integrer un slider

En tous cas la version "la plus stable" (sur tous types et version de navigateurs) reste le slider que j'ai proposé et revisité façon DC par les soins d'Azork.
Bon par contre lol pour l'adapter sur le thème Hybrid c'est pas que c'est pas du tout cuit, mais les dimensions des images donnent une
qualitée beaucoup moins belle que la qualité du slider de SiK_22

Hors ligne

#41 2009-12-03 17:58:41

Azork
Membre
Inscription : 2006-03-14
Site Web

Re : [Slider] Integrer un slider

i_love_dc a écrit :

En tous cas la version "la plus stable" (sur tous types et version de navigateurs) reste le slider que j'ai proposé et revisité façon DC par les soins d'Azork.
Bon par contre lol pour l'adapter sur le thème Hybrid c'est pas que c'est pas du tout cuit, mais les dimensions des images donnent une
qualitée beaucoup moins belle que la qualité du slider de SiK_22

tu sais ce que tu devrais faire, c'est tout simplement de créer ton propre theme avec le slider, ça sera peut-être beaucoup plus simple en partant de quelque chose d'adapter. Tu devrais faire un mockup de ta page d'acceuille avec le slider pour deja te donner une idée... (moi j'utilise photoshop pour créer un mockup, mais tu as aussi des logiciels wireframes pour concevoir la structure du site ( tu as par exemple axure rp dispo ici: http://www.axure.com/tour.aspx )...

Hors ligne

#42 2009-12-04 13:48:53

i_love_dc
Membre
Inscription : 2007-07-13

Re : [Slider] Integrer un slider

bah enfaite j'essaye de trouver un slider très simple (code + css + utilisation), léger, et bien sur un minimum joli etc
La je viens de tester le slider proposer par David Yim dans son thème "international"

Il est sympa, léger etc bref il répond à tout les critères et s'intègre plutôt bien à quelques thèmes essayés vite fait
Notamment ton thème "Hybrid" (ca rend même très bien je trouve ;-)

Le but enfaite est de trouver un slider qui pourrait être "standard" et qui éventuellement se transformerai en plugin
(il resterai plus suivant les thème et les personnalisation à de futurs utilisateurs de se peut etre futur plugin de mettre les mains un peu dans le css pour de légères modifs voir dans le codes pour des plus calés.)

Mais de la a réaliser un thème lol...je n'ai pas cette prétention...(comparer a toi je suis une bouseeee!!! :-)

Hors ligne

#43 2009-12-04 14:53:09

david-a
Membre
Inscription : 2009-10-09
Site Web

Re : [Slider] Integrer un slider

Salut,

J'utilise hybrid, et effectivement je pense qu'un slider dans la veine du thème "International" serait sympa dans le bandeau de titre.
Je ne suis pas codeur, mais je pense effectivement qu'il faut chercher de ce côté-là.
Le thème "International" affiche les images des billets sélectionnés, donc assez simple à mettre en place :)


[ ici votre signature ]

Hors ligne

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

Pied de page des forums

Sites map