Galerie image et envoi de mail

pietro -
pietro - 19 déc. 2010 à 19:02

Bonjour,

Voila je suis tombé sur cette excellent galerie
https://www.alsacreations.com/xmedia/tuto/exemples/galerie_photo_js/
que j'arrive parfaitement à intégrer dans mon design. Jusque mà tout va bien cependant j'aimerai y ajouter certaine fonctionnalité qui dépasse totalement ma compétence au niveau Js et encore plus php.

L'idée est la suivante en cliquant sur la vignette j'ai don bien mon zoom qui s'affiche, en cliquant sur celui -ci j'aimerai avoir la possibilité d'envoyer cette image par mail dans le corps d'un mail idéalement.

D'après ce que j'ai pu lire je ne comprend pas réellement comment envoyer une pièce dans un mail mais surtout ce type de galerie ne permet pas il me semble de pouvoir réaliser mes ambitions.

le top du top serait sur le clic sur le zoom l'ouverture d'une lightbox avec un champs destinataire et un commentaire éventuellement et à la validation le mail par.

Je ne sais vraiment pas si cela est possible mais si quelqu'un s'est déjà posé un tel problème ou aurait une piste pour me mettre sur une vois possible ca serait top.

Je ne joins pas mon code puisqu'il est à peu de chose pret celui de la galerie d'alascreation (à quelques positionnement prêt et image de fond)..

D'avance merci pour vos pistes

Afficher la suite

A voir également:

Galerie image et envoi de mail
Programmer envoi mail gmail - Guide
Galerie photo en ligne gratuite - Guide
Envoi mail cci - Guide
Image iso - Guide
Windows live mail - Télécharger - Mail

9 réponses

Réponse 1 / 9

avion-f16 Messages postés 19254 Date d'inscription Statut Contributeur Dernière intervention 4 507

Salut.

Voilà pour la partie HTML/JS :
https://gist.github.com/730408
Les modifications sont entourées par un commentaire /* -- ICI -- */ ou 

Il ne reste plus qu'à créer le script sendmail.php

Réponse 2 / 9

pietro

Hello, merci pour ta réponse aussi rapide, mais je reste encore un peu dans le flou ! la transmission d'une variable comme le champ mail est possible via une fenêtre javascript ? Je pensais entre obligé de passer de passer via un formulaire, ce qui en soit ne me dérange pas si je le place astucieusement dans ma création. Quand à la fonction sendmail il faut que je bosse un peu dessus et pas mal dans le vague surtout vis à vis de l'attachement de la pièce-jointe.

Voilà je remonte les manche et je bosse sur ta piste merci encore

Rectif: j'avais pas vu cette ligne
xhr.open("POST", "sendmail.php", true);
c'est sans doute que ca que tu transmet le parametre

avion-f16 Messages postés 19254 Date d'inscription Statut Contributeur Dernière intervention 4 507

Les paramètres (url de l'image et l'adresse email) sont transmises à la ligne xhr.send(...)
L'adresse email est demandée via une alerte Javascript grâce à la fonction prompt()

Réponse 3 / 9

pietro

Merci je bosse sur le sendmail alors

Réponse 4 / 9

pietro

Salut je me suis penché sur les fonctions d'envoi de mail jusque l'a j'arrive très bien à l'envoyé via un formulaire (mise à part la pièce jointe que j'envoi dans le corps html du message).

Ce qui me surprend dans ton Js c'est qu'il ne semble n'y avoir aucune action à la validation de la boite de dialogue (est ce parce que le href est vide ?) je ne pense pas puisque meme en lui mettant le chemin de mon fichier d'envoi de mail cela ne donne rien non plus.

J'ai raté uné étape ou peut tu me donner quelques précision concernat le fontionnement de ton ton script

Merci d'avance

avion-f16 Messages postés 19254 Date d'inscription Statut Contributeur Dernière intervention 4 507

Les boîtes de dialogue s'affichent après la fin de l'exécution du script sur le serveur, s'il n'y a pas d'erreur en rapport avec la connexion (ça n'a rien à voir avec les erreurs dans le script). Si tu veux que ça affiche "Email envoyé !", il faut afficher "ok" sur le script sendmail.php si l'email a bien été envoyé.

Tu dois utiliser les variables $_POST['url'] (URL de l'image) et $_POST['dest'].

Si tu as l'impression qu'il ne se passe rien, c'est parce que la requête se passe en arrière-plan.
L'objet XmlHttpRequest permet d'interroger le serveur en lui passant des données (GET, POST) et d'ensuite traiter le résultat et les erreurs. C'est de l'AJAX.

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 9

pietro

Merci,

je revoie ma copie, c'est sans doute dans la récupération de mes variables que je commets une erreur

Réponse 6 / 9

pietro

hello,

j'ai essayé de suivre tes conseils mais sans trop de succès. Si j'arrive bien a envoyé le mail au destinataire que je veux, j'ai un problème vis à vis de l'image que je cherche à envoyer. Voici mes codes

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  <title></title>

<style type="text/css" media="screen">
* {
	margin:0;
	padding:0;
}

a , a:hover , a:focus {
	border: none;
}
  
a img, a:hover img, a:focus img {
	border: none;
}

div#content {
	position:absolute;
	left: 50%;
	top: 50%;
	width: 1134px;
	height: 665px;
	margin-top: -332px;
	margin-left: -567px;
	background: url('voeux.png') no-repeat;
} 

div#logo {
	position:absolute;
	top: 82px;
	left: 30px;
}

div#delasoul {
	position:absolute;
	top: 584px;
	left: 48px;
}

div#galerie	{
	position:absolute;
	z-index:500;
	width: 183px ;
	top: 179px;
	left: 34px;
	text-align: center ;
}
		
ul#galerie_mini {
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
}
		
ul#galerie_mini li {
	float: left ;
}
		
ul#galerie_mini li a  {
	margin: 5px;
}
		
dl#photo {
	position: absolute;
	margin: 0 auto ;
	top: -140px;
	left: 240px;
}

dl#photo dd	{
	margin: 0 ;
}

dl#photo dt	{
	display: none;
}

a.exp1, a.exp2, a.exp3 {
	display: block;
	width: 79px;
	height: 55px;
	text-indent: -500em;
}

a:hover.exp1, a:active.exp1, a:focus.exp1  {
	background: url('images/minis/thumb1_on.png') no-repeat;
}

a:hover.exp2, a:active.exp2, a:focus.exp2  {
	background: url('images/minis/thumb2_on.png') no-repeat;
}

a:hover.exp3, a:active.exp3, a:focus.exp3  {
	background: url('images/minis/thumb3_on.png') no-repeat;
}

a.exp1 {
	background: url('images/minis/thumb1_off.png') no-repeat;
}

a.exp2 {
	background: url('images/minis/thumb2_off.png') no-repeat;
}

a.exp3 {
	background: url('images/minis/thumb3_off.png') no-repeat;
}


</style>
<script type="text/javascript">
/* -- ICI -- */var url = null;/* -- ICI -- */

function displayPics() {
var photos = document.getElementById('galerie_mini');
var liens = photos.getElementsByTagName('a');
url = liens[0].href;
var big_photo = document.getElementById('big_pict');
var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0] ;

for(var i = 0 ; i < liens.length ; i++) {
liens[i].onclick = function() {
big_photo.src = this.href;
big_photo.alt = this.title;
titre_photo.firstChild.nodeValue = this.title;
/* -- ICI -- */url = this.href;/* -- ICI -- */
return false;
}
}

/* -- ICI -- */
document.getElementById('sendmail').onclick = function() {
var dest = prompt('destinataire :');
var xhr = null;

if (window.XMLHttpRequest || window.ActiveXObject) {
if (window.ActiveXObject) {
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
} else {
xhr = new XMLHttpRequest();
}
} else {
alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
return;
}

xhr.onreadystatechance = function() {
if(xhr.readyState == 4 && (xhr.status == 0 || xhr.status == 200)) {
if(xhr.responseText == "ok") {
alert('Email envoyé !')
} else {
alert('Impossible d\'envoyer l\'email');
}
}
};

xhr.open("POST", "sendmail.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("url="+url+"&dest="+dest);

return false;
};
/* -- ICI -- */
}

window.onload = displayPics;
</script>
</head>
<body>
	<div id="content">
		<div id="logo"><img src="titre.png" alt="" /></div>
		<div id="toto"><img src="toto.png" alt="" /></div>

			<div id="galerie">

		<ul id="galerie_mini">
			<li><a href="images/z1.png" title="Titre de la photo 1" class="exp1">tof1</a></li>
			<li><a href="images/z2.png" title="Titre de la photo 2" class="exp2">tof2</a></li>
			<li><a href="images/z3.png" title="Titre de la photo 3" class="exp3">tof3</a></li>
			<li><a href="images/z1.png" title="Titre de la photo 1" class="exp1">tof1</a></li>
			<li><a href="images/z2.png" title="Titre de la photo 2" class="exp2">tof2</a></li>
			<li><a href="images/z3.png" title="Titre de la photo 3" class="exp3">tof3</a></li>
			<li><a href="images/z1.png" title="Titre de la photo 1" class="exp1">tof1</a></li>
			<li><a href="images/z2.png" title="Titre de la photo 2" class="exp2">tof2</a></li>
		</ul>
		
		<dl id="photo">
			<dt>Titre de la photo 1</dt>
			<dd><img id="big_pict" src="images/blanc.gif" alt="" /></dd>
		</dl>
		<!-- ICI --><p><a href="" id="sendmail">Envoyer la photo par email</a></p><!-- ICI -->
	</div>

	</div>
</body>
</html>

et mon fichier sendmail qui pose problème :

<?php
     //-----------------------------------------------
     //DECLARE LES VARIABLES
     //-----------------------------------------------
	 $destinataire=$_POST['dest'];
	$image=$_POST['url'];
     $email_expediteur='mon.mail@mail.fr';
     $email_reply='mon.mail@mail.fr';
     $message_texte='Bonjour,'."\n\n".'Voici un message au format texte ';

     $message_html='<html>
     <head>
     <title>Titre</title>
     </head>
     <body>

<img src="$image" alt="" />
 
</body>
     </html>';



     $headers = 'From: "Nom" <'.$email_expediteur.'>'."\n";
     $headers .= 'Return-Path: <'.$email_reply.'>'."\n";
     $headers .= 'MIME-Version: 1.0'."\n";
     $headers .= 'Content-Type: multipart/mixed; boundary="'.$frontiere.'"';


     $message = 'This is a multi-part message in MIME format.'."\n\n";


     $message .= 'Content-Type: text/plain; charset="iso-8859-1"'."\n";
     $message .= 'Content-Transfer-Encoding: 8bit'."\n\n";
     $message .= $message_texte."\n\n";


     $message .= '--'.$frontiere."\n";

     $message .= 'Content-Type: text/html; charset="iso-8859-1"'."\n";
     $message .= 'Content-Transfer-Encoding: 8bit'."\n\n";
     $message .= $message_html."\n\n";

     $message .= '--'.$frontiere.'--'."\n";



if(mail($destinataire,$sujet,$message,$headers))  
  {
          echo 'Le mail a été envoyé';
     }
     else
     {
          echo 'Le mail n\'a pu être envoyé';
     }
?>

Je ne pige pas d'ou viens mon erreur après avoir essayer plusieurs facon de placer la variable $_POST['url'] sans aucun succes pour l'afficher. de plus je pense avoir un bug au niveau de la verification de l'envoie du mail puisque que je n'arrive pas à l'affichage de l'echo mail envoyer ou pas (même si je vire la variable sur l'image).

Là je sèche totalement, si tu as 2mn pour regarder mon problème tu me rendrais un grand service.

THX

Réponse 7 / 9

avion-f16 Messages postés 19254 Date d'inscription Statut Contributeur Dernière intervention 4 507

Je viens de tester ton code et je reçois bien l'URL de l'image affichée dans $_POST['url'].

Regarde le retour de la requête XHR grâce à Firebug sous FF ou les outils de dév. intégrés à Chrome. Tu peux faire des echo, tu les verras dans le débugger.

Ton ordinateur ne fait pas ce que tu veux ... mais ce que tu lui dis de faire.

Réponse 8 / 9

pietro

En effet je vois bien apparaitre l'url de mon image grâce aux outils de debug mais ce que je ne m'explique toujours pas c'est comment l'exploiter.

Dans mon body <img src="$image" alt="" /> ne donne absolument rien pas plus que <img src="$_POST['url']" alt="" /> qui me provoque des erreurs de syntaxe.

Peut n'ai tous simplement pas de droit de placer cette variable dans mon body du moins avec la manière dont je mis prend ?

pietro

un test avec une image a la con du style <img src="http://www.google.fr/logos/2010/edithpiaf2010-hp.jpg"> (pardon edith) marche pourtant super bien c'est donc ma variable que je sais pas correctement afficher de plus si dans ma console de debug j'ai effectivement le message "Le mail a été envoyé" n'y a pas moyen de faire une redirection vers une page

avion-f16 Messages postés 19254 Date d'inscription Statut Contributeur Dernière intervention 4 507

Tu dois utiliser la concaténation lorsque tu veux insérer une variable dans une chaine de caractères entre guillemets simples (apostrophes).

$message_html = '<html>
<head>
     <title>Titre</title>
</head>
<body>
    <img src="'.$image.'" alt="" />
</body>
</html>';

Réponse 9 / 9

pietro

Tu es un chef, ca marche super, j'aurais sans doute une petite question sur un mail de redirection après le post mias déjà là je suis ravi.

Merci beaucoup de ton attention

Discussions similaires

PIX

Rétrodiffusion "Mail Delivery System"

Dissocier les photos de ma galerie sur Google Photos

Echec d'envoi message sur Messenger

comment faire si on a un mail delivery system

Votre réponse

Discussions similaires