PDA

View Full Version : CMotion Image Gallery Modification if possible?



eklipz
04-11-2006, 06:55 PM
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

jscheuer1
04-12-2006, 05:45 AM
<!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>

bennyy
10-23-2006, 04:11 PM
it works great in opera but i cant get it to work in ie7 or firefox

jscheuer1
10-25-2006, 05:06 AM
Why not?

electrocit
03-11-2007, 05:54 AM
how can I do this if my script is external? thanks for any help.

jscheuer1
03-12-2007, 09:33 PM
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:


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


<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:
<script>
<!--and
//-->
</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:


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:


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

electrocit
03-17-2007, 04:28 AM
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?

jscheuer1
03-17-2007, 04:40 AM
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.

electrocit
03-18-2007, 04:13 AM
here is a link to the website with external script and non working arrows

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

jscheuer1
03-18-2007, 06:30 AM
<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>

electrocit
03-18-2007, 04:58 PM
Works great! Thanks for the code.