Advanced Search

Results 1 to 3 of 3

Thread: CMotion Image Gallery - Set Width to 100%

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

    Question CMotion Image Gallery - Set Width to 100%

    1) CMotion Image Gallery

    2) http://www.dynamicdrive.com/dynamici...iongallery.htm

    3) I have the CMotion Image Gallery setup and working just as I won't except for one complication. My site grows with the screen size of a viewer's monitor. Therefore, setting the CMotion Image Gallery to a set width, does not look too great. If the CMotion Image Gallery is set to 100%, however, it causes the scrolling feature to speed up to a point where it is not even usable.

    The width of gallery is to be set in the "motioncontainer" div. If anyone can provide guidance on how I can get the gallery to work when setting its width to 100%, I would be forever grateful.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,688
    Thanks
    43
    Thanked 3,129 Times in 3,095 Posts
    Blog Entries
    12

    Default

    In this type of situation the idea is to put the gallery in a single location on the page, just like you might put an image in a single location on the page. An image will not change size as a browser window's size is changed but, it might shift its position relative to text or other elements on the page. This is how the gallery should be treated in your layout.
    - John
    ________________________

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

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,688
    Thanks
    43
    Thanked 3,129 Times in 3,095 Posts
    Blog Entries
    12

    Default

    In my previous post in this thread I explained the way to deal with this sort of situation. It is still probably the best way but, from what you say, would probably require you to redesign your page. After I posted, I remembered that I had tried my hand at writing a version of cmotion that would expand to a percentage width of its container (the page itself or another element). I wasn't all that satisfied with the result but, have looked it over and made several changes and I now like it. It has been tested in IE 6, FF 1.5.0.6, and Opera 9.01. I put it through some paces and have documented it well in the source code but, there is no way I could anticipate all contingencies:

    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></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    /* Gallery Styles */
    
    #motioncontainer {
    margin:0 auto; /* Remove if centering gallery on page is not desired */
    width:50%; /* Set to gallery width */
    height:227px; /* Set to gallery height */
    }
    
    #motioncontainer a img {
    border: 1px solid #cccccc; /* Set image border color */
    }
    
    #motioncontainer a:hover img {
    border: 1px solid navy; /* Set image border hover color */
    }
    
    #statusdiv {
    background-color: lightyellow;
    border: 1px solid gray;
    padding: 2px;
    position: absolute; /* Stop Editing Gallery Styles */
    left: -300px;
    visibility: hidden;
    }
    
    #motioncontainer a:hover {
    color: red; /* Dummy definition to overcome IE bug */
    }
    /* End Gallery Styles */
    </style>
    
    <!-- Do not edit IE conditional style below -->
    <!--[if gte IE 5.5]>
    <style type="text/css">
    #motioncontainer {
    width:expression(Math.min(this.offsetWidth, maxwidth)+'px');
    }
    </style>
    <![endif]-->
    <!-- End Conditional 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 for autowidth and optional starting positions in
    * http://www.dynamicDrive.com/forums by jschuer1 8/5/06
    ***********************************************/
    
     //1) Set width of the "neutral" area in the center of the gallery.
    var restarea=6;
     //2) Set top scroll speed in pixels. Script auto creates a range from 0 to top speed.
    var maxspeed=7;
     //3) Set to maximum width for gallery - must be less than the actual length of the image train.
    var maxwidth=1000;
     //4) Set to 1 for left start, 0 for right, 2 for center.
    var startpos=2;
     //5) Set message to show at end of gallery. Enter "" to disable message.
    var endofgallerymsg='<span style="font-size: 11px;">End of Gallery</span>';
    
    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, scrollspeed=0, movestate='', actualwidth='', cross_scroll, ns_scroll, statusdiv, loadedyes=0, lefttime, righttime;
    
    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(){
    var mainobjoffset=getposOffset(crossmain, "left"),
    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!="") {
    positiondiv();
    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 mainobjoffset=getposOffset(crossmain, "left"),
    dsocx=(window.pageXOffset)? pageXOffset: ietruebody().scrollLeft,
    dsocy=(window.pageYOffset)? pageYOffset : ietruebody().scrollTop,
    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;
    clearTimeout(righttime);
    if (movestate!="left") moveleft();
    }
    else if (curposy<leftbound){
    scrollspeed=(leftbound-curposy)/((menuwidth-restarea)/2) * maxspeed;
    clearTimeout(lefttime);
    if (movestate!="right") moveright();
    }
    else
    scrollspeed=0;
    }
    
    function contains_ns6(a, b) {
    if (b!==null)
    while (b.parentNode)
    if ((b = b.parentNode) == a)
    return true;
    return false;
    }
    
    function stopmotion(e){
    if (!window.opera||(window.opera&&e.relatedTarget!==null))
    if ((window.event&&!crossmain.contains(event.toElement)) || (e && e.currentTarget && e.currentTarget!= e.relatedTarget && !contains_ns6(e.currentTarget, e.relatedTarget))){
    clearTimeout(lefttime);
    clearTimeout(righttime);
    movestate="";
    }
    }
    
    function fillup(){
    if (iedom){
    crossmain=document.getElementById? document.getElementById("motioncontainer") : document.all.motioncontainer;
    if(typeof crossmain.style.maxWidth!=='undefined')
    crossmain.style.maxWidth=maxwidth+'px';
    menuwidth=crossmain.offsetWidth;
    cross_scroll=document.getElementById? document.getElementById("motiongallery") : document.all.motiongallery;
    actualwidth=document.getElementById? document.getElementById("trueContainer").offsetWidth : document.all['trueContainer'].offsetWidth;
    if (startpos)
    cross_scroll.style.left=(menuwidth-actualwidth)/startpos+'px';
    crossmain.onmousemove=function(e){
    motionengine(e);
    }
    
    crossmain.onmouseout=function(e){
    stopmotion(e);
    showhidediv("hidden");
    }
    }
    loadedyes=1
    if (endofgallerymsg!=""){
    creatediv();
    positiondiv();
    }
    }
    window.onload=fillup;
    
    onresize=function(){
    if (typeof motioncontainer!=='undefined'&&motioncontainer.filters){
    motioncontainer.style.width="0";
    motioncontainer.style.width="";
    motioncontainer.style.width=Math.min(motioncontainer.offsetWidth, maxwidth)+'px';
    }
    menuwidth=crossmain.offsetWidth;
    cross_scroll.style.left=(menuwidth-actualwidth)/startpos+'px';
    }
    </script>
    </head>
    <body>
    <div id="motioncontainer" style="position:relative;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="photo1.jpg" border="1"></a> <a href="javascript:enlargeimage('dynamicbook1.gif', 300, 300)"><img src="photo2.jpg" border="1"></a> <a href="http://www.dynamicdrive.com"><img src="photo3.jpg" border="1"></a> <a href="#"><img src="photo4.jpg" border="1"></a> <a href="#"><img src="photo5.jpg" border="1"></a> <a href="#"><img src="photo6.jpg" border="1"></a> <a href="#"><img src="photo7.jpg" border="1"></a> <a href="#"><img src="photo8.jpg" border="1"></a> <a href="#"><img src="photo9.jpg" border="1"></a></nobr>
    
    </div>
    </div>
    </body>
    </html>
    Last edited by jscheuer1; 08-06-2006 at 03:41 AM. Reason: Resolve some minor problems
    - 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
  •