PDA

View Full Version : Can this script be remote hosted?



iNetVentures
10-31-2005, 05:02 PM
Image Thumbnail Viewer - http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm

I'm a merchant at monstercommerce and we don't have access to the <head> area. I have managed to get this script to work but with over 200 pages to do I'm hoping to be able to just insert 1 line of code.

Anyone know if this can be done for this particular script? Awesome script BTW!

Thanks,
iNet Ventures

ddadmin
10-31-2005, 07:46 PM
Well you can put the script itself (code of Step 1) inside an external .js file, and reference that file for each of the 200 pages. But still you'd have to have access to the HEAD section of each page, and furthermore, minor changes need to be done to the visible HTML of these pages (code of Step 2 and Step 3). There's no way to 100% host this script remotely without touching the pages themselves.

iNetVentures
10-31-2005, 08:09 PM
I'm wondering how I even got it to work in the first place without <head> access..hehe

With your help, let me see if I can get this figured out.

Here's mine in action: http://www.a-picnic-basket.com/index.asp?PageAction=VIEWPROD&ProdID=228

So, this part I can add to my existing .css right?


<style type="text/css">
#showimage{
position:absolute;
visibility:hidden;
border: 1px solid gray;
}
#dragbar{
cursor: hand;
cursor: pointer;
background-color: #EFEFEF;
min-width: 100px; /*NS6 style to overcome bug*/
}
#dragbar #closetext{
font-weight: bold;
margin-right: 1px;
}
</style>

Then this part I can add to a remote .js file?


<script type="text/javascript">
/***********************************************
* 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.compatMode && document.compatMode!="BackCompat" && !window.opera)? document.documentElement : document.body
}
function enlarge(which, e, position, imgwidth, imgheight){
if (ie||ns6){
crossobj=document.getElementById? document.getElementById("showimage") : document.all.showimage
if (position=="center"){
pgyoffset=ns6? parseInt(pageYOffset) : parseInt(ietruebody().scrollTop)
horzpos=ns6? pageXOffset+window.innerWidth/2-imgwidth/2 : ietruebody().scrollLeft+ietruebody().clientWidth/2-imgwidth/2
vertpos=ns6? pgyoffset+window.innerHeight/2-imgheight/2 : pgyoffset+ietruebody().clientHeight/2-imgheight/2
if (window.opera && window.innerHeight) //compensate for Opera toolbar
vertpos=pgyoffset+window.innerHeight/2-imgheight/2
vertpos=Math.max(pgyoffset, vertpos)
}
else{
var horzpos=ns6? pageXOffset+e.clientX : ietruebody().scrollLeft+event.clientX
var vertpos=ns6? pageYOffset+e.clientY : ietruebody().scrollTop+event.clientY
}
crossobj.style.left=horzpos+"px"
crossobj.style.top=vertpos+"px"
crossobj.innerHTML='<div align="right" id="dragbar"><span id="closetext" onClick="closepreview()">Close</span> </div><img src="'+which+'">'
crossobj.style.visibility="visible"
return false
}
else //if NOT IE 4+ or NS 6+, simply display image in full browser window
return true
}
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>

Then call the .js file with something like this somewhere in the <body>?


<script language="Javascript" src="http://www.remotehosting_url.com/java/thumbnail.js"></script></p>

And then put in my images, sizing, etc?


<div id="showimage"></div>
<a href="photo1.jpg" onClick="return enlarge('photo1.jpg',event)">
<img src="thumbnail.gif" border="0"></a>
<a href="lemoncake.jpg" onClick="return enlarge('lemoncake.jpg',event,'center',300,375 )">
Lemon Cake (centered)</a>


I really appreciate the help...more than you know!
iNetVenutres

ddadmin
10-31-2005, 08:55 PM
Looks right iNetVentures. If you run into any problems, I can post an example.

iNetVentures
10-31-2005, 10:34 PM
ok, I'll give it a try.
Thanks.

iNetVentures
10-31-2005, 11:23 PM
ddadmin,
I've given it a try but the images do not open in a new window. They open up on a new page. Could you please take a look for me please. This is driving me batty :eek:

One step I forgot to mention erlier is I included in the body this:
<div id="showimage"></div>

Here is the one I got to work without remote scripting:http://www.a-picnic-basket.com/index.asp?PageAction=VIEWPROD&ProdID=228
Here is the one using the remote scripting that doesn't open a new window:http://www.a-picnic-basket.com/index.asp?PageAction=VIEWPROD&ProdID=128

Thanks!
iNetVentures

jscheuer1
11-01-2005, 05:38 AM
Your external script is not active at all. You need to remove:

<script type="text/javascript">

from the top of it and:

</script>

from the bottom.

Also, where you call it on the page should look like this:


<script type="text/javascript" src="http://www.picnic-basket.net/java/imageswap.js">
/***********************************************
* 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
***********************************************/
</script>

You also need to include this on the page:


<link href="images/assets/assets.css" rel="stylesheet" type="text/css">

iNetVentures
11-01-2005, 01:46 PM
Thanks for the info. I REALLY appreciate it!

I give it another try.

iNetVentures