PDA

View Full Version : Resolved Image script (dynamic div dimensions)



pad
07-14-2009, 07:37 PM
Hello all!

Basically I'm having a few issues, I've tried searching but to no avail.

I'd like to be able to use a script that will size a div automatically to the width and height of its background image. So for example:


<div id="dynamic" style="background: url('PINK.jpg');"> </div>


would automatically resize to the size of "PINK.jpg". This is so I can protect my images from people right clicking and saving as.

An alternative solution (possibly) would be this:


<div id="photoholder">
<img src="PINK.jpg" />
<img src="transparentoverlay.gif" />
</div>

So, somehow, the photoholder div and overlay div would (using js) size to the image, and overlay img would go on top of the image meaning users would save this instead of the image itself. I'd also like the image to fade in once it's loaded, and for the "photoholder" bit to have a "preloading" graphic.

I'm sorry if this seems complicated.

But basically all I need is a way to automatically set the width/height

I bet this makes no sense to anyone and sinks away into oblivion now :o

vwphillips
07-15-2009, 09:11 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.d1 {
background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/One.gif);
}

.d2 {
background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/Three.gif);
}

/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/

function ReSize(cls,maxsec){
var objs=zxcByClassName(cls)
for (var bg,oop,z0=0;z0<objs.length;z0++){
bg=zxcSV(objs[z0],'background-Image');
if (bg!='none') oop=new DoReSize(objs[z0],bg,maxsec);
}
}

function DoReSize(obj,bg,maxsec){
this.obj=obj;
this.img=new Image();
this.img.src=bg.replace('url(','').replace(/[)"]/g,'');
this.srt=new Date();
this.maxsec=maxsec||10;
this.CkLoad();
}

DoReSize.prototype.CkLoad=function(){
var now=new Date();
if (this.img.complete&&this.img.width>40){
this.obj.style.width=this.img.width+'px';
this.obj.style.height=this.img.height+'px';
}
else if ((now-this.srt)/1000<10){
var oop=this;
setTimeout(function(){ oop.CkLoad(); },100);
}
}

function zxcSV(obj,par){
if (obj.currentStyle) return obj.currentStyle[par.replace(/-/g,'')];
return document.defaultView.getComputedStyle(obj,null).getPropertyValue(par.toLowerCase());
}



function zxcByClassName(nme,el,tag){
if (typeof(el)=='string') el=document.getElementById(el);
el=el||document;
for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
if(reg.test(els[z0].className)) ary.push(els[z0]);
}
return ary;
}

/*]]>*/
</script>
</head>

<body onload="ReSize('resize',10);" >
<div class="d1 resize" ></div>
<div class="d2 resize" ></div>
</body>

</html>

pad
07-15-2009, 01:10 PM
Ooh that is MARVELOUS, thank you so so much! Is there a way to improve it further?

At the moment, I have an image within a div, and the div background is a spinner loading graphic. Then I use this script to fade the image in when loaded:


<script type="text/javascript">
<!--
document.write("<style type='text/css'>#thephoto {visibility:hidden;}</style>");

function initImage() {
imageId = 'thephoto';
image = document.getElementById(imageId);
setOpacity(image, 0);
image.style.visibility = "visible";
fadeIn(imageId,0);
}
function fadeIn(objId,opacity) {
if (document.getElementById) {
obj = document.getElementById(objId);
if (opacity <= 100) {
setOpacity(obj, opacity);
opacity += 25;
window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
}
}
}
function setOpacity(obj, opacity) {
opacity = (opacity == 100)?99.999:opacity;
// IE/Win
obj.style.filter = "alpha(opacity:"+opacity+")";
// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;
// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;
}
window.onload = function() {initImage()}
// -->
</script>

I'd like to retain this if possible, so have the div fade in when the background has loaded, and have the loader image spinning in the meantime. Is this possible?

Thanks so much for the first code though, I'll definitely use it if we can't improve it.

vwphillips
07-15-2009, 04:08 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.d1 {
background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/One.gif);
}

.d2 {
background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/Three.gif);
}

/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/
// Basic Element Animator (14-May-2009)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With the ability to scale the effect time on specified minimum/maximum values
// and with three types of progression 'sin' and 'cos' and liner and an optional 'Bounce'.

// **** Application Notes

// see http://www.vicsjavascripts.org.uk/AnimatorBasic/AnimatorBasic.htm
//

// **** Functional Code - NO NEED to Change


function zxcBAnimator(mde,obj,srt,fin,ms,scale,curve){
if (typeof(obj)=='string'){ obj=document.getElementById(obj); }
if (!obj) return;
var oop=obj[mde.replace(/\W/g,'')+'oop'];
if (oop){
if (oop.srtfin[0]==srt&&oop.srtfin[1]==fin&&mde.match('#')) oop.update([oop.data[0],(oop.srtfin[0]==oop.data[2])?fin:srt],ms,scale,curve);
else oop.update([srt,fin],ms,scale,curve);
}
else oop=obj[mde.replace(/\W/g,'')+'oop']=new zxcBAnimatorOOP(mde,obj,srt,fin,ms,scale,curve);
return oop;
}

function zxcBAnimatorOOP(mde,obj,srt,fin,ms,scale,curve){
this.srtfin=[srt,fin];
this.to=null;
this.obj=obj;
this.mde=mde.replace(/\W/g,'');
this.update([srt,fin],ms,scale,curve);
}

zxcBAnimatorOOP.prototype.update=function(srtfin,ms,scale,curve){
clearTimeout(this.to);
this.time=ms||this.time||2000;
this.data=[srtfin[0],srtfin[0],srtfin[1]];
this.mS=this.time*(!scale?1:Math.abs((srtfin[1]-srtfin[0])/(scale[1]-scale[0])));
this.ms=this.mS;
this.curve=(typeof(curve)=='string')?curve.charAt(0).toLowerCase():(this.curve)?this.curve:'x';
this.inc=Math.PI/(2*this.mS);
this.srttime=new Date().getTime();
this.cng();
}

zxcBAnimatorOOP.prototype.cng=function(){
this.ms=new Date().getTime()-this.srttime;
this.data[0]=(this.curve=='s')?Math.floor((this.data[2]-this.data[1])*Math.sin(this.inc*this.ms)+this.data[1]):(this.curve=='c')?(this.data[2])-Math.floor((this.data[2]-this.data[1])*Math.cos(this.inc*this.ms)):(this.data[2]-this.data[1])/this.mS*this.ms+this.data[1];
this.apply();
if (this.ms<this.mS) this.to=setTimeout(function(oop){return function(){oop.cng();}}(this),10);
else {
this.data[0]=this.data[2];
this.apply();
if (this.Bounce&&this.Bounce[2]>0) this.bounce();
}
}

zxcBAnimatorOOP.prototype.apply=function(){
if (isFinite(this.data[0])){
if (this.mde!='left'&&this.mde!='top'&&this.data[0]<0) this.data[0]=0;
if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
else zxcOpacity(this.obj,this.data[0]);
}
}

zxcBAnimatorOOP.prototype.bounce=function(){
if (this.Bounce[2]%2==0)
this.Bounce[1]+=(this.Bounce[0]-this.Bounce[1])/(this.Bounce[2])
this.update([this.data[0],this.Bounce[this.Bounce[2]%2==0?1:0]],this.Bounce[3]/this.Bounce[2]);
this.Bounce[2]--;
}

function zxcOpacity(obj,opc){
if (opc<0||opc>100) return;
obj.style.filter='alpha(opacity='+opc+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}

/*]]>*/
</script>

<script type="text/javascript">
/*<![CDATA[*/

function ReSize(cls,maxsec,ms){
var objs=zxcByClassName(cls)
for (var bg,oop,z0=0;z0<objs.length;z0++){
bg=zxcSV(objs[z0],'background-Image');
if (bg!='none') oop=new DoReSize(objs[z0],bg,maxsec,ms);
}
}

function DoReSize(obj,bg,maxsec,ms){
this.obj=obj;
this.img=new Image();
this.img.src=bg.replace('url(','').replace(/[)"]/g,'');
this.srt=new Date();
this.maxsec=maxsec||10;
this.ms=ms||1000;
this.CkLoad();
}

DoReSize.prototype.CkLoad=function(){
var now=new Date();
if (this.img.complete&&this.img.width>40){
this.obj.style.width=this.img.width+'px';
this.obj.style.height=this.img.height+'px';
zxcBAnimator('opacity',this.obj,0,100,this.ms);
}
else if ((now-this.srt)/1000<10){
var oop=this;
setTimeout(function(){ oop.CkLoad(); },100);
}
}

function zxcSV(obj,par){
if (obj.currentStyle) return obj.currentStyle[par.replace(/-/g,'')];
return document.defaultView.getComputedStyle(obj,null).getPropertyValue(par.toLowerCase());
}



function zxcByClassName(nme,el,tag){
if (typeof(el)=='string') el=document.getElementById(el);
el=el||document;
for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
if(reg.test(els[z0].className)) ary.push(els[z0]);
}
return ary;
}

/*]]>*/
</script>
</head>

<body onload="ReSize('resize',10,5000);" >
<div class="d1 resize" ></div>
<div class="d2 resize" ></div>
</body>

</html>

pad
07-15-2009, 04:35 PM
I absolutely love you. Thank you so, so much!