Dotclear

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

Annonce

#1 2014-11-30 12:36:27

nikrou
Membre
Inscription : 2007-10-02
Site Web

[bxSlider] Un slider basé sur bxSlider

Bonjour,

un p'tit message pour annoncer la toute première version d'un nouveau plugin permettant d'ajouter un slider dans votre blog.
Côté public, le slider est motorisé par bxSlider

Pour le moment, vous pouvez :
- activer/désactiver le plugin
- ajouter une liste d'images.

Le slider s'affiche dans le haut de toutes les pages en utilisant le behavior publicTopAfterContent

La version 0.1.0 est disponible sur mon serveur pour le moment : http://www.nikrou.net/public/plugin-dcSlider-0.1.0.zip


Je préfère être atteint de parkinson plutôt qu'alzheimer : je prefère renverser un peu de ma bière plutôt qu'oublier de la boire !

Présentez vos photos simplement avec Phyxo !

Hors ligne

#2 2014-11-30 13:57:29

i_love_dc
Membre
Inscription : 2007-07-13

Re : [bxSlider] Un slider basé sur bxSlider

Je test à l'instant même, et j'avous ne pas avoir compris, après l'activation du plugin,  comment indiquer une image dans la liste (sans passer par le sélecteur de média) ?

Dernière modification par i_love_dc (2014-11-30 13:58:36)

Hors ligne

#3 2014-11-30 14:01:17

nikrou
Membre
Inscription : 2007-10-02
Site Web

Re : [bxSlider] Un slider basé sur bxSlider

i_love_dc a écrit :

Je test à l'instant même, et j'avous ne pas avoir compris, après l'activation du plugin,  comment indiquer une image dans la liste (sans passer par le sélecteur de média) ?

Il faut mettre les chemins relatifs (ou absolus d'ailleurs) vers les images à utiliser. C'est temporaire mais c'est pour voir ce que ça donne.
Les chemins sont du style : /dotclear/public/image1.jpg


Je préfère être atteint de parkinson plutôt qu'alzheimer : je prefère renverser un peu de ma bière plutôt qu'oublier de la boire !

Présentez vos photos simplement avec Phyxo !

Hors ligne

#4 2014-11-30 14:20:17

i_love_dc
Membre
Inscription : 2007-07-13

Re : [bxSlider] Un slider basé sur bxSlider

ouki je viens d'essayer..

ca fonctionne bien semble t-il (je vais approfondir les tests)...
c'est très jolie et bien fait  :-) je like ^^


j'ai fait des test avec des images de tailles différentes, les grandes sont redimensionné au format pour les petites l'encart reste a la bonne taille aussi (taille certainement standard que tu a prédéfini e suppose ??)

le responsive fonctionne a merveille...une tuerie...

ca fonctionne lorsque un blog utilise "homepagemode"

par contre...le code est pris dans le top, du coup sur un blog de test en local...jai changé le titre du blog H1 par une image et mis un effet de transition + opacité....
l'effet ce repercute sur le slider qui devient opaque (voir invisible) lorsque je pose la souris dessus

Dernière modification par i_love_dc (2014-11-30 14:21:14)

Hors ligne

#5 2014-11-30 14:30:33

nikrou
Membre
Inscription : 2007-10-02
Site Web

Re : [bxSlider] Un slider basé sur bxSlider

i_love_dc a écrit :

ouki je viens d'essayer..

ca fonctionne bien semble t-il (je vais approfondir les tests)...
c'est très jolie et bien fait  :-) je like ^^

Si tu regardes, côté slider je n'ai pas fait grand chose. J'utilise le code proposé par l'auteur sur la page suivante :
http://bxslider.com/ (step 2)

Et j'utilise sa css.

i_love_dc a écrit :

j'ai fait des test avec des images de tailles différentes, les grandes sont redimensionné au format pour les petites l'encart reste a la bonne taille aussi (taille certainement standard que tu a prédéfini e suppose ??)

Je n'ai rien défini. J'utilise les images fournies !

i_love_dc a écrit :

le responsive fonctionne a merveille...une tuerie...

Encore une fois ce n'est malheureusement pas moi ! :-)

i_love_dc a écrit :

ca fonctionne lorsque un blog utilise "homepagemode"

par contre...le code est pris dans le top, du coup sur un blog de test en local...jai changé le titre du blog H1 par une image et mis un effet de transition + opacité....
l'effet ce repercute sur le slider qui devient opaque (voir invisible) lorsque je pose la souris dessus

Après réflexion, je ne pense pas que ce soit le meilleur emplacement pour mettre le slider.
J'ai commencé à faire une version avec le tag à insérer, ce sera mieux je pense. Je vérifie deux ou trois trucs et je le mets à disposition.


Je préfère être atteint de parkinson plutôt qu'alzheimer : je prefère renverser un peu de ma bière plutôt qu'oublier de la boire !

Présentez vos photos simplement avec Phyxo !

Hors ligne

#6 2014-11-30 14:32:35

i_love_dc
Membre
Inscription : 2007-07-13

Re : [bxSlider] Un slider basé sur bxSlider

afin d'éviter des problèmes comme je t'ai indiqué ci-dessus..l'inclusion auto serait mieux apres le "top"



ensuite, je ne sais pas si c'est du a ca, mais il ne manquerait pas un "/ " pour refermer la balise juste après le alt" " ??"

exemple à l'heure actuelle

<ul class="bxslider">
<li><img src="/dotclear/public/dossier1/images-avec-tiret-et-numero1.jpg
" alt=""></li><li><img src="/dotclear/public/dossier1/lol.jpg
" alt=""></li><li><img src="/dotclear/public/dossier1/pouet.jpg
" alt=""></li><li><img src="/dotclear/public/dossier/un_long_nom_avec_des_trucs_bizzarre_.jpg" alt=""></li></ul>
<script type="text/javascript">$(function() {
	$('.bxslider').bxSlider({
	});});</script></div>

me provoque autant d’invalidités que d'images

par contre

<ul class="bxslider">
<li><img src="/dotclear/public/dossier1/images-avec-tiret-et-numero1.jpg
" alt=""/></li><li><img src="/dotclear/public/dossier1/lol.jpg
" alt=""/></li><li><img src="/dotclear/public/dossier1/pouet.jpg
" alt=""/></li><li><img src="/dotclear/public/dossier/un_long_nom_avec_des_trucs_bizzarre_.jpg" alt=""/></li></ul>
<script type="text/javascript">$(function() {
	$('.bxslider').bxSlider({
	});});</script></div>

serait valide je pense non??

Dernière modification par i_love_dc (2014-11-30 14:36:08)

Hors ligne

#7 2014-11-30 14:40:00

nikrou
Membre
Inscription : 2007-10-02
Site Web

Re : [bxSlider] Un slider basé sur bxSlider

Et hop, version 0.2.0 :
http://www.nikrou.net/public/plugin-dcSlider-0.2.0.zip

Au menu :
- ajout d'un tag dcSlider à mettre où on veut.
- un peu d'aide


Je préfère être atteint de parkinson plutôt qu'alzheimer : je prefère renverser un peu de ma bière plutôt qu'oublier de la boire !

Présentez vos photos simplement avec Phyxo !

Hors ligne

#8 2014-11-30 14:54:01

i_love_dc
Membre
Inscription : 2007-07-13

Re : [bxSlider] Un slider basé sur bxSlider

Je viens d'essayer d'autres thèmes par exemple dcBoostrap, blowup, dcbs, blue slience...

L'inclusion auto n'est pas bonne, elle ce fait dans le top et fausse toute lecture du menu et fausse également la mise en page (selon les themes)...
afin d'éviter des problèmes comme je t'ai indiqué ci-dessus il faudrait  peut être bien quelle se fasse après le "top"

dans le "main"??

ensuite, je clique sur activer le plugin mais pas sur l'inclut auto, je met des liens d'images...j'enregistre, je retourne voir dans l'onglet "installation"...et la rien ^^

EDIT - j'ai trouvé les infos dans l'onglet "en haut a droite = Besoin d'aide ?", mais ce n'est pas le + intuitif ^^

Dernière modification par i_love_dc (2014-11-30 14:58:05)

Hors ligne

#9 2014-11-30 15:04:54

Mirovinben
M comme Mathusalem
Lieu : Dole (Jura)
Inscription : 2007-02-06
Site Web

Re : [bxSlider] Un slider basé sur bxSlider

Juste une idée :
-1- faire comme pour simple menu et fournir un widget qui permettra ainsi d'insérer un <tpl:Widget> là où on veut dans un thème personnalisé,
-2- permettre d'activer ou pas dans l'admin du plugin le behavior qui convient le mieux parmi une liste pré-définie

Hors ligne

#10 2014-11-30 15:16:27

i_love_dc
Membre
Inscription : 2007-07-13

Re : [bxSlider] Un slider basé sur bxSlider

Je viens d'essayer d'autres thèmes par exemple dcBoostrap, blowup, dcbs, blue slience...

L'inclusion auto n'est pas bonne, elle ce fait dans le top et fausse toute lecture du menu et fausse également la mise en page (selon les themes)...
afin d'éviter des problèmes comme je t'ai indiqué ci-dessus il faudrait  peut être bien quelle se fasse après le "top"

dans le "main"??

Par contre jai l’inclue le tag dans le "main" du home.html, categorie.html,...ca passe nickel :)

mais cela ne fonctionne pas quand j’inclue le tag dans le homepagemode.html (ni dans son admin)

ensuite, je clique sur activer le plugin mais pas sur l'inclut auto, je met des liens d'images...j'enregistre, je retourne voir dans l'onglet "installation"...et la rien ^^

EDIT - j'ai trouvé les infos de l'aide a l’installation = le tag dans l'onglet "en haut a droite = Besoin d'aide ?", mais ce n'est pas le + intuitif ^^

Dernière modification par i_love_dc (2014-11-30 15:17:30)

Hors ligne

#11 2014-11-30 17:18:00

nikrou
Membre
Inscription : 2007-10-02
Site Web

Re : [bxSlider] Un slider basé sur bxSlider

Comme je le disais, dans le _top.html ce n'est pas génial. Je vais donc abandonner l'inclusion automatique.
D'autre part, il n'y a pas de behavior adapté pour mettre en haut de page.


Je préfère être atteint de parkinson plutôt qu'alzheimer : je prefère renverser un peu de ma bière plutôt qu'oublier de la boire !

Présentez vos photos simplement avec Phyxo !

Hors ligne

#12 2014-11-30 18:03:27

i_love_dc
Membre
Inscription : 2007-07-13

Re : [bxSlider] Un slider basé sur bxSlider

Dans le dossier /dcSlider > /inc> dcslider.tpl.php

la ligne :

$res .= '<?php printf(\'<li><img src="%s" alt=""></li>\', $image);?>';

corrigée de cette manière

$res .= '<?php printf(\'<li><img src="%s" alt=""/></li>\', $image);?>';

rend le code pour les images valide

Dans le  /dcSlider > /inc> dcslider.behaviors.php
la ligne :

$res .= sprintf(
            '<link rel="stylesheet" type="text/css" href="%s/css/jquery.bxslider.css">'."\n",
            html::stripHostURL($core->blog->getQmarkURL().'pf=dcSlider')
        );

corrigée de cette maniere

$res .= sprintf(
            '<link rel="stylesheet" type="text/css" href="%s/css/jquery.bxslider.css"/>'."\n",
            html::stripHostURL($core->blog->getQmarkURL().'pf=dcSlider')
        );

rend le code entièrement le plugin dcSlider valide \o/ !!!


.

Dernière modification par i_love_dc (2014-11-30 18:13:25)

Hors ligne

#13 2014-11-30 19:19:17

nikrou
Membre
Inscription : 2007-10-02
Site Web

Re : [bxSlider] Un slider basé sur bxSlider

La version 2.7 devrait sortir très rapidement et je prépare donc l'avenir en sortant du html 5. Donc le code généré est parfaitement valide au regard de la dtd html 5.


Je préfère être atteint de parkinson plutôt qu'alzheimer : je prefère renverser un peu de ma bière plutôt qu'oublier de la boire !

Présentez vos photos simplement avec Phyxo !

Hors ligne

#14 2014-12-01 05:01:06

bebr
Membre
Lieu : Roquefort-Les-Pins
Inscription : 2007-06-18
Site Web

Re : [bxSlider] Un slider basé sur bxSlider

ça m'a l'air prometteur tout ça. Bravo.
une version ultérieure avec un {{EntryFirtImage}} des billets sélectionnées serait-elle au programme de développement ? ...pour rejoindre ce que fait le (vieillissant) thème Chesnut pour ne pas le nommer... ;)

Hors ligne

#15 2014-12-11 13:19:27

Tomek
Moderator
Inscription : 2006-04-12
Site Web

Re : [bxSlider] Un slider basé sur bxSlider

Hey Nikrou,

J'avais pas vu que tu avais attaqué un slider, coool ! Je vais tester ça dès que je peux.

Hors ligne

#16 2014-12-11 20:45:33

nikrou
Membre
Inscription : 2007-10-02
Site Web

Re : [bxSlider] Un slider basé sur bxSlider

Oui mais il faut que je m'y remette !


Je préfère être atteint de parkinson plutôt qu'alzheimer : je prefère renverser un peu de ma bière plutôt qu'oublier de la boire !

Présentez vos photos simplement avec Phyxo !

Hors ligne

#17 2014-12-11 21:01:33

Smat
Membre
Lieu : Bretagne
Inscription : 2013-07-13

Re : [bxSlider] Un slider basé sur bxSlider

Bonsoir.

Bonne idée et jolie réalisation merci.
J'ai testé sur Ductile, ça casse effectivement le haut du blog, et les trois petites vignettes type étendard en haut à droite du blog sont désordonnées. La dernière "?" disparaît complètement.
[EDIT]: ce n'est plus le cas avec la version 0.2.0.
J'ai testé avec des images bruts de décoffrage sur une adresse absolue.

Merci pour cette adaptation c'est une chouette idée.

Dernière modification par Smat (2014-12-11 21:03:00)


Geek par intermittence, amateur de vieilles Citroën, de logiciels libres et de galettes saucisses !

Hors ligne

#18 2014-12-12 06:51:06

nikrou
Membre
Inscription : 2007-10-02
Site Web

Re : [bxSlider] Un slider basé sur bxSlider

Merci pour le test Smat.


Je préfère être atteint de parkinson plutôt qu'alzheimer : je prefère renverser un peu de ma bière plutôt qu'oublier de la boire !

Présentez vos photos simplement avec Phyxo !

Hors ligne

#19 2014-12-14 15:08:18

i_love_dc
Membre
Inscription : 2007-07-13

Re : [bxSlider] Un slider basé sur bxSlider

Bonjour nikrou, je reviens aux nouvelles :-)

Un peu à l'instar de ce test adaptation d'un slider [Slider] Integrer un slider

ou l'on avait plus ou moins commencés "l'adaptation d'une bidouille" permettant d'afficher un slider qui utilisait les billets "sélectionnés".

Ton plugin permettrait-il lui aussi d'afficher des "billets sélectionnés"?

Hors ligne

#20 2014-12-14 18:02:38

nikrou
Membre
Inscription : 2007-10-02
Site Web

Re : [bxSlider] Un slider basé sur bxSlider

Je n'ai pas encore eu le temps de m'y pencher sérieusement. Tu as l'archive de la toute première version et un exemple d'intégration sur mon blog.


Je préfère être atteint de parkinson plutôt qu'alzheimer : je prefère renverser un peu de ma bière plutôt qu'oublier de la boire !

Présentez vos photos simplement avec Phyxo !

Hors ligne

#21 2014-12-15 01:32:00

i_love_dc
Membre
Inscription : 2007-07-13

Re : [bxSlider] Un slider basé sur bxSlider

Désolé suite à  une perte de disque dur j'ai tout perdu,
En revanche via le lien ci-dessus, voici toutes les infos que jai pu récupérer.


Démo du slider d'origine >   Featured Content Slider

Archive du slider d'origine  > Download the source code

Code html + boucle avec option billets sélectionnés adapté pour dotclear

<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>

Fichier _public.php par JcDenis aucas ou un plugin aurait vue le jour

JcDenis a écrit :

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";
    }
}
?>

¨- PS - cette adaptation date de 2006, le dernier update du slider date de 2008...
En tout cas c’était exactement le même rendu que la démo et l'option d"afficher les billets selectionés était fonctionnelle.


.

Dernière modification par i_love_dc (2014-12-15 01:44:46)

Hors ligne

#22 2014-12-20 02:04:39

i_love_dc
Membre
Inscription : 2007-07-13

Re : [bxSlider] Un slider basé sur bxSlider

hello nikrou

je reviens aux nouvelles :-)

malgré la période de fêtes et l'effervescence (super positive) actuelle de la 2.7, du nouveau à propos de dcSlider ?

Hors ligne

#23 2014-12-20 09:17:45

nikrou
Membre
Inscription : 2007-10-02
Site Web

Re : [bxSlider] Un slider basé sur bxSlider

Non. Pas eu le temps.


Je préfère être atteint de parkinson plutôt qu'alzheimer : je prefère renverser un peu de ma bière plutôt qu'oublier de la boire !

Présentez vos photos simplement avec Phyxo !

Hors ligne

#24 2014-12-22 23:02:51

i_love_dc
Membre
Inscription : 2007-07-13

Re : [bxSlider] Un slider basé sur bxSlider

Mathieu.M semble avoir adapter un slider responsive sur dcFacebook (en chantier)
vous pourriez peut être partager vos expériences pour dcSlider ???

Hors ligne

#25 2015-01-11 15:14:18

i_love_dc
Membre
Inscription : 2007-07-13

Re : [bxSlider] Un slider basé sur bxSlider

bonjour nikrou, quand est -il de ce ploug (tant attendu)..va t-il voir le jour prochainement ???

Hors ligne

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

Pied de page des forums

Sites map