Vous n'êtes pas identifié(e).
13 février 2024 Sortie de Dotclear 2.29
Pages : 1
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
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
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
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
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
Bonsoir & Bienvenue,
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.
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
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
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
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
Pages : 1
Vous n'êtes pas identifié(e).