C Motion Gallery Help

**moscarda** · 08-30-2005, 09:55 PM

Script: C Motion Gallery
http://www.dynamicdrive.com/dynamici...iongallery.htm

Hey everyone,
I'd like to make some (minor?) alterations to the C-Motion Gallery script, so that instead of reaching the "end of gallery" dialogue, the gallery would loop back to the beginning. Is this possible and if yes, does anyone have any suggestions to help this amateur out? Thanks!

///

**moscarda** · 08-30-2005, 10:16 PM

okay i realised im an idiot and someone just answered this question in another post. anyway, i have a NEW question? i looked at the source and i still can't figure out how to get rid of the padding between the images. i need them to be seamless.

**jscheuer1** · 08-31-2005, 03:58 AM

OK, there are a few things that you need to do. First, remove all of this:

Code:

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

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

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

from gallerystyle.css. Or, if you are using the online demo I made, just remove the style section completely. Next go to the section in the html where the images are:

HTML Code:

<nobr id="trueContainer"><a href="javascript:enlargeimage('dynamicbook1.gif')"><img src="dynamicbook1.gif" border=1></a> <a href="javascript:enlargeimage('dynamicbook1.gif', 300, 300)"><img src="dynamicbook1.gif" border=1></a> <a href="http://www.dynamicdrive.com"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a></nobr>

Change all border=1 to border=0 and remove all the spaces between </a> <a>.

**moscarda** · 08-31-2005, 05:35 PM

great, thanks so much!

///

new question... this may or may not be possible using this c-motion script as a starting point...im working on this website where the user will mouse-click a tape-measure and the tape will begin to scroll out of it's holder. i'd like it to scroll, say 6 inches and stop, with each inch being a seperate image button in the c-motion sequence, in addition to the "tab" at the end of the tape. then when the user clicks it again, it will scroll back into it's holder. is this a stretch or might it work? i understand most html but i have always had problems with div layers!!!

**jscheuer1** · 08-31-2005, 05:49 PM

That would probably be best adapted from another script or written as a custom job. Of scripts that I can think of off the top of my head, this mod I made of a marquee script would probably be closest as a starting point. Images with links could be substituted for the text and the behavior modified to conform to the various mouse events you envision. No promises but, I will look into it. If you have your images handy or could make them available online, it would make it easier to come up with something.

**moscarda** · 09-04-2005, 08:05 PM

okay i uploaded a sample page here ... i'd like to have the images scroll in from the left, not to the left, and it would be cool if they marquee didn't start until a button was clicked (like the film canister) and then when clicked again, it will scroll back inside. and i also can't figure out how to get rid of the left margin (the space in between the marquee background space and the first image) ...all this will make more sense once you visit the sample page.

thanks for the help, you're the best!

**jscheuer1** · 09-05-2005, 07:30 AM

I had fun with this one, hope it has everything you want on it.

Code:

<html>
<head>
<title>Custom Marquee - Demo</title>
</head>
<body text="#adadad" bgcolor="#0A0404">
<h3>Custom Marquee - Demo</h3>
		<table border="0" cellspacing="0" cellpadding="0">
			<tr>
				<td><img style="cursor:pointer; cursor:hand;" onclick="roll(this);" src="canister.jpg" alt="Film Canister" title="Click for Film Strip Gallery" height="131" width="69" border="0"></td>
				<td>
<script type="text/javascript">

/*
Custom Cross browser Marquee script - 
From script © Dynamic Drive (www.dynamicdrive.com)
For full source code, 100's more DHTML scripts, and Terms Of Use,
Visit http://www.dynamicdrive.com
This credit MUST stay intact for use
Customization courtesy of and © John Davenport Scheuer
 (jscheuer1 - Dynamic Drive Help Forums)
Visit http://www.dynamicdrive.com/forums/
*/

//Set Height Adjustment to center marquee vertically
var hgtAdj=3
//Specify the marquee's width (in pixels)
var marqueewidth="560px"
//Specify the marquee's height
var marqueeheight="131px"
//Specify the marquee's marquee speed (larger is faster 1-10)
var marqueespeed=2
//configure background color:
var marqueebgcolor="#0A0404"
//configure canister's title (tooltip) after extension
var afterExt="Click to Retract Film"
//configure film's title (tooltip)
var negTit="Click Negatives for 'Print Quality' Images"

//Specify the marquee's content (don't delete <nobr> tag)
//Keep all content on ONE line, and backslash any single quotations (ie: that\'s great):

var marqueecontent='<nobr id="trueContainer"><a href="balloon.jpg" target="_blank"><img src="4.jpg" alt="" height="131" width="113" border="0"></a><a href="darius.jpg" target="_blank"><img src="3.jpg" alt="" height="131" width="107" border="0"></a><a href="trike.jpg" target="_blank"><img src="2.jpg" alt="" height="131" width="107" border="0"></a><a href="portrait.jpg" target="_blank"><img src="1.jpg" alt="" height="131" width="107" border="0"></a><img src="0.jpg" alt="" height="131" width="119" border="0"></nobr>'


////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=marqueespeed
var direction='reverse'
var iedom=document.all||document.getElementById
var lefttime, actualwidth, cross_marquee, ns_marquee, canEl, bTit=''

function populate(){
if (iedom){
cross_marquee=document.getElementById? document.getElementById("iemarquee") : document.all.iemarquee
cross_marquee.innerHTML=marqueecontent
actualwidth=document.all? trueContainer.offsetWidth : document.getElementById("trueContainer").offsetWidth
cross_marquee.style.left=8-actualwidth+"px"
}
var strip=document.images
for (var i = 0; i < strip.length; i++){
var test=strip[i]
while (test.parentNode){
if (test.parentNode&&test.parentNode.id=='trueContainer'){
strip[i].title=negTit
break
}
test=test.parentNode
}
}
//alert (document.images[2].parentNode.parentNode.id)
}
window.onload=populate

function altM(){
direction=(direction=='reverse')? 'forward' : 'reverse'
}
function roll(el){
canEl=el
if (bTit=='')
bTit=canEl.title
clearInterval(lefttime)
lefttime=setInterval("scrollmarquee()",20)
canEl.title=''
canEl.style.cursor='default'
}

function scrollmarquee(){
if (iedom){
var c1=(direction=='reverse')? (parseInt(cross_marquee.style.left)<-1) : (parseInt(cross_marquee.style.left)>(actualwidth*(-1)+8));
if (c1)
(direction=='reverse')? cross_marquee.style.left=parseInt(cross_marquee.style.left)+copyspeed+"px" : cross_marquee.style.left=parseInt(cross_marquee.style.left)-copyspeed+"px"
else{
clearInterval(lefttime)
canEl.title=(direction=='reverse')? afterExt : bTit
canEl.style.cursor=(document.all&&!window.opera)? 'hand' : 'pointer'
altM();
return;
}
}
else
return;
}

if (iedom){
with (document){
write('<table border="0" cellspacing="0" cellpadding="0"><td>')
write('<div style="position:relative;width:'+marqueewidth+';height:'+marqueeheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+marqueewidth+';height:'+marqueeheight+';background-color:'+marqueebgcolor+'">')
write('<div id="iemarquee" style="position:absolute;left:0px;top:'+hgtAdj+'px"></div>')
write('</div></div>')
write('</td></table>')
}
}
</script>
				</td>
			</tr>
		</table>
	</body>
</html>

**moscarda** · 09-05-2005, 07:36 PM

wow! this is better than i imagined it! i love how the tab sticks out a little at the end when its retracted! you are a life saver!

so in the future, when i want to add/subtract/change the "negatives", i would just reset the marquee width? do i need to change anything else.

holy crap, thanks again.

**jscheuer1** · 09-05-2005, 08:46 PM

Well, I didn't test it with other images but, it is all set to detect the information it needs aside from that required in the configuration so, it should be fine with anything you want to throw at it, within reason. It may not behave too well in some browsers if the film strip is really long.

One thing I had trouble deciding on was about the tooltip for the images in the film strip. If you do not want the tab to have the tool tip, change this:

Code:

while (test.parentNode){
if (test.parentNode&&test.parentNode.id=='trueContainer'){
strip[i].title=negTit
break
}
test=test.parentNode
}
}

to this:

Code:

while (test.parentNode){
test=test.parentNode
if (test.parentNode&&test.parentNode.id=='trueContainer'){
strip[i].title=negTit
break
}
}
}

That way, only the negatives will have the tooltip. This assumes that the images have links and that the tab does not (as is the case in your code).

**moscarda** · 09-06-2005, 06:00 PM

what does "tool tip" mean? sorry about these dumb questions...

Thread: C Motion Gallery Help

Thread Tools

Search Thread

C Motion Gallery Help

Bookmarks

Bookmarks

Posting Permissions