How can i use images in a php file

Hangin' Around Joined: Dec 01, 2003 Posts: 39

Hello,
I decide to use images in a php file. I need this images appear with a small size and when visitor clicks on an image see the image in large and normal size . please advise

Sells PC To Pay For Divorce Joined: Posts: 5661

hi,

thats not realy easy...it can be but not to be explained in a few lines.
the easiest way is to install a gallery..

or just use below code if you know howto.....
(because of security....put back together the java script)

Code:




Add to //1 to themes/YOURTHEME/theme.php in echo " containing body statement 





example....     





echo "<body bgcolor=\"#ffffff\" text=\"#000000\" link=\"#363636\" vlink=\"#363636\" alink=\"#d5ae83\" leftmargin=\"0\" topmargin=\"0\" marginwidth=\"0\" marginheight=\"0\"><a name=\"top\"></a> 


<div id=\"overDiv\" style=\"position:absolute; visibility:hidden; z-index:1000;\"></div><scr   ipt language=\"Java     Scr    ipt\" src=\"scr    ipts/overlib.js\"></scr   ipt><div id=\"showimage\"></div>\n" 





//START 1 ////////////////// 


<div id=\"showimage\"></div> 


//FINISH 1 ////////////////// 





---------------------------------------------------------------- 





Add to //2 to includes/my_header.php very bottom 


//START 2 ////////////////// 


<scri    pt type="text/java    script"> 


var ie=document.all 


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





function ietruebody(){ 


return (document.compatMode!="BackCompat")? 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") 





</scr    ipt> 


//FINISH 2 ////////////////// 





---------------------------------------------------------------- 


Add //3 to your themes/YOURTHEME/style/style.css (I simply added mine to the bottom) 





//START 3////////////////// 


#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; 


//FINISH 3////////////////// 





---------------------------------------------------------------- 


then simply create links 


examples  below are for a picture situated in root/images/test 








// A html link example 


<a href="images/test/food3.jpg" onClick="return enlarge('images/test/whatever.jpg',event,'center',300,375)"> 


whatever (centered)</a> 





// B html link example (added via a wysiwyg editor) 


<a href=images/test/whatever.jpg onClick="return enlarge('images/test/whatever.jpg',event,'center',300,375)"> 


whatever (centered)</a> 





// C MANUAL INSERT php link example 


<a href=\"images/test/whatever.jpg\" onClick=\"return enlarge('images/test/whatever.jpg',event,'center',300,375)\"> 


whatever (centered)</a> 





Some playing or testing may be required with wysiwyg editors as some modules strip different html when submitted (B worked with mine in downloads but not with submit news) 








The quick testing I've done the 300,375 don't seem to matter as the window opens around the image neatly regardless what is in the parameter. 


Even works great on offsite (images which is great for screenshots). 


//offsite php link example 


<a href=\"http://www.BLABLA.com/images/topics/addon.gif\" onClick=\"return enlarge('http://www.BLABLA.com/images/topics/addon.gif',event,'center',300,375)\"> 


whatever (centered)</a>