Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: C Motion Gallery Help

  1. #1
    Join Date
    Jul 2005
    Location
    UK
    Posts
    159
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default C Motion Gallery Help

    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!

    ///

  2. #2
    Join Date
    Jul 2005
    Location
    UK
    Posts
    159
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default

    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.

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,076
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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>.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Jul 2005
    Location
    UK
    Posts
    159
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default

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

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,076
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Jul 2005
    Location
    UK
    Posts
    159
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default

    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!
    Last edited by moscarda; 09-04-2005 at 08:09 PM.

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,076
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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>
    Last edited by jscheuer1; 09-05-2005 at 08:21 AM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Jul 2005
    Location
    UK
    Posts
    159
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default

    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.

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,076
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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).
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #10
    Join Date
    Jul 2005
    Location
    UK
    Posts
    159
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Default

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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •