Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.
If the asker does not get an answer then they have 10 days to request a refund.
$40
Add image specific
eg: have a link in each image that can send an email with the image name as the subject of the email.
I would need some help with the code required.
This question has been answered.
Georg Schwiemann | 04/03/11 at 9:49pm
Edit
Previous versions of this question:
04/05/11 at 8:34pm
| 04/06/11 at 5:55pm
The experts have suggested, on average, a prize of $40 for this question.
(2) Possible Answers Submitted...
See a chronological view of answers?
Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.
-
Last edited:
04/04/11
3:25amRashid Aliyev says:Why You Do Not Use Plugin called "Custm Fields For NextGen Gallery"?
I think it's exactly what You want.- 04/04/11 4:11am
Georg Schwiemann says:Trying it now :)
- 04/04/11 4:16am
Georg Schwiemann says:Can I create an email link with the title of the image in the email with this?
- 04/04/11 4:11am
-
Last edited:
04/07/11
6:00amChristianto says:Need additional explanation please..
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?
Did the image email will be editable by user?
like adding comment, quote/request, contact person, user data like email/phone.
If you want the email contain User Email, comment etc. That means after the image is clicked a form will appear before email is send.
I can done it with jQuery but need to know your page code especially what images ;-)Previous versions of this answer: 04/07/11 at 12:32am
- 04/07/11 1:02am
Georg Schwiemann says:Thanks Christianto,
Can I PM you somehow? - 04/07/11 2:18am
Georg Schwiemann says: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 - 04/07/11 4:56am
Christianto says:OK we'll try it...
1. You have to include jQuery 1.4.2 to your wp head. Check to see if any jQuery is loaded.
2. Put this js variable on header.php before wp_head(). this for js wp-ajax url
<script type="text/javascript">
/* <![CDATA[ */
<?php echo "var georg_ajax_url = '".admin_url('admin-ajax.php')."';";?>
/* ]]> */
</script>
3. Create .js files and copy paste code below to it. Change var tgI to your image class you want to use for email
/*
* 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');
and do the same with code below - this will be the email form html please style by yourself ;-)
/*
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... - 04/07/11 5:02am
Georg Schwiemann says:Sorry Christiano,
I put it in the "Discourse"
belindaherford.net - 04/07/11 5:18am
Christianto says: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 ;) - 04/07/11 5:32am
Christianto says:Oh I forgot the form overlay CSS, basically its comes from jQuery tools website since I use overlay plugin for this.
/* 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.. - 04/07/11 5:44am
Georg Schwiemann says: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? - 04/07/11 6:15am
Christianto says:I'm Glad to help,
Ok then already night on my place. Will check it tomorrow.
Just post error here.
- 04/07/11 1:02am
This question has expired.
Georg Schwiemann had additional discourse to offer.
Current status of this question: Completed
Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.
If the asker does not get an answer then they have 10 days to request a refund.