Dotclear

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

Annonce

13 février 2024 Sortie de Dotclear 2.29

#26 2011-04-11 23:55:55

sablier
Membre
Inscription : 2004-07-25
Site Web

Re : Un équivalent au plugin featuredtop de Wordpress ?

Quelqu'un d'autre à travaillé sur cette idée de slideshow ou sur l'utilsation de smoothgallery ?

Hors ligne

#27 2011-04-12 10:54:21

Mathieu M.
Membre
Lieu : Rhône-Alpes
Inscription : 2009-09-14

Re : Un équivalent au plugin featuredtop de Wordpress ?

Salut,

Tu cherches quoi comme effet ?

J'avais intégré un "content slider" jQuery (ex: http://jqueryglobe.com/labs/feature_list/) pour le projet Dotclear d'un client, si ça t'intéresse éventuellement.

Hors ligne

#28 2011-04-12 23:47:32

sablier
Membre
Inscription : 2004-07-25
Site Web

Re : Un équivalent au plugin featuredtop de Wordpress ?

Je ne cherche pas un effet en particulier. Par contre ce que tu as fait est très bien.

Je me demandais si un plugin existait afin de pas avoir à farfouiller dans le code pour préciser les images à faire défiler.

Hors ligne

#29 2011-04-13 18:28:48

Mathieu M.
Membre
Lieu : Rhône-Alpes
Inscription : 2009-09-14

Re : Un équivalent au plugin featuredtop de Wordpress ?

J'ai retrouvé le code employé pour l'effet slider. Alors pour ceux que ça intéresse, il faut vous munir de jQuery UI et l'insérer dans votre thème (_head.html) : http://jqueryui.com/download/jquery-ui- … custom.zip

Ensuite, dans _head.html, ajoutez ce code juste après votre inclusion de jQuery UI  :

<script type="text/javascript">
$(document).ready(function(){
	/* Slide JS */
	$("#videosLast").tabs({fx:{opacity: "toggle"}}).tabs("rotate",2000, true);
	$("#videosLast").hover(
	function() {
	$("#videosLast").tabs("rotate",0,true);
	},
	function() {
	$("#videosLast").tabs("rotate",2000,true);
	}
	);
	/* Slide JS -- FIN -- */
});
</script>

Ensuite, dans votre fichier home.html, on place le slider où on veut :

<div id="videosLast" >
	<h3><a href="">Nos derniers reportages</a></h3>

	<ul class="ui-tabs-nav">
	<tpl:Entries selected="1" lastn="3">
		<li class="ui-tabs-nav-item<tpl:LoopPosition start="1" length="1"> ui-tabs-selected</tpl:LoopPosition>" id="nav-fragment-{{tpl:EntryID}}">
            <a href="#index-{{tpl:EntryID}}">
            {{tpl:EntryFirstImage size="sq" with_category="1"}}
            <b>{{tpl:EntryCategory encode_html="1"}} - {{tpl:EntryDate format="%d/%m/%y"}}</b>
            <span>{{tpl:EntryTitle encode_html="1"}}</span>
            </a>
        </li>
    </tpl:Entries>
	</ul>
    
	<!-- # Premier conteneur, affiche image large + titre + extrait -->
    <tpl:Entries selected="1" lastn="3">
	<div id="index-{{tpl:EntryID}}" class="ui-tabs-panel" style="">
		{{tpl:EntryFirstImage size="m" with_category="1"}}
        
		<div class="info">
		<h2><a href="{{tpl:EntryURL}}" title="{{tpl:lang Continue reading}} : « {{tpl:EntryTitle encode_html="1"}} »">{{tpl:EntryTitle encode_html="1"}}</a></h2>
		{{tpl:EntryExcerpt cut_string="200"}}
        <span class="infoMore right border-radius"><a href="{{tpl:EntryURL}}" title="{{tpl:lang Continue reading}} : « {{tpl:EntryTitle encode_html="1"}} »">{{tpl:lang Continue reading}} »</a></span>
		</div>
	</div>
    </tpl:Entries>
</div>

Enfin, un peu de CSS :

/* Slide sur l'index du site pour les derniers articles selectionnes */
#videosLast {
	background: #ffffff url(img/bg_videos_last.gif) no-repeat 100% 0;
	width: 810px;
	height: 333px;
	position: relative;
}
#videosLast h3 {
	position: absolute;
	top: 0;
	right: 0;
	text-transform: uppercase;
	height: 32px;
	width: 308px;
	line-height: 32px;
	margin: 0;
	border-bottom: 1px dashed #eeeeee;
}
#videosLast h3 a { color: #ffffff; padding-left: 54px; font-weight: bold; }
#videosLast ul.ui-tabs-nav {
	position: absolute;
	top: 42px;
	right: 0;
	list-style: none;
	padding: 0;
	margin: 0;
	width: 320px;
	z-index: 500;
}
#videosLast ul.ui-tabs-nav li {
	padding: 0 0 0 12px;
	font-size: 12px;
	color: #000000;
}
#videosLast ul.ui-tabs-nav li a { font-weight: bold; border-bottom: 1px dashed #eeeeee; padding: 8px 0; }
#videosLast ul.ui-tabs-nav li a:hover, #videosLast ul.ui-tabs-nav li a:active, #videosLast ul.ui-tabs-nav li a:focus { background-color: #b8c3cb; text-decoration: none; }
#videosLast ul.ui-tabs-nav li b { color: #043F6C; font-weight: bold; line-height: 9px; text-transform: uppercase; display: block; padding: 12px 0 0; }
#videosLast ul.ui-tabs-nav li span { font-size: 11px; font-family: Verdana; }
#videosLast .ui-tabs-panel {
	width: 496px;
	height: 327px;
	position: relative;
	padding: 3px 0 0 3px;
	overflow: hidden;
	z-index: 100;
}
#videosLast .ui-tabs-panel img { width: 496px; }
#videosLast .ui-tabs-hide {	display: none; }
#videosLast li.ui-tabs-nav-item a {/*On Hover Style*/
	display: block;
	height: 60px;
	color: #333;
	line-height:20px;
	outline:none;
}
#videosLast li.ui-tabs-nav-item a:hover{ }
#videosLast li.ui-tabs-selected { background: url(img/slide/ico_selected_item.gif) no-repeat -2px 6px; }
#videosLast ul.ui-tabs-nav li.ui-tabs-selected a { }
#videosLast ul.ui-tabs-nav li.ui-tabs-selected, #videosLast ul.ui-tabs-nav li:hover { /*padding: 1px 0 1px 18px;*/ }
#videosLast ul.ui-tabs-nav li img {
	float: left;
	margin: 2px 6px;
	background: #fff;
	padding: 2px;
	border: 1px solid #444444;
}
#videosLast .ui-tabs-panel .info {
	position: absolute;
	bottom: 0;
	right: 0;
	height: auto;
	width: 496px;
	padding: 2px 0 9px;
	background: transparent url(img/slide/bg_transparent.png) repeat 0 0;
}
#videosLast .info h2 { font-size: 18px;	color: #fff; padding: 5px 9px 0; margin: 0; overflow: hidden; }
#videosLast .info p {
	padding: 0 12px 4px;
	margin: 0;
	font-size: 11px;
	line-height: 15px;
	color: #f0f0f0;
}
#videosLast .info a { text-decoration: none; color: #fff; font-weight: bold; }
#videosLast .info a:hover, #videosLast .info a:active, #videosLast .info a:focus {	text-decoration: underline; }
#videosLast .info .infoMore { margin: 0 12px; clear: both; background-color: #444444; padding: 2px 6px; border: 1px solid transparent; }
#videosLast .info .infoMore:hover { background-color: #dddddd; border: 1px solid #444444; }
#videosLast .info .infoMore:hover a { color: #000000; }
#videosLast .info .infoMore a:hover { text-decoration: none; }

Voilà, à vous d'adapter en fonction de vos besoins :-) Là, on affiche les 3 derniers billets sélectionnés avec un joli effet de slide.

Screen : http://img845.imageshack.us/f/dotclearslider.jpg/

Hors ligne

#30 2011-05-22 15:33:00

Nadia_
Membre
Inscription : 2008-08-04

Re : Un équivalent au plugin featuredtop de Wordpress ?

Bonjour,

Pour commencer je ne sais pas si je fais une bourde en remontant ce post qui date de plus d'un mois, mais si c'est le cas, toutes mes excuses à la communauté par avance ;)

Ensuite, merci Mathieu M. pour nous avoir carrément mâché le travail et grâce à qui, j'ai enfin pu installer un slider sur mon dot, sans difficultés.

Je souhaiterai n'avoir que le slider, sur ma home, sans vignettes et liens qui l'accompagne. Pour résumer, retirer entièrement le bloc se trouvant au dessus du Premier conteneur.

<h3><a href="">Nos derniers reportages</a></h3>
	<ul class="ui-tabs-nav">
	<tpl:Entries selected="1" lastn="3">
		<li class="ui-tabs-nav-item<tpl:LoopPosition start="1" length="1"> ui-tabs-selected</tpl:LoopPosition>" id="nav-fragment-{{tpl:EntryID}}">
            <a href="#index-{{tpl:EntryID}}">
            {{tpl:EntryFirstImage size="sq" with_category="1"}}
            <b>{{tpl:EntryCategory encode_html="1"}} - {{tpl:EntryDate format="%d/%m/%y"}}</b>
            <span>{{tpl:EntryTitle encode_html="1"}}</span>
            </a>
        </li>
    </tpl:Entries>
	</ul>
<!-- # Premier conteneur, affiche image large + titre + extrait -->

Pour obtenir ce résultat http://imagik.fr/view-rl/421066

Mais dès que je trifouille dans le code, le slider ne fonctionne plus. Pensez-vous qu'il me soit possible d'y arriver ou dois-je chercher un autre slider (Bien qu'à ma connaissance il n'en n'existe aucun pour dotclear... ?

Bonne fin de week-end à tous ^^

Hors ligne

#31 2011-05-23 15:14:00

Mathieu M.
Membre
Lieu : Rhône-Alpes
Inscription : 2009-09-14

Re : Un équivalent au plugin featuredtop de Wordpress ?

Dans l'exemple que j'ai posté, il faudrait que tu garde le passage :

<div id="videosLast">
	<!-- # Premier conteneur, affiche image large + titre + extrait -->
    <tpl:Entries selected="1" lastn="3">
	<div id="index-{{tpl:EntryID}}" class="ui-tabs-panel" style="">
		{{tpl:EntryFirstImage size="m" with_category="1"}}
        
		<div class="info">
		<h2><a href="{{tpl:EntryURL}}" title="{{tpl:lang Continue reading}} : « {{tpl:EntryTitle encode_html="1"}} »">{{tpl:EntryTitle encode_html="1"}}</a></h2>
		{{tpl:EntryExcerpt cut_string="200"}}
        <span class="infoMore right border-radius"><a href="{{tpl:EntryURL}}" title="{{tpl:lang Continue reading}} : « {{tpl:EntryTitle encode_html="1"}} »">{{tpl:lang Continue reading}} »</a></span>
		</div>
	</div>
    </tpl:Entries>
</div>

<div id="videosLast"> est l'élément qui permet à jQuery de se repérer :

<script type="text/javascript">
$(document).ready(function(){
	/* Slide JS */
	$("#videosLast").tabs({fx:{opacity: "toggle"}}).tabs("rotate",2000, true);
	$("#videosLast").hover(
	function() {
	$("#videosLast").tabs("rotate",0,true);
	},
	function() {
	$("#videosLast").tabs("rotate",2000,true);
	}
	);
	/* Slide JS -- FIN -- */
});
</script>

Tu peux changer videosLast par ce que tu veux, mais il faut le modifier partout ;-)

Hors ligne

#32 2011-06-06 19:43:38

Nadia_
Membre
Inscription : 2008-08-04

Re : Un équivalent au plugin featuredtop de Wordpress ?

Encore merci Mathieu!

C'est exactement ce que je voulais ;)

Hors ligne

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

Pied de page des forums

Sites map