PDA

View Full Version : CMotion image gallery DOESN'T SCROLL



sjhpix
10-12-2005, 08:39 AM
SCRIPT: CMotion Image Gallery
http://www.dynamicdrive.com/dynamicindex4/cmotiongallery.htm

Ok, so CMotion is EXACTLY what I was looking for for nice image galleries instead of having to use Flash. But, after a full day of tweaking and re-checking and reading these posts I can't find the answer to my problem: The images won't move/scroll left to right! :confused:

You can see the page I'm working with here:
http://www.stevenharrisphotography.com/sjh/travel/travel_copy.html

I have a hunch it's something simple ... but as I'm no JS expert, I've tried and tried and can't deduce the problem here.

Thanks in advance for your help!

-sjhpix

lynnkeen
10-12-2005, 12:50 PM
Hi!

At a quick glance of your code I see that you still have

<a href="javascript:enlargeimage('travel1.jpg')"><img src="travel1.jpg" border=1></a>
<a href="javascript:enlargeimage('dynamicbook1.gif', 300, 300)"><img src="travel1.jpg" border=1></a>

Where you have 'dynamicbook1.gif - shouldn't this be changed to travel1.jpg?

Lynn Keen

sjhpix
10-12-2005, 02:37 PM
Thanks for that, but actually that code is just for the script for the image in pop-up window ... right now my BIG problem is that the entire gallery won't move left to right at all ... which was the whole reason for choosing the CMotion gallery.

-sjhpix

sjhpix
10-13-2005, 03:50 AM
I'm wondering if the problem of the gallery not moving has something to do with the fact that there are 2 different javascripts in the head of the code: 1 for the CMotion and 1 for preloading images? I read somewhere that javascripts might conflict with each other. OR, could it be because I don't have a DOCTYPE tag at the top of the page? OR, could it be because I had to put a table data tag <td> in for the Cmotion html <div> tags and possibly that's what's throwing off the "trueContainer" <nobr> tag ?

Here's the head of code w/ 2 scripts:


<html>
<head>
<title>sjh_travel</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="gallerystyle.css" />
<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
***********************************************/

</script>

<!-- ImageReady Preload Script (sjh_travel.psd) -->
<script type="text/javascript">
<!--

function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}

var preloadFlag = false;
function preloadImages() {
if (document.images) {
portfolios_over = newImage("images/portfolios-over.gif");
personal_work_over = newImage("images/personal_work-over.gif");
tearsheets_over = newImage("images/tearsheets-over.gif");
stock_over = newImage("images/stock-over.gif");
about_over = newImage("images/about-over.gif");
preloadFlag = true;
}
}

// -->
</script>
<!-- End Preload Script -->
</head>
_______________________
AND here's the BODY code just above and below the CMotion html:
_______________________

<tr>
<td id="trueContainer" colspan="11" bgcolor="#FFFFFF">

<div id="motioncontainer" style="position:relative;width:789px;height:343px;overflow:hidden;">
<div id="motiongallery" style="position:absolute;left:3;top:1;white-space:nowrap;">

<nobr>
<a href="javascript:enlargeimage('travel1.jpg')"><img src="travel1.jpg" border=1></a>
<a href="javascript:enlargeimage('dynamicbook1.gif', 300, 300)"><img src="travel1.jpg" border=1></a>
<a href="javascript:enlargeimage('travel1.jpg')"><img src="travel1.jpg" border=1></a>
<a href="#"><img src="travel1.jpg" border=1></a>
<a href="#"><img src="travel1.jpg" border=1></a>
<a href="#"><img src="travel1.jpg" border=1></a>
<a href="#"><img src="travel1.jpg" border=1></a>
<a href="#"><img src="travel1.jpg" border=1></a>
<a href="#"><img src="travel1.jpg" border=1></a></nobr>

</div>
</div>
</td>
_____________________
I realize the <nobr> tag should have the id="trueContainer" bit, but I've tried changing them around as I read in one post that having a table around the code you should perhaps change the table id instead of the <nobr> tag. Can a <td> tag even have an id="trueContainer" ...? I've tried it several ways and none of it seems to do the trick.

Thanks alot,

-sjhpix

lynnkeen
10-13-2005, 11:00 AM
It isn't necessarily because of multiple javascripts. I have multiple scripts and they are running fine. You made sure that you have the .js file on the server, and that it is in the right directory? - perhaps it's not pointing to the right location?

L.

sjhpix
10-13-2005, 02:26 PM
Hi Lynn,

Yes the javascript file is in the right directory ... I have gotten other pages to work locally on my hard drive but not my page .. so I know it's not something like a missing file, etc.

I'm really starting to think it is a problem with the multiple javascripts in the head ... the other is for preloading some rollover images. I don't know why this would influence it, but I'm thinking this has to be it.

Anyone have any ideas as to the real culprit here for this code not working?

http://www.stevenharrisphotography.com/sjh/travel/travel_copy.html

Thanks a million!

-sjhpix

sjhpix
10-13-2005, 03:37 PM
Ok, so yes, indeed the problem was the 2 different Javascript codes inside the <head> when I removed the Preload script as well as the "onload=preloadImages()" code from the first line in the <body> tag ... SUCCESS ... it works. I had to get around how to make the rollovers preload on their own ... but all in all, at least the CMotion gallery is now doing what it is supposed to ...

Thanks a million for the script ... it's a great funcionality ...

-sjhpix