CMotion Image Gallery

[mike@parker-design.co.uk]

1) Script Title: CMotion Image Gallery

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

3) Describe problem: I am trying to get the script working so that the large image opens in an inline frame within my web page. This seams to work the first time an icon is clicked but won't work again until the page is refreshed.

I have changed the following line in motiongallery.js to:

window.open(path,"myframe", winattributes)

Any ideas??

[jscheuer1]

Put this script in the head of the page:

<script type="text/javascript">
//Set array of larger images
var dynimages=new Array()
dynimages[0]="photo1.jpg"
dynimages[1]="photo2.jpg"
dynimages[2]="photo3.jpg"
dynimages[3]="photo4.jpg"
dynimages[4]="photo5.jpg"
dynimages[5]="photo6.jpg"
dynimages[6]="photo7.jpg"
dynimages[7]="photo8.jpg"
dynimages[8]="photo9.jpg"

for (x=0; x<dynimages.length; x++){
var myimage=new Image()
myimage.src=dynimages[x][0]
}

function loadFrame(id, num){
document.getElementById(id).src=dynimages[num]
return false;
}

</script>

Use an iframe like this one:

<iframe id="loadarea" src="" width="140" height="225" scrolling="auto" frameborder="0" marginwidth="0" marginheight="0"></iframe>

Use this type syntax in the cmotion images section:

<nobr id="trueContainer"><a href="#" onClick="return loadFrame('loadarea', 0);"><img src="photo1_thumb.jpg" border="1"></a> <a href="#" onClick="return loadFrame('loadarea', 1);"><img src="photo2_thumb.jpg" border="1"></a> <a href="#" onClick="return loadFrame('loadarea', 2);"><img src="photo3_thumb.jpg" border="1"></a> <a href="#" onClick="return loadFrame('loadarea', 3);"><img src="photo4_thumb.jpg" border="1"></a> <a href="#" onClick="return loadFrame('loadarea', 4);"><img src="photo5_thumb.jpg" border="1"></a> <a href="#" onClick="return loadFrame('loadarea', 5);"><img src="photo6_thumb.jpg" border="1"></a> <a href="#" onClick="return loadFrame('loadarea', 6);"><img src="photo7_thumb.jpg" border="1"></a> <a href="#" onClick="return loadFrame('loadarea', 7);"><img src="photo8_thumb.jpg" border="1"></a> <a href="#" onClick="return loadFrame('loadarea', 8);"><img src="photo9_thumb.jpg" border="1"></a></nobr>

[martino]

Hello,

I really like this modification to display the larger image in an iframe, how would I display the first image or a start image?

Thanks,
Martin

[martino]

Hello,

I really like this modification to display the larger image in an iframe, how would I display the first image or a start image?

Thanks,
Martin

Please disregard, I think I found a solution by adding
<iframe src="1.jpg" ... </iframe>

[martino]

Is is possible to add a fade effect such as filterrogidXImageTransform.Microsoft.Fade() to the enlarged image in the iframe?

Thanks,
Martin

[jscheuer1]

I think that to do that, you would need to put the image on a page with a script to apply the filter to it and load that page into the iframe. The page may or may not be able to be generated 'on the fly'. It could be a stock page into which each image could be loaded. I'll knock it around and get back to you. Alternatively, the filter might be able to be applied to the iframe itself.

[jscheuer1]

Turns out it isn't that hard, you can use the filter with the iframe. Put this style in the head:

<style type="text/css">
#loadarea {
filter:progid:DXImageTransform.Microsoft.Fade();
}
</style>

Change our function loadFrame(id, num) to this and add the variable declaration before it as shown:

var notloaded=1;
function loadFrame(id, num){
if(document.getElementById(id).filters)
document.getElementById(id).filters[0].Apply();
document.getElementById(id).src=dynimages[num]
if(document.getElementById(id).filters)
document.getElementById(id).filters[0].Play();
return false;
}

Use this for the iframe:

<iframe id="loadarea" src="about:blank" onload="if(notloaded){loadFrame('loadarea', 0);notloaded=0;};" width="140" height="225" scrolling="auto" frameborder="0" marginwidth="0" marginheight="0"></iframe>

[martino]

Thanks John, that works perfectly.

Much appreciated.

[martino]

Hello,

Great work with this mod, I have another question.
Is it possible to add this functionality to this code?

- can we link the larger image (iframe) to another larger image in a centered popup window?

Thanks!
Martin

[jscheuer1]

If you were to be loading a page into the iframe that had the image on it, that image could be linked to do whatever you like. I'm not sure if the iframe itself would support a link though. If it would, that link could be dynamically changed along with the image. There is an easier way. You don't need an iframe for this at all, you could just use an image tag and have that linked. That link's href and/or onclick attributes could be dynamically updated along with the image tag's src attribute.