Thumbnail popup print button

**jamie smith** · 04-09-2005, 07:13 PM

Hi, can anybody help me?

I am trying to adapt a dynamic drive thumbnail popup script so that the popup has a print button at the top which will link to another page for printing purposes. My problem is that the popups appear during a slideshow, you can click on an image in the slideshow opening the popup, so each popup on the page needs to link to a different printpage.
Any help would be greatly appreciated.

Code:

<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>PORTFOLIO</title>

<link href="port2.css" rel="stylesheet" type="text/css">
<link href="roll4.css" rel="stylesheet" type="text/css">

<script language="javascript" type="text/javascript">

var SlideShowSpeed = 3000;
var CrossFadeDuration = 2;
var picture = new Array(); 
var caption = new Array(); 
var links = new Array();
var ie=document.all
var ns6=document.getElementById&&!document.all

picture[0] = "pic/bcn2.jpg";
picture[1] = "pic/bcn1b.jpg";
picture[2] = "pic/bcn3.jpg";
picture[3] = "pic/bcn4.jpg";

caption[0] = "pic/btn1.gif";
caption[1] = "pic/btn2.gif";
caption[2] = "pic/btn3.gif";
caption[3] = "pic/btn4.gif";

links[0] = "javascript:void enlarge('pic/mag1.jpg','center',450,251,-30,-200)";
links[1] = "javascript:void enlarge('pic/mag1.jpg','center',450,251,-30,-200)";
links[2] = "javascript:void enlarge('pic/mag1.jpg','center',450,251,-30,-200)";
links[3] = "javascript:void enlarge('pic/mag1.jpg','center',450,251,-30,-200)";

count=0
preload= new Array()
for(i =0 ; i < picture.length; i++){
preload[i] = new Image();
preload[i].src = picture[i];
}

function control(how){
if (how=="F"){count++}
if (how=="B"){count--}

if(count<0){count=picture.length-1}
if(count>picture.length-1){count=0}

if (document.all){
document.images.picturebox.style.filter="blendTrans(duration=2)";
document.images.picturebox.style.filter="blendTrans(duration=CrossFadeDuration)";
document.images.picturebox.filters.blendTrans.Apply();
}

document.images.picturebox.src = picture[count]
document.images.captionbox.src = caption[count]
document.getElementById("theLink").href = links[count];

if (document.all){
document.images.picturebox.filters.blendTrans.Play();
}

}

 function setDescription(strText)
{
	document.getElementById("objDescription").innerHTML = strText;
}

/***********************************************
* Image Thumbnail viewer- ?Dynamic Drive (www.dynamicdrive.com)
* Last updated Sept 26th, 03'. This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var ie=document.all
var ns6=document.getElementById&&!document.all

function ietruebody(){
return (document.documentElement)?document.documentElement:document.body;
}
function enlarge(which,position,imgwidth,imgheight,top,left)
{
	crossobj=document.getElementById? document.getElementById("showimage") : document.all.showimage;
	crossobj.style.left=top+"px";
	crossobj.style.top=left+"px";
	crossobj.innerHTML='<div align="right" id="dragbar"><div id="copy">Copyright-Amalgam modelmaking Ltd.</div><a href="" id="print">Print&nbsp;&nbsp;&nbsp;&nbsp;</a><span id="closetext" onclick="closepreview()">X&nbsp;</span></div><img src="'+which+'">';
	crossobj.style.visibility="visible";
}

function closepreview(){
crossobj.style.visibility="hidden"
}

function drag_drop(e){
if (ie&&dragapproved){
crossobj.style.left=tempx+event.clientX-offsetx+"px"
crossobj.style.top=tempy+event.clientY-offsety+"px"
}
else if (ns6&&dragapproved){
crossobj.style.left=tempx+e.clientX-offsetx+"px"
crossobj.style.top=tempy+e.clientY-offsety+"px"
}
return false
}

function initializedrag(e){
if (ie&&event.srcElement.id=="dragbar"||ns6&&e.target.id=="dragbar"){
offsetx=ie? event.clientX : e.clientX
offsety=ie? event.clientY : e.clientY

tempx=parseInt(crossobj.style.left)
tempy=parseInt(crossobj.style.top)

dragapproved=true
document.onmousemove=drag_drop
}
}

document.onmousedown=initializedrag
document.onmouseup=new Function("dragapproved=false")
</script>

</head>

<body onLoad="showHot=true;self.focus();">

<div class="botbox">

<div id="showimage"></div> 
<table width="390" border="0" cellspacing="0" cellpadding="0" align="right">
  <tr>
      <td width="330"><a href="#" id="theLink"><img src="pic/bcn2.jpg" style="cursor:url(james.cur),auto;" onclick="return enlarge('pic/mag1.jpg','center',450,251,-30,-200)" name=picturebox width=330 height=220 border=0></a></td>
      <td width="60" valign="bottom"><a href="javascript:control('F');" class="aro2" ></a><a href="javascript:control('B');" class="aro1"></a></td>
    </tr>
</table>
</div>
</body>
</html>

**jamie smith** · 04-10-2005, 10:15 AM

Hi me again.

Im still trying to get this to work. The problem is that the popup window is the same on everyslide its just the image that changes. Is there a way to put a print button in this popup that will somehow recognise that the image has changed and take u to the appropriate page?

**jscheuer1** · 04-10-2005, 01:36 PM

jamie smith,

Forgive me if I am mistaken but, if memory serves, you've been posting quite a few script related questions lately (last few weeks) and although you often provide pasted in script, you rarely, if ever provide the link to it. I for one would be more inclined to help if there were (ranked from most preferred to least)

1) A link to the dynamic drive script in question along with its name as it appears on its page And a link to your page where you are trying to get the script to work.

2) Same as above but, without link to your page

3) Same as #1 without your page or the name of the script.

A link to a working copy of the script (the one here on dynamic drive for this forum) makes it much easier for me to give useful suggestions and/or code modification. Just my 2 cents.

**jscheuer1** · 04-10-2005, 01:57 PM

The above being said, this code snippet is where things are 'happening':

Code:

	crossobj.innerHTML='<div align="right" id="dragbar"><div id="copy">Copyright-Amalgam modelmaking Ltd.</div><a href="" id="print">Print&nbsp;&nbsp;&nbsp;&nbsp;</a><span id="closetext" onclick="closepreview()">X&nbsp;</span></div><img src="'+which+'">';

The variable 'which' contains the path (either relative or absolute) and filename of each image, otherwise the images would not display in the pop up. For your '<a href="" id="print">' to do anything specific as regards the individual images, it must reference this variable. For example, to display the image by itself in the browser you could use:

Code:

<a href="'+which+'" id="print">

in the above snippet. Note the use of both double and single quotes.

Thread: Thumbnail popup print button

Thread Tools

Search Thread

Thumbnail popup print button

Bookmarks

Bookmarks

Posting Permissions