Dotclear

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

Annonce

#1 2009-09-17 11:28:16

Lexonarkz
Membre
Lieu : Aix-en-Provence
Inscription : 2007-08-22
Site Web

Accueil style "à la une" avec défilement

Bonjour,

une idée pour faire sur la page d'accueil un défilement d'articles "à la une" comme sur jeanmarcmorandini.com et autres sites par exemple ?

merci d'avance

Hors ligne

#2 2009-09-17 16:09:43

Jean-Michel
Modérateur à ailes d'ange
Lieu : Paris
Inscription : 2006-08-22
Site Web

Re : Accueil style "à la une" avec défilement

Bonjour,

Oui, il suffit d'utiliser un script jQuery (InnerFade), je m'y étais tenté (mais j'ai abandonné le projet en question) et de jouer avec {{Tpl:Entries}}.

De tête, voici deux projets Dotclear qui l'utilisent : Marie Alhomme et Melozik.

Hors ligne

#3 2009-09-19 15:40:35

Lexonarkz
Membre
Lieu : Aix-en-Provence
Inscription : 2007-08-22
Site Web

Re : Accueil style "à la une" avec défilement

Oui un peu dans ce style mais plus orienté infos qu'image y a pas un plugin ou un truc simple pour faire ça ? car là ça demande l'installation d'un thème différent

Hors ligne

#4 2009-09-19 15:57:51

Jean-Michel
Modérateur à ailes d'ange
Lieu : Paris
Inscription : 2006-08-22
Site Web

Re : Accueil style "à la une" avec défilement

Lexonarkz a écrit :

Oui un peu dans ce style mais plus orienté infos qu'image y a pas un plugin ou un truc simple pour faire ça ? car là ça demande l'installation d'un thème différent

Je suis quand même étonné de ta réponse pour quelqu'un qui vend des prestations de ce type. Enfin, le principe reste le même. Texte et/ou images.

Voilà ce que j'ai fait à l'époque (ça me permettait de défiler les 5 dernières news d'une catégorie choisie) :

le contenu (à place dans un fichier du genre _news.html et à appeler ensuite) :

<div id="news">
	<div id="news-inner">	
		<div id="news-content" class="news-entries">
				
		<tpl:Categories url="Culture">
		<tpl:Entries lastn="5" ignore_pagination="1">
		
		<div class="news-entry">
			<h2><a href="{{tpl:EntryURL}}">{{tpl:EntryTitle encode_html="1"}}</a></h2>
			
			<!-- # Entry with an excerpt -->
		    <tpl:EntryIf extended="1">
		      <div class="post-content">
				{{tpl:EntryFirstImage size="sq" class="post-first-image" with_category="1"}}
				{{tpl:EntryExcerpt remove_html="1" cut_string="280"}}...</div>
		    </tpl:EntryIf>

		    <!-- # Entry without excerpt -->
		    <tpl:EntryIf extended="0">
		      <div class="post-content">
				{{tpl:EntryFirstImage size="sq" class="post-first-image" with_category="1"}}
				{{tpl:EntryContent remove_html="1" cut_string="280"}}...</div>
		    </tpl:EntryIf>

			<p class="read-it"><a href="{{tpl:EntryURL}}"
		      title="{{tpl:lang Continue reading}} {{tpl:EntryTitle encode_html="1"}}">{{tpl:lang Continue
		      reading}}</a>...</p>
		</div>
		
		</tpl:Entries>
		</tpl:Categories>
		
		</div>
	</div>
</div>

le script :

/* =========================================================

// jquery.innerfade.js

// Datum: 2008-02-14
// Firma: Medienfreunde Hofmann & Baldes GbR
// Author: Torsten Baldes
// Mail: t.baldes@medienfreunde.com
// Web: http://medienfreunde.com

// based on the work of Matt Oakes http://portfolio.gizone.co.uk/applications/slideshow/
// and Ralf S. Engelschall http://trainofthoughts.org/

 *
 *  <ul id="news"> 
 *      <li>content 1</li>
 *      <li>content 2</li>
 *      <li>content 3</li>
 *  </ul>
 *  
 *  $('#news').innerfade({ 
 *	  animationtype: Type of animation 'fade' or 'slide' (Default: 'fade'), 
 *	  speed: Fading-/Sliding-Speed in milliseconds or keywords (slow, normal or fast) (Default: 'normal'), 
 *	  timeout: Time between the fades in milliseconds (Default: '2000'), 
 *	  type: Type of slideshow: 'sequence', 'random' or 'random_start' (Default: 'sequence'), 
 * 		containerheight: Height of the containing element in any css-height-value (Default: 'auto'),
 *	  runningclass: CSS-Class which the container get’s applied (Default: 'innerfade'),
 *	  children: optional children selector (Default: null)
 *  }); 
 *

// ========================================================= */


(function($) {

    $.fn.innerfade = function(options) {
        return this.each(function() {   
            $.innerfade(this, options);
        });
    };

    $.innerfade = function(container, options) {
        var settings = {
        		'animationtype':    'fade',
            'speed':            'normal',
            'type':             'sequence',
            'timeout':          2000,
            'containerheight':  'auto',
            'runningclass':     'innerfade',
            'children':         null
        };
        if (options)
            $.extend(settings, options);
        if (settings.children === null)
            var elements = $(container).children();
        else
            var elements = $(container).children(settings.children);
        if (elements.length > 1) {
            $(container).css('position', 'relative').css('height', settings.containerheight).addClass(settings.runningclass);
            for (var i = 0; i < elements.length; i++) {
                $(elements[i]).css('z-index', String(elements.length-i)).css('position', 'absolute').hide();
            };
            if (settings.type == "sequence") {
                setTimeout(function() {
                    $.innerfade.next(elements, settings, 1, 0);
                }, settings.timeout);
                $(elements[0]).show();
            } else if (settings.type == "random") {
            		var last = Math.floor ( Math.random () * ( elements.length ) );
                setTimeout(function() {
                    do { 
												current = Math.floor ( Math.random ( ) * ( elements.length ) );
										} while (last == current );             
										$.innerfade.next(elements, settings, current, last);
                }, settings.timeout);
                $(elements[last]).show();
						} else if ( settings.type == 'random_start' ) {
								settings.type = 'sequence';
								var current = Math.floor ( Math.random () * ( elements.length ) );
								setTimeout(function(){
									$.innerfade.next(elements, settings, (current + 1) %  elements.length, current);
								}, settings.timeout);
								$(elements[current]).show();
						}	else {
							alert('Innerfade-Type must either be \'sequence\', \'random\' or \'random_start\'');
						}
				}
    };

    $.innerfade.next = function(elements, settings, current, last) {
        if (settings.animationtype == 'slide') {
            $(elements[last]).slideUp(settings.speed);
            $(elements[current]).slideDown(settings.speed);
        } else if (settings.animationtype == 'fade') {
            $(elements[last]).fadeOut(settings.speed);
            $(elements[current]).fadeIn(settings.speed, function() {
							removeFilter($(this)[0]);
						});
        } else
            alert('Innerfade-animationtype must either be \'slide\' or \'fade\'');
        if (settings.type == "sequence") {
            if ((current + 1) < elements.length) {
                current = current + 1;
                last = current - 1;
            } else {
                current = 0;
                last = elements.length - 1;
            }
        } else if (settings.type == "random") {
            last = current;
            while (current == last)
                current = Math.floor(Math.random() * elements.length);
        } else
            alert('Innerfade-Type must either be \'sequence\', \'random\' or \'random_start\'');
        setTimeout((function() {
            $.innerfade.next(elements, settings, current, last);
        }), settings.timeout);
    };

})(jQuery);

// **** remove Opacity-Filter in ie ****
function removeFilter(element) {
	if(element.style.removeAttribute){
		element.style.removeAttribute('filter');
	}
}

Hors ligne

#5 2009-10-15 17:15:21

Hoppipola
Membre
Inscription : 2009-10-15

Re : Accueil style "à la une" avec défilement

Bonsoir,

je cherche à mettre en place un slide de news et ton système m'interesse beaucoup. Cela dit j'ai énormément de mal à le faire fonctionner sous dotclear... (je ne suis pas très douée en js)

Faut-il ajouter des propriétés css spécifiques? Ou appeler le fichier .js d'une certain manière?

Toute indication me serait très utile, merci !

Hors ligne

#6 2009-10-15 20:31:51

Jean-Michel
Modérateur à ailes d'ange
Lieu : Paris
Inscription : 2006-08-22
Site Web

Re : Accueil style "à la une" avec défilement

Bonsoir & Bienvenue,

Hoppipola a écrit :

je cherche à mettre en place un slide de news et ton système m'interesse beaucoup. Cela dit j'ai énormément de mal à le faire fonctionner sous dotclear... (je ne suis pas très douée en js)

Je te rassure moi aussi, je débute avec le javascript & autre jquery. Je tatone. Les bouts de codes du message précédent sont issus du travail de David Yim sur un projet qu'on a finalement abandonné. Regarde un de ses derniers thèmes International qui l'utilise.

Hoppipola a écrit :

Faut-il ajouter des propriétés css spécifiques? Ou appeler le fichier .js d'une certain manière?

Des propriétés css spécifiques? oui et non. on peut s'en passer mais on peut aussi en profiter.

Appeller le .js d'une certaine façon, oui.
1/ Dans le dossier de ton thème, tu places ton fichier .js (l'idéal dans un sous-dossier js).
2/ Dans le dossier de ton thème, le sous-dossier tpl, le fichier _head.html, tu déclares :

<script type="text/javascript" src="{{tpl:BlogThemeURL}}/js/le-nom-du-fichier.js"></script>

3/ Si le js comprend des options l'idéal est de le déclarer dans chaque fichier de contexte.

Hors ligne

#7 2009-10-16 06:37:13

Hoppipola
Membre
Inscription : 2009-10-15

Re : Accueil style "à la une" avec défilement

Merci beaucoup pour tes réponses ! C'est super de voir ce système en action sur un thème que je peux décortiquer pour voir comment il fonctionne... Je vais regarder tout ça, mais du coup je suis beaucoup plus optimiste sur ma réussite sur la mise en place de ce slide ^^

Hors ligne

#8 2009-10-16 07:58:08

Tarlak
Membre
Inscription : 2005-03-07
Site Web

Re : Accueil style "à la une" avec défilement

As tu tester le thème de David Yim nommé International il pourrait peut être correspondre à ce que tu cherches, avec une légère modif du thème pour enlever l'image.

Hors ligne

#9 2009-10-16 08:19:55

Jean-Michel
Modérateur à ailes d'ange
Lieu : Paris
Inscription : 2006-08-22
Site Web

Re : Accueil style "à la une" avec défilement

Hoppipola a écrit :

Merci beaucoup pour tes réponses ! C'est super de voir ce système en action sur un thème que je peux décortiquer pour voir comment il fonctionne... Je vais regarder tout ça, mais du coup je suis beaucoup plus optimiste sur ma réussite sur la mise en place de ce slide ^^

De rien. Une fois que j'aurai bien compris et que je pourrai décomposer une explication pour débutant ("quand ça serait prêt"), j'en ferai un Tips.

Hors ligne

#10 2009-10-16 11:16:21

kagou
Membre
Inscription : 2005-06-30
Site Web

Re : Accueil style "à la une" avec défilement

J'ai fait, il y a déjà un certain temps ;) , une demande de plugin dans la section plugin et également ouvert un ticket ;)

Hors ligne

#11 2009-10-16 15:01:21

David Yim
Membre
Inscription : 2007-01-22
Site Web

Re : Accueil style "à la une" avec défilement

Votre attention s'il vous plaît. J'ai envoyé un mauvais package sur dotaddict.org. Je vous recommande de ne pas utiliser ni le thème présent sur la plateforme ni celui dispo depuis mon site. Je répare ça tout de suite et repasse dès que c'est terminé. Désolé...


À partir d'aujourd'hui, ça sera comme d'habitude.

Hors ligne

#12 2009-10-17 09:56:52

annso
Responsable de la machine à Twix
Lieu : Lyon
Inscription : 2006-03-05
Site Web

Re : Accueil style "à la une" avec défilement

La bonne version (1.1) est désormais sur  Dotaddict.

Hors ligne

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

Pied de page des forums

Sites map