Junior Coders
Can this script be remote hosted?
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
Administrator
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.
Junior Coders
Thanks
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...ROD&ProdID=228
So, this part I can add to my existing .css right?
Then this part I can add to a remote .js file?<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 call the .js file with something like this somewhere in the <body>?<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>
And then put in my images, sizing, etc?<script language="Javascript" src="http://www.remotehosting_url.com/java/thumbnail.js"></script></p>
I really appreciate the help...more than you know!<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>
iNetVenutres
Administrator
Looks right iNetVentures. If you run into any problems, I can post an example.
Junior Coders
ok, I'll give it a try.
Thanks.
Junior Coders
almost there
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
One step I forgot to mention erlier is I included in the body this:Here is the one I got to work without remote scripting:http://www.a-picnic-basket.com/index...ROD&ProdID=228<div id="showimage"></div>
Here is the one using the remote scripting that doesn't open a new window:http://www.a-picnic-basket.com/index...ROD&ProdID=128
Thanks!
iNetVentures
Global Moderator
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:
You also need to include this on the page:Code:<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>
Code:<link href="images/assets/assets.css" rel="stylesheet" type="text/css">
- John________________________
Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
Junior Coders
Thanks for the info. I REALLY appreciate it!
I give it another try.
iNetVentures
Posting Permissions
Reply With Quote
Bookmarks