Adding a 'click to enlarge' extended info to Sections ....

[simonwar]

How do you add a 'click to enlarge' text link to a section, like you can with a Product, so that a browser window opens with the corresponding enlarged version of the section image ?

In fact it may be nice as a 'roll-over image', where the image displays off the cursor, (i think it does I have seen it done), how do you do that ?

See URL http://www.istockphoto.com for the roll-over image effect when browsing photo's.

Simon.

[AJReading]

I have uploaded a hover script like you requested, should provide you with what you need...

For your popups there are several ways, you could use the extended information popup to display the larger image like at www.classixshop.com

Also, assuming your images are named well, you could do this

Small image: MYPROD1.gif
Large image: MYPROD1_b.gif

(MYPROD2 = Product reference)

insert this code somewhere into your product page (Act_ProductLine.html)
-------------------------------------------------------------------
<a href="NETQUOTEVAR:PRODUCTREF_b.gif" target="_blank">Click to Enlarge</a>
-------------------------------------------------------------------

Once uploaded NETQUOTEVAR:PRODUCTREF will be replaced with MYPROD1 and with "_b.gif" placed at the end it links to a large image.
Remember to include these in the "Additional Files" if you do it this way

Hope that made sense...

[simonwar]

Lets try the hover method .....

Hi AJ,

Not great with javascript but here's what I have done, which unfortunately has not worked, and maybe you can see why.

The images i want to enlarge are created in Actinic by adding Subsections, yes these are section images and not product images.
So I assume I am modifying one of Actinic's 'section line' templates. Now as a test i am going to modify a template for a subsection.

I have copied Act_SectionLineImage.html and created Act_SectionLineImage2.html so I can play around.

I was not sure what to do with the script but i did both of the following;
a) i created a file called image_enlarge.js, and
b) i pasted the script into Act_SectionLineImage2.html.

If i should have done (a), then you need to help my with how to call this ?

If i should have done (b) my code looks like ....

<!-- SectionLine HTML begin -->
<!-- Insert HTML for the beginning of a section title -->
<script language="JavaScript" type="text/JavaScript">
/*
Simple Image Trail script- By JavaScriptKit.com
Visit http://www.javascriptkit.com for this script and more
This notice must stay intact
*/

var offsetfrommouse=[15,15]; //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
var displayduration=0; //duration in seconds image should remain visible. 0 for always.
var currentimageheight = 270;	// maximum image size.

if (document.getElementById || document.all){
	document.write('<div id="trailimageid">');
	document.write('</div>');
}

function gettrailobj(){
if (document.getElementById)
return document.getElementById("trailimageid").style
else if (document.all)
return document.all.trailimagid.style
}

function gettrailobjnostyle(){
if (document.getElementById)
return document.getElementById("trailimageid")
else if (document.all)
return document.all.trailimagid
}


function truebody(){
return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function showtrail(imagename,title,description,ratingaverage,ratingnumber,showthumb,height){

	if (height > 0){
		currentimageheight = height;
	}

	document.onmousemove=followmouse;

	cameraHTML = '';

	if (ratingnumber == 0){
		ratingaverage = 0;
	}

	for(x = 1; x <= 5; x++){

		if (ratingaverage >= 1){
			cameraHTML = cameraHTML + '<img src="/images/camera_1.gif">';
		} else if (ratingaverage >= 0.5){
			cameraHTML = cameraHTML + '<img src="/images/camera_05.gif">';
		} else {
			cameraHTML = cameraHTML + '<img src="/images/camera_0.gif">';
		}
	
		ratingaverage = ratingaverage - 1;

	}

	cameraHTML = cameraHTML + ' (' + ratingnumber + ' Review';
	if ( ratingnumber != 1 ) cameraHTML += 's';
	cameraHTML = cameraHTML + ')';

	newHTML = '<div style="padding: 5px; background-color: #FFF; border: 1px solid #888;">';
	newHTML = newHTML + '<h2>' + title + '</h2>';
//	newHTML = newHTML + 'Rating: ' + cameraHTML + '<br/>';
	newHTML = newHTML + description + '<br/>';

	if (showthumb > 0){
		newHTML = newHTML + '<div align="center" style="padding: 8px 2px 2px 2px;"><img src="' + imagename + '" border="0"></div>';
	}

	newHTML = newHTML + '</div>';

	gettrailobjnostyle().innerHTML = newHTML;

	gettrailobj().visibility="visible";

}


function hidetrail(){
	gettrailobj().visibility="hidden"
	document.onmousemove=""
	gettrailobj().left="-500px"

}

function followmouse(e){

	var xcoord=offsetfrommouse[0]
	var ycoord=offsetfrommouse[1]

	var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
	//var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(document.body.offsetHeight, window.innerHeight)
        docheight = truebody().clientHeight;
	//if (document.all){
	//	gettrailobjnostyle().innerHTML = 'A = ' + truebody().scrollHeight + '<br>B = ' + truebody().clientHeight;
	//} else {
	//	gettrailobjnostyle().innerHTML = 'C = ' + document.body.offsetHeight + '<br>D = ' + window.innerHeight;
	//}

            if (typeof e != "undefined"){
		if (docwidth - e.pageX < 300){
			xcoord = e.pageX - xcoord - 286; // Move to the left side of the cursor
		} else {
			xcoord += e.pageX;
		}
		if (docheight - e.pageY < (currentimageheight + 110)){
			ycoord += e.pageY - Math.max(0,(110 + currentimageheight + e.pageY - docheight - truebody().scrollTop));
		} else {
			ycoord += e.pageY;
		}

	} else if (typeof window.event != "undefined"){
		if (docwidth - event.clientX < 300){
			xcoord = event.clientX + truebody().scrollLeft - xcoord - 286; // Move to the left side of the cursor
		} else {
			xcoord += truebody().scrollLeft+event.clientX
		}
		if (docheight - event.clientY < (currentimageheight + 110)){
			ycoord += event.clientY + truebody().scrollTop - Math.max(0,(110 + currentimageheight + event.clientY - docheight));
		} else {
			ycoord += truebody().scrollTop + event.clientY;
		}
	}

	var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
	var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight)

	gettrailobj().left=xcoord+"px"
	gettrailobj().top=ycoord+"px"

}


</script>

<DIV ALIGN="LEFT">

<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="5">

	<TR>

		<TD ALIGN="center" VALIGN="TOP">
			<A HREF="NETQUOTEVAR:SECTIONLINK">NETQUOTEVAR:SECTIONIMAGE</A>
		</TD>
	</tr>
	<tr>
		<TD ALIGN="center" VALIGN="MIDDLE">
			<A HREF="NETQUOTEVAR:SECTIONLINK"><font size="1">NETQUOTEVAR:SECTIONNAME</font></A>
		</TD>


<!-- NETQUOTEVAR:SECTIONNAME NETQUOTEVAR:SECTIONTEXT -->

	</TR>

</TABLE>

</DIV>
NETQUOTEVAR:NEXT
<!-- Insert HTML for the end of a section title -->
<!-- SectionLine HTML end -->

OK, i then returned to Actinic and selected the Act_SectionLineimage2.html for the subsection in question, but nothing happened.

Q: would i be correct in thinking that the javascript takes the existing image and enhances it, (how?), or does it need to know where the enhanced file location is, (more likely and thats why its not working) ?

What am i doing wrong ?

Simon.

[AJReading]

Im not completely sure as i simply found that script in a website, its too early for me to try and make any sense of it, but you may have to read the instructions on this page: http://www.javascriptkit.com/script/...agetrail.shtml

Have i have noticed from this is that the script sets the image to follow the mouse cursor, and if you wanted this only when the mouse is over the smaller image you would have to include somthing like onMouseOver="callTheFuction();" in your smaller image <img> tag.

I will take a look at this a little later in the day and see if i can get it working for myself.

[simonwar]

We've got crossed wires.

Hi AJ,

Checked the script site out, but we must have crossed wires. What I wanted was the same as on the URL www.istockphoto.com,like I originally stated.

When you get to this site, try a quickseacrh, type in anything', eg ANIMALS, and when you get a preview of all of the images available, let them load fully and then move your mouse over them.

See what i want know ?

I will re-post this thread to get a refresh view on it.

But thanks anyway.

[wjcampbe]

Continued here http://community.actinic.com/showthread.php?t=16609