CMotion Image Gallery with Firefox & Safari

**lio** · 01-18-2008, 03:08 PM

1) Script Title: CMotion Image Gallery

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

3) Describe problem:
works fine in IE but doesn't move in Firefox or Safari. I had a look in similar requests in this forum but didn't find the solution, even if I put away the table... Here is the link of the prototype

http://www.varianscuirs.com/cuirs_lu...cuirs-luxe.htm

Can anybody help me

Thanks

**jscheuer1** · 01-18-2008, 09:51 PM

You've edited this script in other ways that are not recommended, but the changes you made to:

Code:

<div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;">

are what is breaking it in Safari and FF.

**lio** · 01-18-2008, 11:00 PM

I don't remember why I had modifyed this line... now it works with FF.
If there is something else that is not recommended in my page, don't hesitate
Merci beaucoup

**jscheuer1** · 01-19-2008, 01:31 AM

In the style section where it says:

Code:

#statusdiv {
background-color: lightyellow;
border: 1px solid gray;
padding: 2px;
position: absolute; /* Stop Editing Gallery Styles */
left: -300px;
visibility: hidden;
}

#motioncontainer a:hover {
color: red; /* Dummy definition to overcome IE bug */
}
/* End Gallery Styles */

That means to stop there and beyond, you changed it to relative, which probably messes up your layout a little in at least some browsers - adds scrollbars temporarily

Now, you can alter these styles if you know what you are doing and are pleased with the results, I don't mind. The comment to stop is just a suggestion to protect the novice from him/herself.

I'm not sure what all else looked non-standard about the installation, nothing else that I can recall that is explicitly covered in the instructions though. There was an added container division that is now gone, that was probably a good idea to get rid of that.

I'm a little surprised that the layout isn't off in IE because of the td being align="center", but since your whole page is non-standard (no DOCTYPE), perhaps that's not a problem here.

**lio** · 01-19-2008, 04:07 PM

Thanks again !
I'm a photographer, really not a coder, and this is the second time (after mine... with the SideScrollMenu) I try to make a small website. I had some problems to put the different elements in the right position, and modifyed some elements in the code to see the effect...
I have put again the "absolute" in the style section.
The customer is happy with the website under IE. The music doesn't work under Firefox, but this is another problem.
Have a nice week-end :-)

**Fynci** · 11-25-2008, 03:51 PM

Hi all,

I thought I would post here, rather than create a new message as I am getting very similar issues.

The script works fine in IE, and Firefox, however in Safari it will not scroll from left to right.

I have combined two scripts together, this one, and the highslide.js script to make the images clickable. The page I am using it on is here:

http://www.laurajaynestrand.com/v1/cluster.html

The gallerystyles.css is unchanged

/* Gallery Styles */

#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: 205px;
}

#motioncontainer a img {
border: 1px solid #cccccc; /* Set image border color */
}

#motioncontainer a:hover img {
border: 1px solid navy; /* Set image border hover color */
}

#statusdiv {
background-color: lightyellow;
border: 1px solid gray;
padding: 2px;
position: absolute; /* Stop Editing Gallery Styles */
left: -300px;
visibility: hidden;
}

#motioncontainer a:hover {
color: red; /* Dummy definition to overcome IE bug */
}
/* End Gallery Styles */

Whereas the cluster.html looks like this:

Code:

<!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"><!-- InstanceBegin template="/Templates/collectionsinside.dwt.php" codeOutsideHTMLIsLocked="false" -->
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Laura Jayne Strand - Jewellery Designer</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
<link href="main.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="gallerystyle.css" />

      
<!-- Do not edit IE conditional style below -->
<!--[if gte IE 5.5]>
<style type="text/css">
#motioncontainer {
width:expression(Math.min(this.offsetWidth, maxwidth)+'px');
}
</style>
<![endif]-->
<!-- End Conditional Style -->

<script type="text/javascript" src="motiongallery.js">

/***********************************************
* CMotion Image Gallery- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
* Modified by Jscheuer1 for autowidth and optional starting positions
***********************************************/

</script>
<script type="text/javascript" src="highslide.js"></script>
<link rel="stylesheet" type="text/css" href="highslide.css" />
<script type="text/javascript">
    // override Highslide settings here
    // instead of editing the highslide.js file
    hs.graphicsDir = 'graphics/';
		hs.wrapperClassName = 'wide-border';
</script>
</head>

<body>
<div align="center" class="orator_std_header">
  <p><a href="index.html">Laura Jayne Strand</a></p>
</div>
<!-- InstanceBeginEditable name="collectionname" -->
<div align="center" class="orator_Std_undermenu">
  <p>CLUSTER</p>
  <p>&nbsp;</p>
</div>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="Images" --><div id="motioncontainer" style="position:relative;overflow:hidden;">
<div id="motiongallery" style="position:absolute; left:0px; top:0px; white-space: nowrap; overflow: scroll;">

<nobr id="trueContainer">
<div align="center"><a href="images/cluster1.jpg" class="highslide" onclick="return hs.expand(this)"><img src="images/cluster1s.jpg" alt="cluster range" /> </a> <div class="highslide-caption">
Silver Cluster Bangle</div><a href="images/cluster2.jpg" class="highslide" onclick="return hs.expand(this)"><img src="images/cluster2s.jpg" alt="cluster range" /></a> <div class="highslide-caption">
Silver Cluster Earrings</div> <a href="images/cluster5.jpg" class="highslide" onclick="return hs.expand(this)"><img src="images/cluster5s.jpg" alt="cluster range" /></a> <div class="highslide-caption">
Silver Cluster and Black Lava Rock Necklace</div> <a href="images/cluster3.jpg" class="highslide" onclick="return hs.expand(this)"><img src="images/cluster3s.jpg" alt="cluster range" /></a> <div class="highslide-caption">
Black Rhodium Plated Silver Studs (also available in silver and gold plated silver)</div> <a href="images/cluster8.jpg" class="highslide" onclick="return hs.expand(this)"><img src="images/cluster8s.jpg" alt="cluster range" /></a> <div class="highslide-caption">
Gold Plated Silver Cluster and Freshwater Pearl Ring</div> <a href="images/cluster9.jpg" class="highslide" onclick="return hs.expand(this)"><img src="images/cluster9s.jpg" alt="cluster range" /></a> <div class="highslide-caption">
Oxidised Silver and Pale Pink Freshwater Pearl Ring</div> <a href="images/cluster10.jpg" class="highslide" onclick="return hs.expand(this)"><img src="images/cluster10s.jpg" alt="cluster range" /></a> <div class="highslide-caption">
Silver Cluster and Pale Pink Freshwater Pearl Ring</div><a href="images/cluster6.jpg" class="highslide" onclick="return hs.expand(this)"><img src="images/cluster6s.jpg" alt="cluster range" /></a> <div class="highslide-caption">
Oxidised Silver and Freshwater Pearl Necklace</div> <a href="images/cluster7.jpg" class="highslide" onclick="return hs.expand(this)"><img src="images/cluster7s.jpg" alt="cluster range" /></a> <div class="highslide-caption">
Silver and Pink Freshwater Pearl Necklace</div> <a href="images/cluster11.jpg" class="highslide" onclick="return hs.expand(this)"><img src="images/cluster11s.jpg" alt="cluster range" /> </a> <div class="highslide-caption">
Silver Plated Brass Cluster Neckpiece</div></div>
</nobr></div>
</div><!-- InstanceEndEditable -->
</body>
<!-- InstanceEnd --></html>

Are you able to see why this works perfectly fine in IE and Firefox, and yet it will not scroll at all in Safari?

Many thanks!

**jscheuer1** · 11-25-2008, 05:28 PM

Oddly, it works in Safari 3 Win here, perhaps you just need to clear your cache in that browser. What version of Safari are you using?

Anyways, this is wrong:

Code:

#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: 205px;
}

It should be:

Code:

#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: 205px;
}

But that may actually throw things off, as after fixing that, the width of 50% will be used, I don't think it currently is.

I have seen problems with some versions of Safari with code like so (from motiongallery.js):

Code:

function motionengine(e){
var mainobjoffset=getposOffset(crossmain, "left"),
dsocx=(window.pageXOffset)? pageXOffset: ietruebody().scrollLeft,
dsocy=(window.pageYOffset)? pageYOffset : ietruebody().scrollTop,
curposy=window.event? event.clientX : e.clientX? e.clientX: "";
curposy-=mainobjoffset-dsocx;
var leftbound=(menuwidth-restarea)/2;
var rightbound=(menuwidth+restarea)/2;
if (curposy>rightbound){
scrollspeed=(curposy-rightbound)/((menuwidth-restarea)/2) * maxspeed;
clearTimeout(righttime);
if (movestate!="left") moveleft();
}
else if (curposy<leftbound){
scrollspeed=(leftbound-curposy)/((menuwidth-restarea)/2) * maxspeed;
clearTimeout(lefttime);
if (movestate!="right") moveright();
}
else
scrollspeed=0;
}

It should probably be:

Code:

dsocx=typeof window.pageXOffset == 'number'? pageXOffset : ietruebody().scrollLeft,
dsocy=typeof window.pageYOffset == 'number'? pageYOffset : ietruebody().scrollTop,

Other than those two things, it is hard to say, as it is working here. You might try adding:

Code:

#motioncontainer {
text-align: left;
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: 205px;
}

Good luck!

**Fynci** · 11-25-2008, 05:40 PM

Thanks for the suggestions John. I was just returning to post that I seem to have fixed the problem. The problem lied with:

Code:

<nobr id="trueContainer">
<div align="center"><a href="images/cluster1.jpg" class="highslide" onclick="return hs.expand(this)"><img src="images/cluster1s.jpg" alt="cluster range" /> </a> <div class="highslide-caption">
Silver Cluster Bangle</div><a href="images/cluster2.jpg" class="highslide" onclick="return hs.expand(this)"><img src="images/cluster2s.jpg" alt="cluster range" /></a> <div class="highslide-caption">
Silver Cluster Earrings</div> <a href="images/cluster5.jpg" class="highslide" onclick="return hs.expand(this)"><img src="images/cluster5s.jpg" alt="cluster range" /></a> <div class="highslide-caption">
Silver Cluster and Black Lava Rock Necklace</div> <a href="images/cluster3.jpg" class="highslide" onclick="return hs.expand(this)"><img src="images/cluster3s.jpg" alt="cluster range" /></a> <div class="highslide-caption">
Black Rhodium Plated Silver Studs (also available in silver and gold plated silver)</div> <a href="images/cluster8.jpg" class="highslide" onclick="return hs.expand(this)"><img src="images/cluster8s.jpg" alt="cluster range" /></a> <div class="highslide-caption">
Gold Plated Silver Cluster and Freshwater Pearl Ring</div> <a href="images/cluster9.jpg" class="highslide" onclick="return hs.expand(this)"><img src="images/cluster9s.jpg" alt="cluster range" /></a> <div class="highslide-caption">
Oxidised Silver and Pale Pink Freshwater Pearl Ring</div> <a href="images/cluster10.jpg" class="highslide" onclick="return hs.expand(this)"><img src="images/cluster10s.jpg" alt="cluster range" /></a> <div class="highslide-caption">
Silver Cluster and Pale Pink Freshwater Pearl Ring</div><a href="images/cluster6.jpg" class="highslide" onclick="return hs.expand(this)"><img src="images/cluster6s.jpg" alt="cluster range" /></a> <div class="highslide-caption">
Oxidised Silver and Freshwater Pearl Necklace</div> <a href="images/cluster7.jpg" class="highslide" onclick="return hs.expand(this)"><img src="images/cluster7s.jpg" alt="cluster range" /></a> <div class="highslide-caption">
Silver and Pink Freshwater Pearl Necklace</div> <a href="images/cluster11.jpg" class="highslide" onclick="return hs.expand(this)"><img src="images/cluster11s.jpg" alt="cluster range" /> </a> <div class="highslide-caption">
Silver Plated Brass Cluster Neckpiece</div></div>
</nobr></div>

I removed the <div align="center"> as I was using the centering from the .css file. I have asked somebody with a Mac / Safari to test, and they have told me that it is now scrolling

Thread: CMotion Image Gallery with Firefox & Safari

Thread Tools

Search Thread

CMotion Image Gallery with Firefox & Safari

yes !

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions