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

Thread: CMotion Image Gallery Modification if possible?

  1. #1
    Join Date
    Apr 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default CMotion Image Gallery Modification if possible?

    hey i was looking at this script and wodering..is it possible for any one add like your own arrows at the left and right so when you click them..the images scroll to that side...if possible then please help..as i am looking for something like that

    thanks

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
    <html>
    <head>
    <title>CMotion w/arrow controls - Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    #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 */
    }
    
    #statusdiv{
    position: absolute;
    padding: 2px;
    left: -300px;
    background-color: lightyellow;
    border: 1px solid gray;
    visibility: hidden;
    }
    </style>
    
    <script type="text/javascript">
    /***********************************************
    * CMotion Image Gallery-  Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * Visit http://www.dynamicDrive.com for source code
    * Last updated Mar 15th, 04'. Added "End of Gallery" message.
    * This copyright notice must stay intact for legal use
    * Modified in http://www.dynamicdrive.com/forums by
    * jscheuer1 to use arrow controls
    ***********************************************/
    
    var restarea=6 //1) width of the "neutral" area in the center of the gallery in px
    var maxspeed=7 //2) top scroll speed in pixels. Script auto creates a range from 0 to top speed.
    var endofgallerymsg="<span style='font-size: 11px'>End of Gallery</span>" //3) message to show at end of gallery. Enter "" to disable message.
    
    function enlargeimage(path, optWidth, optHeight){ //function to enlarge image. Change as desired.
    var actualWidth=typeof optWidth!="undefined" ? optWidth : "600px" //set 600px to default width
    var actualHeight=typeof optHeight!="undefined" ? optHeight : "500px" //set 500px to  default height
    var winattributes="width="+actualWidth+",height="+actualHeight+",resizable=yes"
    window.open(path,"", winattributes)
    }
    
    ////NO NEED TO EDIT BELOW THIS LINE////////////
    
    var iedom=document.all||document.getElementById
    var scrollspeed=0
    var movestate=""
    
    var actualwidth=''
    var cross_scroll, ns_scroll
    var loadedyes=0
    
    function ietruebody(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }
    
    function creatediv(){
    statusdiv=document.createElement("div")
    statusdiv.setAttribute("id","statusdiv")
    document.body.appendChild(statusdiv)
    statusdiv=document.getElementById("statusdiv")
    statusdiv.innerHTML=endofgallerymsg
    }
    
    function positiondiv(){
    menuheight=parseInt(crossmain.offsetHeight)
    mainobjoffsetH=getposOffset(crossmain, "top")
    statusdiv.style.left=mainobjoffset+(menuwidth/2)-(statusdiv.offsetWidth/2)+"px"
    statusdiv.style.top=menuheight+mainobjoffsetH+"px"
    }
    
    function showhidediv(what){
    if (endofgallerymsg!="")
    statusdiv.style.visibility=what
    }
    
    function getposOffset(what, offsettype){
    var totaloffset=(offsettype=="left")? what.offsetLeft: what.offsetTop;
    var parentEl=what.offsetParent;
    while (parentEl!=null){
    totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
    parentEl=parentEl.offsetParent;
    }
    return totaloffset;
    }
    
    
    function moveleft(){
    if (loadedyes){
    movestate="left"
    if (iedom&&parseInt(cross_scroll.style.left)>(menuwidth-actualwidth)){
    cross_scroll.style.left=parseInt(cross_scroll.style.left)-scrollspeed+"px"
    showhidediv("hidden")
    }
    else
    showhidediv("visible")
    }
    lefttime=setTimeout("moveleft()",10)
    }
    
    function moveright(){
    if (loadedyes){
    movestate="right"
    if (iedom&&parseInt(cross_scroll.style.left)<0){
    cross_scroll.style.left=parseInt(cross_scroll.style.left)+scrollspeed+"px"
    showhidediv("hidden")
    }
    else
    showhidediv("visible")
    }
    righttime=setTimeout("moveright()",10)
    }
    
    function motionengine(e){
    var dsocx=(window.pageXOffset)? pageXOffset: ietruebody().scrollLeft;
    var dsocy=(window.pageYOffset)? pageYOffset : ietruebody().scrollTop;
    var 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
    if (window.righttime) clearTimeout(righttime)
    if (movestate!="left") moveleft()
    }
    else if (curposy<leftbound){
    scrollspeed=(leftbound-curposy)/((menuwidth-restarea)/2) * maxspeed
    if (window.lefttime) clearTimeout(lefttime)
    if (movestate!="right") moveright()
    }
    else
    scrollspeed=0
    }
    
    function contains_ns6(a, b) {
    while (b.parentNode)
    if ((b = b.parentNode) == a)
    return true;
    return false;
    }
    
    function stopmotion(e){
    if ((window.event&&!crossmain.contains(event.toElement)) || (e && e.currentTarget && e.currentTarget!= e.relatedTarget && !contains_ns6(e.currentTarget, e.relatedTarget))){
    if (window.lefttime) clearTimeout(lefttime)
    if (window.righttime) clearTimeout(righttime)
    movestate=""
    }
    }
    
    function fillup(){
    if (iedom){
    crossmain=document.getElementById? document.getElementById("motioncontainer") : document.all.motioncontainer
    menuwidth=parseInt(crossmain.style.width)
    mainobjoffset=getposOffset(crossmain, "left")
    cross_scroll=document.getElementById? document.getElementById("motiongallery") : document.all.motiongallery
    actualwidth=document.all? cross_scroll.offsetWidth : document.getElementById("trueContainer").offsetWidth
    
    crossmain.onmousemove=function(e){
    motionengine(e)
    }
    
    crossmain.onmouseout=function(e){
    stopmotion(e)
    showhidediv("hidden")
    }
    }
    loadedyes=1
    if (endofgallerymsg!=""){
    creatediv()
    positiondiv()
    }
    }
    window.onload=fillup
    
    function move(dir){
    if (window.lefttime)
    clearTimeout(lefttime);
    if (window.righttime)
    clearTimeout(righttime);
    scrollspeed=1
    if (dir=='left')
    moveleft();
    if (dir=='right')
    moveright();
    }
    </script>
    </head>
    <body>
    <div id="motioncontainer" style="position:relative;width:400px;height:150px;overflow:hidden;">
    <div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;">
    
    <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>
    
    </div>
    </div>
    <div style="width:400px;text-align:center;">
    <a onclick="return false;" href="javascript:moveleft();" onmouseover="move('left');"><img alt="Left Arrrow" title="Scroll Images Left" src="left_arrow.gif" border="0"></a>
    
    <a onclick="return false;" href="javascript:stop();" onmouseover="move('stop');"><img alt="Stop Button" title="Stop Images" src="stop.gif" border="0"></a>
    
    <a onclick="return false;" href="javascript:moveright();"onmouseover="move('right');"><img alt="Right Arrrow" title="Scroll Images Right" src="right_arrow.gif" border="0"></a></div>
    
    </body>
    </html>
    - John
    ________________________

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

  3. #3
    Join Date
    Oct 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    it works great in opera but i cant get it to work in ie7 or firefox

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Why not?
    - John
    ________________________

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

  5. #5
    Join Date
    Mar 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default mod request

    how can I do this if my script is external? thanks for any help.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Having an internal script is very little different than having an external one. Here are a few simple guidelines, if you've never done this sort of thing before:

    Use a text editor to save the script, call it 'file_name.js' where 'file_name' can be any valid file name of your choosing. Substitute the name of your external .js file for some.js in the below:

    HTML Code:
    <script src="some.js" type="text/javascript"></script>
    Common problems arise when:

    1 ) The script file is not in the directory specified. In the above example it must be in the same directory as the page(s) that use it. Below, it can be in the scripts directory off of the root of a domain:

    HTML Code:
    <script src="http://www.somedomain.com/scripts/some.js" type="text/javascript"></script>
    2 ) Opening, closing and/or 'hiding' tags are left in the external file. This means that you must strip:
    Code:
    <script>
    <!--
    and
    Code:
    //-->
    </script>
    and any of their many variations from the beginning and end of the external file.

    3 ) The external call (<script src="some.js" type="text/javascript"></script>) is not inserted into the page at the correct spot. The external call must be inserted at the same place on the page where the script was/would have been.

    4 ) Paths to other files (if) used by the script are no longer valid due to its location. This is only a problem if the external script is kept in a different directory than the page it was working on when it was an internal script. To correct this, use absolute paths inside the script. Absolute path examples:

    Code:
    http://www.somedomain.com/images/button.gif
    
    http://www.somedomain.com/~mysitename/index.html
    5 ) Inappropriately combining two or more scripts into one external file. Usually external scripts can be combined if one knows enough about scripting to do so properly. Even then it is possible to overlook something.

    A rule of thumb when testing is, if it won't work on the page, it won't work as an external file either.

    One other thing, if this is a DD script or any script that requires the credit remain for legal use, include the credit in the on page call, ex:

    HTML Code:
    <script src="some.js" type="text/javascript">
    /***********************************************
    * IFrame SSI script II-  Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
    * Visit DynamicDrive.com for hundreds of original DHTML scripts
    * This notice must stay intact for legal use
    ***********************************************/
    </script>
    Make sure to retain all the 'decorations', as these include begin and end javascript comment delimiters without which the script won't function.
    - John
    ________________________

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

  7. #7
    Join Date
    Mar 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I have my page working calling the external script but when I add the above code to get the scroll buttons it doesn't work on the external script version on my page. the same code with internal script the scroll buttons work.
    on both internal and external script versions the mouse over images scroll works. what modification to the button/arrow link code do I need for it to work with an external script?

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by electrocit View Post
    I have my page working calling the external script but when I add the above code to get the scroll buttons it doesn't work on the external script version on my page. the same code with internal script the scroll buttons work.
    on both internal and external script versions the mouse over images scroll works. what modification to the button/arrow link code do I need for it to work with an external script?
    I'm not sure if the problem is that you are confusing the HTML portions of the code which must be on the page with the javascript portion that can be made external or if the trouble is something else. A link to your problem page would most likely clear this up.
    - John
    ________________________

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

  9. #9
    Join Date
    Mar 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    here is a link to the website with external script and non working arrows

    http://kgimaging.com/tnp/photography.html

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Code:
    <div style="position:relative; left:-20 ;top:-185 ;width:12 ;height:20 ;z-index:4">
    <a onclick="return false;" href="javascript:moveleft()" 
    	onmouseover="if(typeof righttime!='undefined'){clearTimeout(righttime)};if(typeof lefttime!='undefined'){clearTimeout(lefttime)};moveleft();scrollspeed=2;"
    	onmouseout="stopmotion();scrollspeed=0;"
    	>
    	<img alt="Left Arrrow" title="Scroll Images Left" 			src="images/arrow_left.gif" border="0"></a>
    </div>
    <div style="position:relative; left:528 ;top:-200 ;width:12 ;height:20 ;z-index:5">
    <a onclick="return false;" href="javascript:moveright()"
    	onmouseover="if(typeof righttime!='undefined'){clearTimeout(righttime)};if(typeof lefttime!='undefined'){clearTimeout(lefttime)};moveright();scrollspeed=2;"
    	onmouseout="stopmotion();scrollspeed=0;"
    	>
    	<img alt="Right Arrrow" title="Scroll Images Right" 			src="images/arrow_right.gif" border="0"></a>
    
    </div>
    - John
    ________________________

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

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
  •