PDA

View Full Version : 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/dynamicindex4/cmotiongallery.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_luxe/collection-cuirs-luxe.htm

Can anybody help me :confused:

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:


<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:


#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:


<!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:


#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:


#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):


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:


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:


#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:


<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 :)