Forums

I am hoping I can use this component to get the desired effect: to have a form generate an email and attach a photo from my website files.

I have a photo gallery that has several thumbnails. Once these thumbnails are hovered over, I have JS code that displays a larger version of that photo on the side. (see here: http://www.concordproducts.com/products/systems/velocity/more-images.html ) The hover also displays an overlay where there are links to download larger versions of each thumbnail. In the JS code, these links change depending on where the mouse is hovering. (see code below), The overlay also has links to send an e-mail, and to print the photo. The print works fine, but I cannot find a way to have the thumbnail-specific photo attach to the computers e-mail client.

JS Code -

       var picName;
	$('table.moreimages img').mouseover(function(){
		    picName = $(this).attr('src').replace('/thumbnail/', '/display/');
		$('#moreimages img').css({'width':'512px','height':'331px'});
		$('#moreimages img').attr('src', picName);
	});
	var oldOverlay = false;
	$('table.moreimages img').mouseover(function(){
		var hoveredImg = $(this);
		if(oldOverlay){
			oldOverlay.lay.remove();
			oldOverlay.pic.css('opacity', 1);
		}
		hoveredImg.css('opacity', 0.2);
		var dialogClone = $('.more-images-popup').clone();
		dialogClone.removeClass('more-images-popup');
		dialogClone.removeClass('hidden').addClass('more-img-overlay');
		var pos = hoveredImg.offset();
		dialogClone.css({top:pos.top, left:pos.left});
		//var thePopup = dialogClone.dialog({
		//	autoOpen:false
		//});
		var src = hoveredImg.attr('src');
		var lowLinkSrc = src.replace('/thumbnail/','/low/');
		var medLinkSrc = src.replace('/thumbnail/','/medium/');
		var hiLinkSrc = src.replace('/thumbnail/','/high/');
		checkURL(lowLinkSrc, 'p.download-low');
		checkURL(medLinkSrc, 'p.download-med');
		checkURL(hiLinkSrc, 'p.download-hi');

		//dialogClone.find('p.more-images-img').html('').append($('<img/>').attr('src',src));
		
		
		oldOverlay = {lay:dialogClone, pic:hoveredImg};
		//thePopup.dialog('open');
		var emailLink = dialogClone.find('#more-img-email').attr('id','');
		var printLink = dialogClone.find('#more-img-print').attr('id','');
		emailLink.attr('href', $('#more-img-email').attr('href') + window.location.href);
		printLink.click(function(){
                $("body").append("<img src='" + picName + "' class='printimage' >");
            window.print();
			return false;
		});

I would like to have the red "E-mail" link open an email form (which I have been building with Chronoforms).

Is it possible for me to have the form attach a copy of whatever the photo being hovered was?

A custom element or action, for example, that could retrieve a variable from the JS code for the photo path was was previously hovered, and use that path to attach the photo to the e-mail generated from the form just by clicking the e-mail link?

This way, my representatives can e-mail a copy of a specific photo from my gallery, and we can keep a database record of the photos sent.

If this is not possible in Chronoforms, I will have to try and find another way to do it.

Thank you for you help.


Jessie

Hi Jessie,

I think you could fairly easily adapt your code to open a ChronoForm submit event. If you include the image name in the URL you use to call the form index.php?option=com_chronoforms&chronoform=some_form&event=submit&img=xxx.png then that information will be available to the form and can be used to add an image attachment to the email.

Bob

Thank you, Bob!
I will keep working on this. I hope I can get it to work as I'm slightly new to web coding.

But I think this component works great overall and I appreciate your help!

Jessie