Voir la démo : carrousel automatique

1. Les inclusions

• Inclure JQuery
• Inclure carrousel.js
• Inclure carrousel.css

2. Le html

<!-- la classe doit être carrousel, l'id est celui que vous voulez -->
<div class="carrousel" id="mon-carrousel">
<!-- div obligatoire -->
<div class="interieur-carroussel">
<!-- div obligatoire -->
<div class="items">
<!-- chaque élément doit être dans un div class item -->
<div class="item">
<img src="images/1.png" alt="" />
</div>
<div class="item">
<img src="images/6.png" alt="" />
</div>
</div>
</div>
<!-- div obligatoire (placement des témoins) -->
<div class="temoins"></div>
</div>

3. Personnalisation

La feuille de style carrousel.css contient déjà tout ce qui est générique pour styler votre carrousel. Vous n’avez plus qu’à ajouter dans votre feuille de style les éléments de largeur et de hauteur propre à votre carrousel, en utilisant l’indentifiant de votre caroussel.

Voici les éléments que vous devez obligatoirement styler : (les nombres sont des exemples)

#mon-carrousel{
width:531px; /* la largeur totale du carrousel */
height:373px;	/* la hauteur totale du carrousel (prévoir la place pour le div.temoins) */
}

#mon-carrousel .interieur-carrousel
{
margin-left:0px; /* décalage entre le début du caroussel et l'endroit où disparaissent les images */
margin-top:0px; /* décalage par rapport à en haut du carrousel */
width: 533px; /* la largeur de l'interieur = (largeur d'un item + margin right d'un item)*(nombres d'item étant apparants en même
temps) */
height:331px;	/* la hauteur d'un item */
}

#mon-carrousel .item{
width:259px;	/* la largeur d'un item */
margin-right:13px; /* son espacement éventuel par rapport à l'item suivant */
height:331px; /* la hauteur d'un item */
}

4. Appeler le carrousel

Dans un script externe ou dans carroussel.js, mettre

$(window).load(
function(){
carrousel('mon-carrousel',272,2,3000,1000,'left','images/on.png','images/off.png');
}
);

La fonction carrousel prend comme arguments :

• l’id du carrousel à animer
• la largeur à déplacer (largeur d’un item+son margin éventuel)
• le nombre d’éléments par “page” (nombre d’éléments qui se déplacent à chaque itération)
• la vitesse de déplacement (’slow’,’normal’,’fast’, ou un nombre de milli-secondes)
• le temps de pause entre chaque itération (en milli-secondes)
• le sens de départ du carrousel (laisser left)
• le chemin de l’image représentant le témoin de page allumé
• le chemin de l’image représentant le témoin de page éteint

Voici un petit script JS qui permet de faire défiler un texte de droite à gauche.

Code HTML :

<div id='marquee-wrapper'>
<span id='marquee'>
Mon texte à faire défiler
</span>
</div>

Code CSS :

#marquee-wrapper
{
position:relative;
width:100%;
overflow:hidden;
height:100%;
}

#marquee
{
position:absolute;
top:0px;
left:0px;
white-space : nowrap;
}

Et le code JS :

La fonction JS :

function marquee(idWrapper,idMarquee,vitesse)
/*
* idWrapper : l'identifiant du div autour du span contenant le texte à faire défiler
*	idMarquee : l'identifiant du span autour du texte
*	vitesse : nombre de millisecondes entre chaque déplacement de 1px
*/
{
var oIdWrapper=$('#'+idWrapper);
var oIdMarquee=$('#'+idMarquee);

var width=oIdMarquee.width();
var width2=oIdWrapper.width();

id_inst=setTimeout(function() {marquee(idWrapper,idMarquee,vitesse)},vitesse);

var l=parseInt(oIdMarquee.css('left'));
oIdMarquee.css({left:(l-1)+'px'});

if((-parseInt(oIdMarquee.css('left')))>=(width))
{
oIdMarquee.css({left:(width2)+'px'});
}
}

L’appel de la fonction :

$(window).load(
function(){
marquee('marquee-wrapper','marquee',10);
}
);

Le principe est simple : générer des fichiers “statiques” qui seront servis aux visiteurs afin d’économiser le serveur. Notamment en évitant de surcharger inutilement le serveur MySQL et soulager le CPU en évitant un recours systématique à PHP.

Quick Cache puisque c’est son nom, s’installe sans problème et dispose d’un back-office très bien fait. Avec à la clé une mise en place très simple : activer simplement la fonction de cache (première option proposée), et des performances au rendez-vous. Incontournable pour tout ceux qui veulent améliorer les performances de leur site Wordpress.

Voici les requêtes à lancer sur la base de données pour changer l’url du site :

update `wp_posts` set post_content=replace(post_content,'ancien.dev','www.nouveau.com');
update `wp_posts` set guid=replace(guid,'ancien.dev','www.nouveau.com');
update `wp_options` set option_value=replace(option_value,'ancien.dev','www.nouveau.com');
update `wp_links` set link_url=replace(link_url,'ancien.dev','www.nouveau.com');
update `wp_links` set link_image=replace(link_image,'ancien.dev','www.nouveau.com');

http://wiki.winehq.org/MacOSX/Installing

Tout simplement génial.

Dans tous les cas, on commence par remplir le fond de la bonne couleur.
Cas n°1 : L’image est plus petite en hauteur et en largeur : on recopie l’image telle quelle, sans la redimensionner, on la centre en hauteur et en largeur
Cas n°2 : L’image sort du cadre et est proportionnement trop grande en largeur : on redimensionne pour avoir la bonne largeur et la centre en hauteur
Cas n°3 : L’image sort du cadre et est proportionnement trop grande en hauteur : on redimensionne pour avoir la bonne hauteur et on centre en largeur

function creerMiniature($chemin,$W,$H,$color=array(0,0,0))
/*
*	$chemin : chemin de l'image
*	$W : largeur de la miniature
*	$H : hauteur de la miniature
*	$color : couleur du fond, tableau(r,g,b)
*/
{

$chemin2=substr($chemin,0,strrpos($chemin,'.')).'_mini.jpg';

$img_src_resource=imagecreatefromjpeg($chemin);
$img_dst_resource = imagecreatetruecolor($W, $H);
$color=imagecolorallocate($img_dst_resource,$color[0],$color[1],$color[2]);
imagefill($img_dst_resource,0,0,$color);

list( $w, $h ) = getimagesize($chemin);

//L’image est plus petite en hauteur et en largeur :
//On recopie l'image telle quelle, sans la redimensionner, on la centre en hauteur et en largeur
if(($w<=$W) and ($h<=$H))
{
imagecopyresampled($img_dst_resource,$img_src_resource,((int)(($W-$w)/2)),((int)(($H-$h)/2)),0,0,$w,$h,$w,$h);
imagejpeg( $img_dst_resource, $chemin2,100);
}

//Cas n°2 : L’image sort du cadre et est proportionnement trop grande en largeur
//On redimentionne pour avoir la bonne largeur et la centre en hauteur
if((($w>$W) or ($h>$H)) and (($w/$h)>($W/$H)))
{
$new_w=$W;
$new_h=($h*$new_w)/$w;
imagecopyresampled($img_dst_resource,$img_src_resource,0,((int)(($H-$new_h)/2)),0,0,$new_w,$new_h,$w,$h);
imagejpeg( $img_dst_resource, $chemin2,100);
}

//Cas n°3 : L’image sort du cadre et est proportionnement trop grande en hauteur :
//On redimentionne pour avoir la bonne hauteur et on centre en largeur
if((($w>$W) or ($h>$H)) and (($w/$h)<=($W/$H)))
{
$new_h=$H;
$new_w=($w*$new_h)/$h;
imagecopyresampled($img_dst_resource,$img_src_resource,((int)(($W-$new_w)/2)),0,0,0,$new_w,$new_h,$w,$h);
imagejpeg( $img_dst_resource, $chemin2,100);
}

}

Exemple :

creerMiniature('img/1.jpg',120,60,array(255,255,255));

Voir la démo : carrousels horizontaux

1. Les inclusions

- Inclure JQuery
- Inclure carrousel.js
- Inclure carrousel.css

2. Le html

<!-- la classe doit être carrousel, l'id est celui que vous voulez -->
<div class="carrousel" id="mon-carrousel">

	<!-- flèche pour la navigation -->
	<a href="#" class="prev">&lt;</a>

		<!-- div obligatoire -->
		<div class="interieur-carrousel">

			<!-- div obligatoire -->
			<div class="items">

				<!-- chaque élément doit être dans un div class item -->
				<div class="item">
					Du html, ça peut être du texte, une image...
				</div>

				<div class="item">
					Autre séquence html, ça peut être du texte, une image...
				</div>

			</div>

		</div>
		<a href="#" class="next">&gt;</a>
	</div>
</div>

3. Personnalisation

La feuille de style carrousel.css contient déjà tout ce qui est générique pour styler votre carrousel. Vous n’avez plus qu’à ajouter dans votre feuille de style les éléments de largeur et de hauteur propre à votre carrousel, en utilisant l’indentifiant de votre caroussel.

Voici les éléments que vous devez obligatoirement styler : (les nombres sont des exemples)

#mon-carrousel{
	width:350px; /* la largeur totale du carrousel */
	height:190px;	/* la hauteur totale du carrousel */
}
#mon-carrousel .next
{
	right:15px; /* le positionnement de la flèche "suivant" par rapport à en haut à droite */
	top:90px;
}
#mon-carrousel .prev
{
	left:15px; /* le positionnement de la flèche "précédente" par rapport à en haut à gauche */
	top:90px;
}

#mon-carrousel .interieur-carrousel
{
	margin-left:70px; /* décalage entre le début du caroussel et l'endroit où disparaissent les images */
	margin-top:17px; /* décalage par rapport à en haut du carrousel */
	width: 630px; /* la largeur de l'interieur = (largeur d'un item + margin right d'un item)*(nombres d'item étant apparants en même temps) */
	height:150px;	/* la hauteur d'un item */
}

#mon-carrousel .item{
	width:200px;	/* la largeur d'un item */
	margin-right:10px; /* son espacement éventuel par rapport à l'item suivant */
}

Vous pouvez évidement styler d’avantage, mettre des background, etc. !

4. Appeler le carrousel

Dans un script externe ou dans carroussel.js, mettre

$(document).ready(

	function(){
		carrousel('mon-carrousel',560,1,3000);
	}
);

La fonction carrousel prend comme arguments :
- l’id du carrousel à animer
- la largeur à déplacer (largeur d’un item+son margin éventuel)
- le nombre d’éléments étant apparents en même temps
- la vitesse de déplacement (’slow’,'normal’,'fast’, ou un nombre de millisecondes)

En faisant php symphony list, je constate que les directives pour doctrines sont accessibles, mais rien pour propel.

Pour résoudre ce problème : dans /config/ProjectConfiguration.class.php, faire en sorte que la fonction setup() soit ainsi :

public function setup()
{
//enlever l'activation de Doctrine, mettre à la place
$this->enablePlugins('sfPropelPlugin');
}

Mon fichier schema.yml doit être à la racine de /config, sinon, cela fait l’erreur suivante :  You must create a schema.yml or schema.xml file.

Ensuite j’avais l’erreur : lib/vendor/symfony/lib/plugins/sfPropelPlugin/lib/vendor/propel-generator/build.xml:48:16: Missing configuration file.
Cette erreur se résout en créant un fichier propel.ini dans /config.

Ensuite, j’avais l’erreur suivante : build-propel.xml:461:22: Execution of the target buildfile failed. Aborting.

Pour résoudre cette erreur, il faut mettre dans propel.ini les lignes suivantes (et uniquement les lignes suivantes) :

propel.targetPackage       = lib.model

propel.packageObjectModel  = true

propel.project             = monprojet

propel.database            = mysql

propel.database.driver     = mysql

propel.database.url        = mysql:dbname=mabase;host=localhost

propel.database.creole.url = ${propel.database.url}

propel.database.user       = root

propel.database.password   = pass

propel.database.encoding   = utf8

J’ai enfin pu générer mon modèle : php symfony propel:build –model

(Pour la méthode où on diminue l’image jusqu’à ce qu’elle rentre complètement dans nos dimensions et où on remplit les espaces vides avec une couleur de fonc, cf créer une miniature sans rogner)

function creerMiniature($chemin,$H,$W)

{

$chemin2=substr($chemin,0,strrpos($chemin,'.')).'_mini.jpg';

$img_src_resource=imagecreatefromjpeg($chemin);

list( $w, $h ) = getimagesize($chemin);

//Cas n°1 : L'image est plus petite en hauteur et en largeur : on la recopie telle quelle

if(($w<=$W) and ($h<=$H))

{

$img_dst_resource = imagecreatetruecolor($w, $h);

imagecopyresampled($img_dst_resource,$img_src_resource,0,0,0,0,$w,$h,$w,$h);

imagejpeg( $img_dst_resource, $chemin2,100);

}

//Cas n°2 : L'image dépasse en hauteur mais est trop petite en largeur :

// On coupe ce qui dépasse en hauteur

if(($w<=$W) and ($h>$H))

{

$img_dst_resource = imagecreatetruecolor($w, $H);

imagecopyresampled($img_dst_resource,$img_src_resource,0,0,0,0,$w,$H,$w,$H);

imagejpeg( $img_dst_resource, $chemin2,100);

}

//Cas n°3 : L'image dépasse en largeur mais est trop petite en hauteur :

// On coupe ce qui dépasse en largeur

if(($w>$W) and ($h<=$H))

{

$img_dst_resource = imagecreatetruecolor($W, $h);

imagecopyresampled($img_dst_resource,$img_src_resource,0,0,0,0,$W,$h,$W,$h);

imagejpeg( $img_dst_resource, $chemin2,100);

}

//Cas n°4 : L'image dépasse en largeur et en hauteur et est proportionnement trop grande en largeur

// On redimentionne pour avoir la bonne hauteur et on coupe ce qui dépasse en largeur

if(($w>$W) and ($h>$H) and (($w/$h)>($W/$H)))

{

$img_dst_resource = imagecreatetruecolor($W, $H);

imagecopyresampled($img_dst_resource,$img_src_resource,0,0,0,0,$W,$H,$W*$h/$H,$h);

imagejpeg( $img_dst_resource, $chemin2,100);

}

//Cas n°5 : L'image dépasse en largeur et en hauteur et est proportionnement trop grande en hauteur

// On redimentionne pour avoir la bonne largeur et on coupe ce qui dépasse en hauteur

if(($w>$W) and ($h>$H) and (($w/$h)<=($W/$H)))

{

$img_dst_resource = imagecreatetruecolor($W, $H);

imagecopyresampled($img_dst_resource,$img_src_resource,0,0,0,0,$W,$H,$w,$w*$H/$W);

imagejpeg( $img_dst_resource, $chemin2,100);

}

}