Add image specific WordPress

Georg Schwiemann comments:

Thanks Christianto,
Can I PM you somehow?

Georg Schwiemann comments:

Hi Christiano,
So the images (certain image) on a page will send an email when user click on it with the image name as subject when user click on it?

Yes

Did the image email will be editable by user?
like adding comment, quote/request, contact person, user data like email/phone.

Yes

Christianto comments:

OK we'll try it...

<strong>1. You have to include jQuery 1.4.2 to your wp head. Check to see if any jQuery is loaded.</strong>
<strong>2. Put this js variable on header.php before wp_head(). this for js wp-ajax url</strong>

<script type="text/javascript">
/* <![CDATA[ */
<?php echo "var georg_ajax_url = '".admin_url('admin-ajax.php')."';";?>
/* ]]> */
</script>


<strong>3. Create .js files and copy paste code below to it. Change var tgI to your image class you want to use for email</strong>

/*
* jQuery Tools 1.2.5 - The missing UI library for the Web
*/
(function(a){function t(d,b){var c=this,j=d.add(c),o=a(window),k,f,m,g=a.tools.expose&&(b.mask||b.expose),n=Math.random().toString().slice(10);if(g){if(typeof g=="string")g={color:g};g.closeOnClick=g.closeOnEsc=false}var p=b.target||d.attr("rel");f=p?a(p):d;if(!f.length)throw"Could not find Overlay: "+p;d&&d.index(f)==-1&&d.click(function(e){c.load(e);return e.preventDefault()});a.extend(c,{load:function(e){if(c.isOpened())return c;var h=q[b.effect];if(!h)throw'Overlay: cannot find effect : "'+b.effect+
'"';b.oneInstance&&a.each(s,function(){this.close(e)});e=e||a.Event();e.type="onBeforeLoad";j.trigger(e);if(e.isDefaultPrevented())return c;m=true;g&&a(f).expose(g);var i=b.top,r=b.left,u=f.outerWidth({margin:true}),v=f.outerHeight({margin:true});if(typeof i=="string")i=i=="center"?Math.max((o.height()-v)/2,0):parseInt(i,10)/100*o.height();if(r=="center")r=Math.max((o.width()-u)/2,0);h[0].call(c,{top:i,left:r},function(){if(m){e.type="onLoad";j.trigger(e)}});g&&b.closeOnClick&&a.mask.getMask().one("click",
c.close);b.closeOnClick&&a(document).bind("click."+n,function(l){a(l.target).parents(f).length||c.close(l)});b.closeOnEsc&&a(document).bind("keydown."+n,function(l){l.keyCode==27&&c.close(l)});return c},close:function(e){if(!c.isOpened())return c;e=e||a.Event();e.type="onBeforeClose";j.trigger(e);if(!e.isDefaultPrevented()){m=false;q[b.effect][1].call(c,function(){e.type="onClose";j.trigger(e)});a(document).unbind("click."+n).unbind("keydown."+n);g&&a.mask.close();return c}},getOverlay:function(){return f},
getTrigger:function(){return d},getClosers:function(){return k},isOpened:function(){return m},getConf:function(){return b}});a.each("onBeforeLoad,onStart,onLoad,onBeforeClose,onClose".split(","),function(e,h){a.isFunction(b[h])&&a(c).bind(h,b[h]);c[h]=function(i){i&&a(c).bind(h,i);return c}});k=f.find(b.close||".close");if(!k.length&&!b.close){k=a('<a class="close"></a>');f.prepend(k)}k.click(function(e){c.close(e)});b.load&&c.load()}a.tools=a.tools||{version:"1.2.5"};a.tools.overlay={addEffect:function(d,
b,c){q[d]=[b,c]},conf:{close:null,closeOnClick:true,closeOnEsc:true,closeSpeed:"fast",effect:"default",fixed:!a.browser.msie||a.browser.version>6,left:"center",load:false,mask:null,oneInstance:true,speed:"normal",target:null,top:"10%"}};var s=[],q={};a.tools.overlay.addEffect("default",function(d,b){var c=this.getConf(),j=a(window);if(!c.fixed){d.top+=j.scrollTop();d.left+=j.scrollLeft()}d.position=c.fixed?"fixed":"absolute";this.getOverlay().css(d).fadeIn(c.speed,b)},function(d){this.getOverlay().fadeOut(this.getConf().closeSpeed,
d)});a.fn.overlay=function(d){var b=this.data("overlay");if(b)return b;if(a.isFunction(d))d={onBeforeLoad:d};d=a.extend(true,{},a.tools.overlay.conf,d);this.each(function(){b=new t(a(this),d);s.push(b);a(this).data("overlay",b)});return d.api?b:this}})(jQuery);
(function(h){function k(d){var e=d.offset();return{top:e.top+d.height()/2,left:e.left+d.width()/2}}var l=h.tools.overlay,f=h(window);h.extend(l.conf,{start:{top:null,left:null},fadeInSpeed:"fast",zIndex:9999});function o(d,e){var a=this.getOverlay(),c=this.getConf(),g=this.getTrigger(),p=this,m=a.outerWidth({margin:true}),b=a.data("img"),n=c.fixed?"fixed":"absolute";if(!b){b=a.css("backgroundImage");if(!b)throw"background-image CSS property not set for overlay";b=b.slice(b.indexOf("(")+1,b.indexOf(")")).replace(/\"/g,
"");a.css("backgroundImage","none");b=h('<img src="'+b+'"/>');b.css({border:0,display:"none"}).width(m);h("body").append(b);a.data("img",b)}var i=c.start.top||Math.round(f.height()/2),j=c.start.left||Math.round(f.width()/2);if(g){g=k(g);i=g.top;j=g.left}if(c.fixed){i-=f.scrollTop();j-=f.scrollLeft()}else{d.top+=f.scrollTop();d.left+=f.scrollLeft()}b.css({position:"absolute",top:i,left:j,width:0,zIndex:c.zIndex}).show();d.position=n;a.css(d);b.animate({top:a.css("top"),left:a.css("left"),width:m},
c.speed,function(){a.css("zIndex",c.zIndex+1).fadeIn(c.fadeInSpeed,function(){p.isOpened()&&!h(this).index(a)?e.call():a.hide()})}).css("position",n)}function q(d){var e=this.getOverlay().hide(),a=this.getConf(),c=this.getTrigger();e=e.data("img");var g={top:a.start.top,left:a.start.left,width:0};c&&h.extend(g,k(c));a.fixed&&e.css({position:"absolute"}).animate({top:"+="+f.scrollTop(),left:"+="+f.scrollLeft()},0);e.animate(g,a.closeSpeed,d)}l.addEffect("apple",o,q)})(jQuery);


/*
* Custom script - Christianto
*/
jQuery(document).ready(function($){

var tgO;
var tgI = "target-image"; // this is your image class

$.georgemail = {
init: function()
{
// overlay form section
$('#wrap-georg-imagemail').overlay({mask:{ color:'#666666', opacity: 0.5}, top:'center'});
tgO = $('#wrap-georg-imagemail').data('overlay');
tgO.onClose(function(){
$(':text,:textarea',$('#georg-imagemail')).val('');
});

// image section
$('.'+tgI).click(function(){
$('#subject-mail').val($(this).attr('title'));
tgO.open();
});

// submit function
$('#georg-submit-imagemail').click(function(){
$.georgemail.submit();
tgO.close();
});
},
submit : function()
{
var formdata = $('#georg-imagemail').serialize();
var data = { type: 'sendemail', action: 'georgmail', data: formdata }
$.post(georg_ajax_url , data, function(message){
switch(message){
case 'email-send-success':
alert('Email successfully send');
break;
case 'email-has-error':
alert('Error sending email, please try again later.');
break;
}
});
}
}

$.georgemail.init();

});


4. Copy paste code below to function.php its php mail function

/*
PHP mail function
*/
function georg_send_mail(){

$data = $_POST['data'];
parse_str($data, $saved);

if($_POST['type'] == 'sendemail'){


$emailTo = get_bloginfo('admin_email'); // you can edit this to your email address
$website = get_bloginfo('name'); // you can edit this to your blog name

$subject = $saved['subject-email'];

$headers .= "Content-Type: text/plain; charset=utf-8; format=flowed" . "\r\n";
$headers .= "Content-Transfer-Encoding: 8bit" . "\r\n";
$headers .= "MIME-Version: 1.0" . "\r\n";
$headers .= 'From: Mail '.$subject."\r\n";
$headers .= 'Reply-To: '.$saved['user-mail'];

$body = "Name: ".$saved['user-name']."\n\nEmail:".$saved['user-mail']." \n\nPhone: ".$saved['user-phone']." \n\nMessage: ".$saved['user-message'];

mail($emailTo, $subject, $body, $headers);

echo 'email-send-success';

} else {

echo 'email-has-error';

}

die;

}
add_action('wp_ajax_georgmail', 'georg_send_mail');


<strong>and do the same with code below - this will be the email form html please style by yourself ;-)</strong>

/*
Overlay HTML
*/
function georg_mail_form(){ ?>
<div class="wrap-georg-imagemail">
<form id="georg-imagemail">
<ul>
<li>
<input id="subject-mail" name="subject-mail" type="hidden" />
<label for="user-name">Name</label>
<input id="user-name" name="user-name" type="text" />
</li>
<li>
<label for="user-mail">Email</label>
<input id="user-mail" name="user-mail" type="text" />
</li>
<li>
<label for="user-phone">Phone</label>
<input id="user-phone" name="user-phone" type="text" />
</li>
<li>
<label for="user-message">Message</label>
<textarea id="user-message" name="user-message"></textarea>
</li>
</ul>
<button id="georg-submit-imagemail" type="button">Submit</button>
</form>
</div>
<?php }
add_action('wp_footer','georg_mail_form');



Since I can't see your site and test it. It may produce error so please post error code on your browser error console here...

Georg Schwiemann comments:

Sorry Christiano,
I put it in the "Discourse"
belindaherford.net

Christianto comments:

Ok will check it.

And one thing if the image is using lightbox.. that will be 2 function on single event - when you click the lightbox and overlay appear and may not good ;)

Christianto comments:

Oh I forgot the form overlay CSS, basically its comes from jQuery tools website since I use overlay plugin for this.

[[LINK href="http://flowplayer.org/tools/demos/overlay/index.html"]][[/LINK]]

/* the overlayed element */
.wrap-georg-imagemail {

/* must be initially hidden */
display:none;

/* place overlay on top of other elements */
z-index:10000;

/* styling */
background-color:#333;

width:675px;
min-height:200px;
border:1px solid #666;

/* CSS3 styling for latest browsers */
-moz-box-shadow:0 0 90px 5px #000;
-webkit-box-shadow: 0 0 90px #000;
}

/* close button positioned on upper right corner */
.wrap-georg-imagemail .close {
background-image:url(/image/close.png);
position:absolute;
right:-15px;
top:-15px;
cursor:pointer;
height:35px;
width:35px;
}


the close image is attach and also change var tgI to your image class..

Georg Schwiemann comments:

Think I owe you more money :)
I have done 13 hours now today, need to go home & cook.
Will try first thing in the morning.
What time is it where you are?

Christianto comments:

I'm Glad to help,
Ok then already night on my place. Will check it tomorrow.
Just post error here.