Log in

View Full Version : Problem customizing CMotion Image Gallery II and Thumbnail Viewer II


chadlexmorgan
07-16-2011, 03:49 AM
1) Script Title:CMotion Image Gallery II

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/cmotiongallery2.htm

as well as

Script Title:Image Thumbnail viewer II
Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm

3) Describe problem: Trying to get the functionallity of the cmotion gallery but to view it like the thumbnail viewer.
I would like the viewer to click on the thumbnail in the cmotion gallery but instead of opening in a new window want it to display right next to it like it does in the thumbnail viewer. The following is the script I have.


<html>
<head>
<link rel="stylesheet" href="./gallerystyle2.css" />
<script type="text/javascript" src="./motiongallery2.js">


/***********************************************
* CMotion Image Gallery II- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit

http://www.dynamicDrive.com for source code
* Modified by jscheuer1 for vertical orientation, at http://www.dynamicDrive.com/forums
***********************************************/


</script>
<script type="text/javascript" src="./thumbnailviewer2.js">


/***********************************************
* Image Thumbnail Viewer II script- © 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>
</head>

<body bgcolor="#B2a088">
<div align="center"><img src="./logo3.jpg"></div><br />
<script type="text/javascript" src="milonic_src.js"></script>
<script type="text/javascript" src="mmenudom.js"></script>
<script type="text/javascript" src="menu_data.js"></script>
<br /><br /><br /><br />

<div style="overflow:hidden;" align="center">

<div id="motioncontainer" style=" width:600px; height:400px; overflow:hidden; position: relative;" align="center">

<div align="center" id="loadarea"><img src="./SR_pics/Art/busch.jpg"></div>

<div id="motiongallery" style="position:absolute; left:0; top:0;" align="center">

<!--Gallery Contents below-->

<a href="./SR_pics/Art/busch.jpg" rel="enlargeimage" rev="targetdiv:loadarea,trigger:click,preload:yes" title="Busch Stadium" >
<img src="./SR_pics/Art/tnbusch.jpg" border=1></a><br />

<a href="./SR_pics/Art/busch1.jpg" rel="enlargeimage" rev="targetdiv:loadarea,trigger:click,preload:yes" title="Busch Stadium" >
<img src="./SR_pics/Art/tnbusch1.jpg" border=1></a><br />

<a href="./SR_pics/Art/graincherry.jpg" rel="enlargeimage" rev="targetdiv:loadarea,trigger:click,preload:yes" title="Busch Stadium" >
<img src="./SR_pics/Art/tngraincherry.jpg" border=1></a><br />

<a href="./SR_pics/Art/chicago.jpg" rel="enlargeimage" rev="targetdiv:loadarea,trigger:click,preload:yes" title="Busch Stadium" >
<img src="./SR_pics/Art/tnchicago.jpg" border=1></a><br />

<a href="./SR_pics/Art/fallstation.jpg" rel="enlargeimage" rev="targetdiv:loadarea,trigger:click,preload:yes" title="Busch Stadium" >
<img src="./SR_pics/Art/tnfallstation.jpg" border=1></a><br />

<a href="./SR_pics/Art/grove.jpg" rel="enlargeimage" rev="targetdiv:loadarea,trigger:click,preload:yes" title="Busch Stadium" >
<img src="./SR_pics/Art/tngrove.jpg" border=1></a><br />
<a href="./SR_pics/Art/faustyellow.jpg" rel="enlargeimage" rev="targetdiv:loadarea,trigger:click,preload:yes" title="Busch Stadium" >
<img src="./SR_pics/Art/tnfaustyellow.jpg" border=1></a><br />


<a href="./SR_pics/Art/golf.jpg" rel="enlargeimage" rev="targetdiv:loadarea,trigger:click,preload:yes" title="Busch Stadium" >
<img src="./SR_pics/Art/tngolf.jpg" border=1></a><br />

<a href="./SR_pics/Art/cherry.jpg" rel="enlargeimage" rev="targetdiv:loadarea,trigger:click,preload:yes" title="Busch Stadium" >
<img src="./SR_pics/Art/tncherry.jpg" border=1></a><br />
<a href="./SR_pics/Art/hostas.jpg" rel="enlargeimage" rev="targetdiv:loadarea, trigger:click, preload:yes" title="Busch Stadium" >
<img src="./SR_pics/Art/tnhostas.jpg" border=1></a><br />
<a href="./SR_pics/Art/pestation.jpg" rel="enlargeimage" rev="targetdiv:loadarea, trigger:click, preload:yes" title="Busch Stadium" >
<img src="./SR_pics/Art/tnpestation.jpg" border=1></a><br />
<a href="./SR_pics/Art/oldwindow.jpg" rel="enlargeimage" rev="targetdiv:loadarea, trigger:click, preload:yes" title="Busch Stadium" >
<img src="./SR_pics/Art/tnoldwindow.jpg" border=1></a><br />
<a href="./SR_pics/Art/plksign.jpg" rel="enlargeimage" rev="targetdiv:loadarea, trigger:click, preload:yes" title="Busch Stadium" >
<img src="./SR_pics/Art/tnplksign.jpg" border=1></a><br />
<a href="./SR_pics/Art/purpflow.jpg" rel="enlargeimage" rev="targetdiv:loadarea, trigger:click, preload:yes" title="Busch Stadium" >
<img src="./SR_pics/Art/tnpurpflow.jpg" border=1></a><br />
<a href="./SR_pics/Art/purpflow1.jpg" rel="enlargeimage" rev="targetdiv:loadarea, trigger:click, preload:yes" title="Busch Stadium" >
<img src="./SR_pics/Art/tnpurpflow1.jpg" border=1></a><br />
<a href="./SR_pics/Art/purpflow2.jpg" rel="enlargeimage" rev="targetdiv:loadarea, trigger:click, preload:yes" title="Busch Stadium" >
<img src="./SR_pics/Art/tnpurpflow2.jpg" border=1></a><br />
<a href="./SR_pics/Art/purpflow3.jpg" rel="enlargeimage" rev="targetdiv:loadarea, trigger:click, preload:yes" title="Busch Stadium" >
<img src="./SR_pics/Art/tnpurpflow3.jpg" border=1></a><br />
<a href="./SR_pics/Art/purpflow4.jpg" rel="enlargeimage" rev="targetdiv:loadarea, trigger:click, preload:yes" title="Busch Stadium" >
<img src="./SR_pics/Art/tnpurpflow4.jpg" border=1></a><br />
<a href="./SR_pics/Art/seagull.jpg" rel="enlargeimage" rev="targetdiv:loadarea, trigger:click, preload:yes" title="Busch Stadium" >
<img src="./SR_pics/Art/tnseagull.jpg" border=1></a><br />
<a href="./SR_pics/Art/solarbirch.jpg" rel="enlargeimage" rev="targetdiv:loadarea, trigger:click, preload:yes" title="Busch Stadium" >
<img src="./SR_pics/Art/tnsolarbirch.jpg" border=1></a><br />
<a href="./SR_pics/Art/solarbirchbr.jpg" rel="enlargeimage" rev="targetdiv:loadarea, trigger:click, preload:yes" title="Busch Stadium" >
<img src="./SR_pics/Art/tnsolarbirchbr.jpg" border=1></a><br />
<a href="./SR_pics/Art/solarbirchpo.jpg" rel="enlargeimage" rev="targetdiv:loadarea, trigger:click, preload:yes" title="Busch Stadium" >
<img src="./SR_pics/Art/tnsolarbirchpo.jpg" border=1></a><br />
<a href="./SR_pics/Art/solarbirchvr.jpg" rel="enlargeimage" rev="targetdiv:loadarea, trigger:click, preload:yes" title="Busch Stadium" >
<img src="./SR_pics/Art/tnsolarbirchvr.jpg" border=1></a><br />
<a href="./SR_pics/Art/train.jpg" rel="enlargeimage" rev="targetdiv:loadarea, trigger:click, preload:yes" title="Busch Stadium" >
<img src="./SR_pics/Art/tntrain.jpg" border=1></a><br />


<!--End Gallery Contents-->


</div>
</div>
</div>
</body>
</html>
vwphillips
07-16-2011, 10:25 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#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">
/*<![CDATA[*/
/***********************************************
* CMotion Image Gallery II- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for source code
* Modified by jscheuer1 for vertical orientation, at http://www.dynamicDrive.com/forums
***********************************************/

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.


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

var iedom=document.all||document.getElementById
var scrollspeed=0
var movestate=""

var actualheight=''
var cross_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(){
menuwidth=parseInt(crossmain.offsetWidth)
mainobjoffsetW=getposOffset(crossmain, "left")
statusdiv.style.left=mainobjoffsetW+(menuwidth/2)-(statusdiv.offsetWidth/2)+"px"
statusdiv.style.top=menu_height+mainobjoffset+10+"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 moveup(){
if (loadedyes){
movestate="up"
if (iedom&&parseInt(cross_scroll.style.top)>(menu_height-actualheight)){
cross_scroll.style.top=parseInt(cross_scroll.style.top)-scrollspeed+"px"
showhidediv("hidden")
}
else
showhidediv("visible")
}
uptime=setTimeout("moveup()",10)
}

function movedown(){
if (loadedyes){
movestate="down"
if (iedom&&parseInt(cross_scroll.style.top)<0){
cross_scroll.style.top=parseInt(cross_scroll.style.top)+scrollspeed+"px"
showhidediv("hidden")
}
else
showhidediv("visible")
}
downtime=setTimeout("movedown()",10)
}

function motionengine(e){
var dsocx=(window.pageXOffset)? pageXOffset: ietruebody().scrollLeft;
var dsocy=(window.pageYOffset)? pageYOffset : ietruebody().scrollTop;
var curposy=window.event? event.clientY : e.clientY? e.clientY: ""
curposy-=mainobjoffset-dsocy
var leftbound=(menu_height-restarea)/2
var rightbound=(menu_height+restarea)/2
if (curposy>rightbound){
scrollspeed=(curposy-rightbound)/((menu_height-restarea)/2) * maxspeed
if (window.downtime) clearTimeout(downtime)
if (movestate!="up") moveup()
}
else if (curposy<leftbound){
scrollspeed=(leftbound-curposy)/((menu_height-restarea)/2) * maxspeed
if (window.uptime) clearTimeout(uptime)
if (movestate!="down") movedown()
}
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.downtime) clearTimeout(downtime)
if (window.uptime) clearTimeout(uptime)
movestate=""
}
}

function fillup(){
if (iedom){
crossmain=document.getElementById? document.getElementById("motioncontainer") : document.all.motioncontainer
menu_height=parseInt(crossmain.style.height)
mainobjoffset=getposOffset(crossmain, "top")
cross_scroll=document.getElementById? document.getElementById("motiongallery") : document.all.motiongallery
actualheight=cross_scroll.offsetHeight

crossmain.onmousemove=function(e){
motionengine(e)
}

crossmain.onmouseout=function(e){
stopmotion(e)
showhidediv("hidden")
}
}
if (window.opera){
cross_scroll.style.top=menu_height-actualheight+'px'
setTimeout('cross_scroll.style.top=0', 10)
}
loadedyes=1
if (endofgallerymsg!=""){
creatediv()
positiondiv()
}
}
window.onload=fillup

function enlarge(img,src,mag){
clearTimeout(enlarge.to);
var obj=document.getElementById('largeimage');
var large=obj.getElementsByTagName('IMG')[0];
var div=obj.getElementsByTagName('DIV')[0];
if (!large){
large=document.createElement('IMG');
large.style.position='relative';
obj.appendChild(large);
div=document.createElement('DIV');
div.style.textAlign='center';
obj.appendChild(div);
}
enlarge.large=obj;
enlarge.mS=1000;
enlarge.srt=new Date().getTime();
animate();
large.width=img.width*(mag||1);
large.height=img.height*(mag||1);
large.src=src||img.src;

div.innerHTML=img.title||'';
}

function animate(){
var obj=enlarge.large,ms=new Date().getTime()-enlarge.srt,opc=100/enlarge.mS*ms;
obj.style.filter='alpha(opacity='+opc+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
if (ms<enlarge.mS){
enlarge.to=setTimeout(function(){animate(); },10);
}
}

/*]]>*/
</script></head>

<body>
<div style="overflow:hidden;">
<div id="motioncontainer" style="width:150px; height:300px; overflow:hidden; position: relative;">
<div id="motiongallery" style="position:absolute; left:0; top:0;">

<!--Gallery Contents below-->

<img title="image 1" src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook1.gif" onmouseup="enlarge(this,null,2);" border=1><br />
<img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook1.gif" onmouseup="enlarge(this,'http://www.vicsjavascripts.org.uk/StdImages/One.gif',2);" border=1><br />
<img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook1.gif" onmouseup="enlarge(this);"border=1><br />
<img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook1.gif" border=1><br />
<img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook1.gif" border=1><br />
<img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook1.gif" border=1><br />
<img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook1.gif" border=1><br />
<img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook1.gif" border=1><br />
<img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook1.gif" border=1>

<!--End Gallery Contents-->

</div>
</div>
</div>

<div id="largeimage" style="position:absolute;left:300px;top:50px;width:200px;text-Align:center;" >



</div>

</body>

</html>