Après quelques jours de silence, j'ai envie de vous faire découvrir noobslide, un Slideshow basé sur le Frameworks Mootools. "Découvrir" sous-entend "mini tuto", je vais me contenter d'une brève présentation qui je l'espère vous poussera à l'utiliser ;)

Sans plus attendre je vous invite sur le site efectorelativo.net qui propose 8 exemples d'utilisation de noobslide. Les effets sont variés et beaux visuellement.

1. Mise en place des scripts :

La mise en place du Slideshow est vraiment très simple.

Tout d'abord il faut inclure le script Mootools, et le script noobslide :

<script type="text/javascript" src="site/js/mootools.js"></script>
<script type="text/javascript" src="site/js/noobslide.js"></script>

Ensuite, insérez le script spécifique à votre modèle de noobslide dans le head. Il sera exécuté au chargement de votre page. Pour le modèle 1, cela donne ça :

window.addEvent('domready',function(){
 
var nS1 = new noobSlide({
box: $('box1'),
items: [0,1,2,3],
size: 480,
autoPlay: true
});
 
});

Vous pouvez récupérer le code correspondant à votre modèle directement dans le code source du site efectorelativo.net.

2. Mise en place des styles:

Au niveau des styles, il faut intégrer la feuille de style suivante (n'oubliez pas de supprimer les styles des modèles qui ne vous servent pas)

/* Sample 1*/
#box1{
	position:absolute;
}
#box1 span{
	display:block;
	float:left;
}
 
/* Sample 2*/
#box2{
	position:absolute;
}
#box2 span{
	display:block;
	float:left;
}
 
/* Sample 3*/
#box3{
	position:absolute;
}
#box3 span{
	display:block;
	float:left;
}
 
/* Sample 4*/
#box4{
	position:absolute;
}
#box4 div{
	width:480px;
	height:240px;
	float:left;
	background:#eee;
}
 
#box4 h3, #box4 p, #box4 ul{
	padding:5px 10px;
}
#box4 p{
	text-indent:16px;
}
#box4 img{
	width:200px;
	width:150px;
	float:left;
	margin:0 10px 10px 15px;
}
#info4{
	background:#fff !important;
	color:red !important;
	cursor:default
}
 
/* Sample 5*/
#box5{
	position:absolute;
	width:240px;
}
#box5 span{
	display:block;
}
#info5{
	bottom:0;
}
 
/* Sample 6*/
#box6{
	position:absolute;
	width:240px;
}
#box6 span{
	display:block;
}
#handles6_1{
	float:left
}
#handles6_2{
	float:right
}
.mask6{
	position:absolute;
	left:50%;
	margin-left:-120px;
	width:240px;
	height:180px;
	overflow:hidden;
}
.sample6 .buttons{
	clear:both;
	text-align:center;
}
 
/* Sample 7*/
#box7{
	position:absolute;
}
#box7 span{
	display:block;
	float:left;
}
 
#thumbs7{
	position:relative;
	width:486px;
	clear:both;
	height:41px;
	overflow:hidden;
	margin-top:200px;
}
#thumbs7 .thumbs, #thumbs_handles7, #thumbs_mask7{
	position:absolute;
	top:0;
	width:100%;
	height:41px;
}
#thumbs7 .thumbs div, #thumbs_handles7 span{
	display:block;
	width:60px;
	height:41px;
	margin:0;
	float:left;
	cursor:pointer;
}
#thumbs7 .thumbs div img{
	width:54px;
	float:right;
}
#thumbs_handles7 span{
	background:url(thumb_invisible.gif) no-repeat;
}
#thumbs_mask7{
	width:1200px;
	background:url(thumbs_mask.gif) no-repeat center top;
}
 
/* Sample 8*/
#box8{
	position:absolute;
}
#box8 div{
	width:480px;
	float:left;
}
#box8 .buttons{
	text-align:left
}
#box8 .next{
	float:right
}
.sample8 .buttons{
	text-align:center;
	clear:both;
}
.sample8 .mask1{
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
}
 
/* ********************************** */
 
.thumbs{
	width:54px;
}
.thumbs div{
	display:block;
	width:54px;
	height:41px;
	margin:3px 0;
	cursor:pointer;
}
 
.thumbs div img{
	display:block;
	width:100%;
	height:100%;
	border:none
}
 
.info{
	width:240px;
	height:50px;
	background:#000;
	position:absolute;
}
.info p, .info h4{
	color:#fff;
	padding:3px 8px;
	font-family:Arial;
}
.info h4{
	font-size:14px;
}
.info h4 a{
	float:right;
	background:#fff;
	color:#000;
	font-size:10px;
	padding:0 3px;
	text-decoration:none
}
 
.mask1{
	position:relative;
	width:480px;
	height:180px;
	overflow:hidden;
}
.mask2{
	position:relative;
	width:240px;
	height:180px;
	overflow:hidden;
}
.mask3{
	position:relative;
	width:480px;
	height:240px;
	overflow:hidden;
}
 
span img{
	display:block;
	border:none;
}

3. Mise en place du squelette :

Encore une fois, il va vous falloir fouiner dans le code source du site efectorelativo.net. Pour le modèle 1, on aurait ce squelette :

<h2>Sample 1</h2>
<div class="sample">
	<div class="mask1">
		<div id="box1">
			<span><img src="img1.jpg" alt="Photo" /></span>
			<span><img src="img2.jpg" alt="Photo" /></span>
			<span><img src="img3.jpg" alt="Photo" /></span>
 
			<span><img src="img4.jpg" alt="Photo" /></span>
			<span><img src="img5.jpg" alt="Photo" /></span>
			<span><img src="img6.jpg" alt="Photo" /></span>
			<span><img src="img7.jpg" alt="Photo" /></span>
			<span><img src="img8.jpg" alt="Photo" /></span>
		</div>
	</div>
</div>

Et voilà, votre Slideshow est en principe opérationnel ;) Il ne vous reste plus qu'à l'adapter à votre application, chose qui se révèle être beaucoup plus complexe que la mise en place. Il vous faudra gérer les positions des masques et des images ;)

Le but de ce tuto est de vous donner toutes les cartes afin que vous puissiez envoyer des emails de type "texte" ou "HTML" via PHP. Il ne se veut pas exhaustif, mais suffisamment complet pour répondre à la demande d'au moins 90% d'entre vous. J'estime que seules les personnes expérimentées auront besoin de créer des applications plus complexes (je généralise, mais c'est majoritairement le cas).

Ce tuto se veut succin mais pertinent. J'irai droit au but. L'envoi de Mail requiert la connaissance de paramètres, d'une syntaxe particulière... Soit vous l'apprenez par cœur, soit vous mettez ce tuto en marque page, il se révélera très pratique ;) Trêve de blabla. On y va.

1. Envoi de mail texte

L'envoi de mail se fait grâce à la fonction mail(). Elle prend au minimum 3 paramètres : le destinataire, le sujet et le message.

<?php
/*---- Déclaration des paramètres ----*/
$destinataire = "destinataire@gmail.com"; // Pour plusieurs destinataires, les séparer par une virgule
$sujet = "Tuto - Envoi de mail";
 
/*---- Déclaration du message ----*/
$message = "Mon Message";
 
/*---- Envoi du mail ----*/
mail($destinataire, $sujet, $message);
?>

Grâce à un 4ème paramètre (optionnel), l'entête, il vous est possible de renseigner davantage d'informations, tels que l'adresse email de l'expéditeur, ou encore la priorité du mail.

<?php
/*---- Déclaration des paramètres ----*/
$destinataire = "destinataire@gmail.com"; // Pour plusieurs destinataires, les séparer par une virgule
$expediteur = "contact@jchristophe.fr";
$sujet = "Tuto envoi de mail";
 
/*---- Déclaration de l'entête ----*/
$entete = "From: $expediteur \n"; // Adresse de l'expéditeur
$entete .= "Reply-to: $expediteur \n"; // Adresse de réponse
$entete .= "Cc: destinataire1@gmail.com \n"; // Destinataire(s) en copie cachée
$entete .= "Bcc: destinataire2@gmail.com \n"; // Destinataire(s) en mode caché
$entete .= "X-Priority: 1 \n"; // Priorité du mail. 5 = basse, 3 = normal, 1 = urgent
 
/*---- Déclaration du message ----*/
$message = "Mon Message"; // Pour sauter une ligne, écrire : \n
 
/*---- Envoi du mail ----*/
mail($destinataire, $sujet, $message, $entete);
?>

2. Envoi de mail html

Pour envoyer un mail au format HTML, il suffit de déclarer le Content-Type du mail dans son entête. Vous pourrez ensuite utiliser toutes vos balises HTML dans votre message.

<?php
/*---- Déclaration des paramètres ----*/
$destinataire = "destinataire@gmail.com"; // Pour plusieurs destinataires, les séparer par une virgule
$expediteur = "contact@jchristophe.fr";
$sujet = "Tuto envoi de mail";
 
/*---- Déclaration de l'entête ----*/
$entete = "From: $expediteur \n"; // Adresse de l'expéditeur
$entete .= "Reply-to: $expediteur \n"; // Adresse de réponse
$entete .= "Cc: destinataire1@gmail.com \n"; // Destinataire(s) en copie cachée
$entete .= "Bcc: destinataire2@gmail.com \n"; // Destinataire(s) en mode caché
$entete .= "X-Priority: 1 \n"; // Priorité du mail. 5 = basse, 3 = normal, 1 = urgent
$entete .= "Content-Type: text/html \n"; // Type du mail : HTML
 
/*---- Déclaration du message ----*/
$message = "<html><body>";
$message .= "<strong>Mon Texte Gras</strong><br />";
$message .= "<font color=\'#ff0000\'>Mon Texte Rouge</font>";
$message .= "</body></html>",
 
/*---- Envoi du mail ----*/
mail($destinataire, $sujet, $message, $entete);
?>

Concernant l'affichage des images, n'oubliez pas de renseigner l'url complète de votre image, que vous avez, au préalable, hébergé sur un serveur ;)

3. Envoi de mail avec pièce(s) jointe(s)

<?php
/*---- Déclaration des paramètres ----*/
$destinataire = "contact@jchristophe.fr"; // Pour plusieurs destinataires, les séparer par une virgule
$expediteur = "contact@jchristophe.fr";
$sujet = "Tuto envoi de mail";
 
$delimiteur = md5(uniqid(rand())); // Création d'un numéro unique, qui délimitera les différents blocs du mail
 
$piecejointe = "candidat.pdf"; // Déclaration du fichier à envoyer en tant que pièce jointe
$contenupiecejointe = file_get_contents($piecejointe); // Récupération du contenu du fichier
$contenupiecejointe = chunk_split(base64_encode($contenupiecejointe)); // Conversion du fichier : respect du format RFC 2045
$typepiecejointe = filetype($piecejointe); // Récupération du type du fichier
 
/*---- Déclaration de l'entête ----*/
$entete = "From: $expediteur \n";
$entete .= "Reply-to: $expediteur \n";
$entete .= "Cc: destinataire1@gmail.com \n";
$entete .= "Bcc: destinataire2@gmail.com \n";
$entete .= "X-Priority: 1 \n";
$entete .= "MIME-Version: 1.0 \n";
$entete .= "Content-Type: multipart/mixed; boundary=\"$delimiteur\" \n"; // Déclaration du type du mail et du délimiteur
$entete .= " \n";
 
/*---- Déclaration du message ----*/
$message = "--$delimiteur \n"; // Séparation du bloc "entete" et du bloc "message" par notre délimiteur
$message .= "Content-Type: text/html; charset=\"iso-8859-1\" \n"; // Déclaration du type du message ainsi que la charte de codage
$message .= "Content-Transfer-Encoding:8bit\n"; // Déclaration du type de codage
$message .= "\n";
$message .= "<strong>Mon Texte Gras</strong><br />";
$message .= "<font color=\"#ff0000\">Mon Texte Rouge</font>";
$message .= "\n";
 
/*---- Insertion de la pièce jointe ----*/
$message .= "--$delimiteur \n"; // Séparation du bloc "message" et du bloc "pièce jointe" par notre délimiteur
$message .= "Content-Type: $typepiecejointe; name=\"$piecejointe\" \n"; // Déclaration du type et du nom de la pièce jointe
$message .= "Content-Transfer-Encoding: base64 \n"; // Déclaration du type de codage
$message .= "Content-Disposition: attachment; filename=\"$piecejointe\" \n"; // attachment = pièce jointe = fichier à sauvegarder
$message .= "\n";
$message .= $contenupiecejointe." \n"; // Insertion du fichier
$message .= "\n";
$message .= "--$delimiteur"; // Délimitation de la fin de la pièce jointe, et du mail
 
/*---- Envoi du mail ----*/
mail($destinataire, $sujet, $message, $entete);
?>

Et voilà ! Je pense avoir été assez précis, explicite et pertinent. Cependant, si vous avez des questions sur des éléments relatifs à l'envoi de mail en PHP présents, ou pas, dans ce tuto, je me ferai un plaisir de répondre dans la limite de mes compétences ;)

N'hésitez pas à réagir ;)