CMotion Image Gallery: 2 questions

[nillis]

Script: CMotion Image Gallery
http://www.dynamicdrive.com/dynamici...iongallery.htm

First of all, I would like to thank the author for this great script!

I have 2 questions which I haven't been able to find a solution for so far..

First - How can I (if possible at all) make the gallery resize according to the viewers screen size and resolution? I want it to be 100% of the screen width all the time.

Second - How can I make the gallery start on the right, instead of on the left?

Can anyone help me please?


This is an example of what I have so far: http://www.omabep.nl/niels/cmotion/index.html

Btw, I have also used the DOM Image Rollover II script in my website.
http://www.dynamicdrive.com/dynamicindex15/domroll2.htm

[nillis]

Can anyone at least tell me if these things are possible?

[jscheuer1]

Can anyone at least tell me if these things are possible?

They are.

[nillis]

Good to know! thnx

Would you be so kind to tell me how? Or is it too much work?

[nillis]

Can nobody help me?

[jscheuer1]

Well, sorry for being so flip, I've been busy though and was just answering your question about the possibility. Number 2 of your request is easy, just add this line (red) to the fillup() function:

function fillup(){
if (iedom){
crossmain=document.getElementById? document.getElementById("motioncontainer") : document.all.motioncontainer
menuwidth=parseInt(crossmain.style.width)
mainobjoffset=getposOffset(crossmain, "left")
cross_scroll=document.getElementById? document.getElementById("motiongallery") : document.all.motiongallery
actualwidth=document.all? cross_scroll.offsetWidth : document.getElementById("trueContainer").offsetWidth
cross_scroll.style.left=menuwidth-actualwidth+'px'
crossmain.onmousemove=function(e){
motionengine(e)
}

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

Your first request is quite a bit more complex to achieve. When I have the time I will work it out.

[jscheuer1]

Now that I take a quick look at this, perhaps number 1 is not so difficult as I imagine. However, it will break down on a high resolution monitor where the width of the window is wider than the train of images. This will not be a problem if your train of images is wider than say - 2048 pixels, at least that would be good for most monitors. Failing that, a max-width/expression can be specified. Here's how -

Set the motioncontainer's width to 100%:

<div id="motioncontainer" style="position:relative;width:100%;height:150px;overflow:hidden;">

If using a max-width/expression (recommended) where the two red 800's represent the maximum width for the gallery:

<div id="motioncontainer" style="position:relative;width:100%;max-width:800px;width:expression(Math.min(this.offsetWidth, 800)+'px');height:150px;overflow:hidden;">

Next, change this line in fillup():

menuwidth=parseInt(crossmain.style.width)

to:

menuwidth=crossmain.offsetWidth

Finally, to accommodate users who may resize their screens and/or windows after loading the page, add this code after the line shown, just before the closing </script> tag (addition red):

window.onload=fillup
onresize=function(){
menuwidth=crossmain.offsetWidth
cross_scroll.style.left=menuwidth-actualwidth+'px'
}
</script>

If using the max-width/expression (recommended), make it instead:

window.onload=fillup
onresize=function(){
if (typeof motioncontainer!=='undefined'&&motioncontainer.filters){
motioncontainer.style.width="0"
motioncontainer.style.width="100%"
motioncontainer.style.width=Math.min(motioncontainer.offsetWidth, 800)+'px'
}
menuwidth=crossmain.offsetWidth
cross_scroll.style.left=menuwidth-actualwidth+'px'
}
</script>

Note: The red 800 should be the same number you used in the max-width/expression for the motioncontainer division (see code block second from top)

[nillis]

Thank you so much! You really helped me out!

It works perfectly!

I'm sorry for being impatient before..