Cmotion Gallery to resize according to monitor size?

[ranteo]

1) Script Title: Cmotion Gallery

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...iongallery.htm

3) Describe problem:

Hi, I'm using the Cmotion gallery, and it works well. However, my client wishes for it to vary its height according to monitor dimensions?

I tried changing the container height to 500px, but my images of 600px, can cropped off at the bottom. Is there anyway for CMotion gallery to dynamically resize its heights, as well as the images within it, for different monitor dimensions?

Thanks,
Ran

[jscheuer1]

Using the gallerystyle.css file, you may set the width for the #motioncontainer selector to a percentage. As long as the gallery doesn't have a fixed width parent, that will take care of varying screen widths.

Then, if you set the #motiongallery selector as well as the images within the gallery to 100% height:

#motiongallery, #motioncontainer img {
height: 100%;
}

and specify no width for them, the browser will scale the images to the proper width and height to fit within the motioncontainer.

Then it gets a little complicated. We need to set the height of the motioncontainer as the page is loading, so that it will be the desired height before the gallery begins to make it's calculations as to how it will lay out. In order for that to work, it would be best to remove (highlighted) from the gallerystyle.css file:

#motioncontainer {
/*margin:0 auto;  Uncomment this line if you wish to center the gallery on page */
width: 50%; /* Set to gallery width, in px or percentage */
height: 130px; /* Set to gallery height */
}

I have no specific idea how (the exact ratio) you want page height to influence image height. But it would be done here in the file (additions highlighted):

function fillup(){
if (iedom){
var h = (window.innerHeight || ietruebody().clientHeight) / ??;
crossmain=document.getElementById? document.getElementById("motioncontainer") : document.all.motioncontainer;
crossmain.style.height = h + 'px';
if(typeof crossmain.style.maxWidth!=='undefined')
crossmain.style.maxWidth=maxwidth+'px';
menuwidth=crossmain.offsetWidth;
cross_scroll=document.getElementById? document.getElementById("motiongallery") : document.all.motiongallery;
actualwidth=document.getElementById? document.getElementById("trueContainer").offsetWidth : document.all['trueContainer'].offsetWidth;
if (startpos)
cross_scroll.style.left=(menuwidth-actualwidth)/startpos+'px';
crossmain.onmousemove=function(e){
motionengine(e);
}

crossmain.onmouseout=function(e){
stopmotion(e);
showhidediv("hidden");
}
}
loadedyes=1
if (endofgallerymsg!=""){
creatediv();
positiondiv();
}
if (document.body.filters)
onresize()
}

and here:

onresize=function(){
var h = (window.innerHeight || ietruebody().clientHeight) / ?? ;
crossmain.style.height = h + 'px';
actualwidth=document.getElementById? document.getElementById("trueContainer").offsetWidth : document.all['trueContainer'].offsetWidth;
if (typeof motioncontainer!=='undefined'&&motioncontainer.filters){
motioncontainer.style.width="0";
motioncontainer.style.width="";
motioncontainer.style.width=Math.min(motioncontainer.offsetWidth, maxwidth)+'px';
}
menuwidth=crossmain.offsetWidth;
cross_scroll.style.left=startpos? (menuwidth-actualwidth)/startpos+'px' : 0;
}

Notice the two sets of red ??'s. These should each be replaced with a number. Use the same number for both sets. This number will be the fraction of the window height that you want the images' height to be. Minimum and/or maximum numbers could be established if required.

However, there is a possibility that this second bit (the onresize function) could cause an endless loop with the change in height of the gallery triggering another onresize event that changes the gallery height again, etc., etc. If that happens, revert the onresize function to its original state, and be aware that then if the user changes their screen height after loading the page, the images will not resize with it. But there is a good chance that will not be a problem, so give it a shot.

[ranteo]

I've followed your advice to the letter but once I mod the js file, no image shows up at all.

I've attached the js and the css file here. Also, below is what I mod in the css and js file respectively:

#motiongallery {
height:100%	
}

#motioncontainer img{
height: 100%;	
}

function fillup(){
if (iedom){
var h = ((window.innerHeight || ietruebody().clientHeight) / 50;
crossmain=document.getElementById? document.getElementById("motioncontainer") : document.all.motioncontainer;
crossmain.style.height = h + 'px';
if(typeof crossmain.style.maxWidth!=='undefined')
crossmain.style.maxWidth=maxwidth+'px';
menuwidth=crossmain.offsetWidth;
cross_scroll=document.getElementById? document.getElementById("motiongallery") : document.all.motiongallery;
actualwidth=document.getElementById? document.getElementById("trueContainer").offsetWidth : document.all['trueContainer'].offsetWidth;
if (startpos)
cross_scroll.style.left=(menuwidth-actualwidth)/startpos+'px';
crossmain.onmousemove=function(e){
motionengine(e);
}

onresize=function(){
var h = (window.innerHeight || ietruebody().clientHeight) / 50 ;
crossmain.style.height = h + 'px';
actualwidth=document.getElementById? document.getElementById("trueContainer").offsetWidth : document.all['trueContainer'].offsetWidth;
if (typeof motioncontainer!=='undefined'&&motioncontainer.filters){
motioncontainer.style.width="0";
motioncontainer.style.width="";
motioncontainer.style.width=Math.min(motioncontainer.offsetWidth, maxwidth)+'px';
}
menuwidth=crossmain.offsetWidth;
cross_scroll.style.left=startpos? (menuwidth-actualwidth)/startpos+'px' : 0;
}

Dreamweaver tells me there's a syntax error for the numeral in the function fill up section though.

Many thanks in advance for your help.

[jscheuer1]

I made a typo, and testing this out another unrelated error appeared in IE 8. This new error doesn't seem to hurt anything, but can and should be avoided. OK, first the typo. This line:

function fillup(){
if (iedom){
var h = ((window.innerHeight || ietruebody().clientHeight) / ??;
crossmain=document.getElementById? document.getElementById("motioncontainer") : document.all.motioncontainer;
crossmain.style.height = h + 'px';
if(typeof cro . . .

should be (remove the extra opening parenthesis, red in the above):

var h = (window.innerHeight || ietruebody().clientHeight) / ??;

The other error I mentioned is here (I've already added the fix and highlighted the addition):

onresize=function(){
var h = (window.innerHeight || ietruebody().clientHeight) / 3;
crossmain.style.height = h + 'px';
actualwidth=document.getElementById? document.getElementById("trueContainer").offsetWidth : document.all['trueContainer'].offsetWidth;

if (typeof motioncontainer!=='undefined'&&motioncontainer.filters){
motioncontainer.style.width="0";
motioncontainer.style.width="";
motioncontainer.style.width=Math.min(motioncontainer.offsetWidth, maxwidth)+'px';
}
menuwidth=crossmain.offsetWidth;
if(cross_scroll && cross_scroll.style)
cross_scroll.style.left=startpos? (menuwidth-actualwidth)/startpos+'px' : 0;
}

However, what you have doesn't look exactly like "to the letter" to me. You should use the same number in both places, you have 30 and 50. After playing with this, that number should probably be more like 4.

And there is definitely some other stuff going on in the css file. Also, 110% width could be a problem. Try to stick to 100% or less. In any case, regardless of the width, since the images are resizing, you need to be extra careful that your images are numerous enough to fill out more than the width of the gallery at all screen widths and heights.

[ranteo]

Many thanks! It works!

I just have a final question. The number, you were saying, is a fraction of the screen right? So, if it's 2, the gallery will be 1/2 of the screen height? In that case, is it possible for the height to be a percentage of the screen? Or only numerals are allowed?

[jscheuer1]

Well, it's just basic math. Whatever you use will be the divisor for the the window height. Using 2 here is the same as 50% because dividing by 2 is the same as multiplying by 50%. If it's easier for you to think in terms of percentages though, we can make it so numbers that reflect the percent may be used. OK, say you want 50%, using the current method you would do:

var h = (window.innerHeight || ietruebody().clientHeight) / 2;

If you like the number 50, it would be (100/50 = 2, so same result):

var h = (window.innerHeight || ietruebody().clientHeight) / (100/50);

But say you want 40% (this is like the old method would be if using 2.5):

var h = (window.innerHeight || ietruebody().clientHeight) / (100/40);

or 33.33% (roughly one third, or like using 3 with the old method would be):

var h = (window.innerHeight || ietruebody().clientHeight) / (100/33.33);

Got it? Just don't forget to use the parentheses () around the 100/whatever bit. This might not be important, but ensures the desired operation precedence. The red number is the percentange of the window height. Do not use a percent sign. The percent sign has an entirely different meaning (modulo) in javascript math.

[ranteo]

YAY! Thanks a lot.