Advanced Search

Results 1 to 7 of 7

Thread: can somebody troubleshoot my new gallery?

  1. #1
    Join Date
    Dec 2012
    Location
    Cape Cod
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default can somebody troubleshoot my new gallery?

    I made a photo gallery a while ago with Vic Phillip's help, and it came out very well.
    I want to make a new one and I just cant get it to work.
    I do not want to use jQuery or any of the new code that is so long and involved that I cannot understand it.
    Just want to have a simple and nice gallery similar to what Vic helped me with.
    Its here,
    http://www.jcdouglass.net/gallery/gallery3.html

    Hopefully Vic will be here, but his site comes up a 404 for me now.
    But maybe somebody can help and troubleshoot my gallery, I will post it soon, if there is anybody who can.
    Thank you,
    Jane


    By the way, I had extreme trouble reseting my password which I had forgotten.

  2. #2
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    586
    Thanks
    41
    Thanked 27 Times in 27 Posts

    Default

    Well,using firefox 26.0, it works.

    I mouse over an image along the top and the image changes below to that image.there is also a caption when first mousing over an image along the top row.
    Thanks,

    Bud

  3. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,707
    Thanks
    2
    Thanked 388 Times in 383 Posts

    Default

    you have the line I have corrected and marked in red in the wrong position

    Code:
    <!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>Mouseover album, thanks to Vic</title>
    <meta name="robots" content="noindex,nofollow,noarchive">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
    
    
    <style type="text/css">
    /*<![CDATA[*/
    
    .gallery {
      width:300px;border:solid red 1px;
    }
    
    .gallery IMG{
      width:150px;float:left;
    }
    
    
    #mseDIV{
     position:absolute;overflow:hidden;left:400px;top:300px;width:431px;height:570px;border:groove green 8px;
    }
    
    body {
    background-color: #b5d0ec; /*vry lgt blue*/
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #115147; /*dark greenish-blue*/
    font-size: 100%;
    background-image: url(pattern51.jpg);
    }
    
    h1  {
    font-family: 'Comic Sans MS', 'Arial Narrow', sans-serif;
    color: #0d937b; /*greenish*/
    font-size: 200%;
    text-align: center;
    /*background-color: transparent;*/
    }
    
    /* Here are my favourite link styles and colors, will keep them this way for lesson 5 */
    
    
    a:link {
    	color: #0033ff;
    	text-decoration: none;
    }
    a:visited {
    	text-decoration: none;
    	color: #5f08b6;
    }
    a:hover {
    	text-decoration: underline;
    	color: #00cc00;
    }
    a:active {
    	text-decoration: none;
    	color: #cc3399;
     background-color: #ed962e;
    }
    
    /*]]>*/
    </style>
    
    </head>
    
    <body>
    <h1>Another Gallery.</h1>
    
    
     <div id="mseDIV" style="" >
     </div>
     <div id="gal1" class="gallery" >
    <img src="http://www.jcdouglass.net/gallery/IMG_6464.jpg" alt="img" title="Galley and Lilly"/>
    <img src="http://www.jcdouglass.net/gallery/IMG_6467.jpg" alt="img" title="Lilly" />
    <img src="http://www.jcdouglass.net/gallery/IMG_6469.jpg" alt="img" title="Black Beach" />
    <img src="http://www.jcdouglass.net/gallery/IMG_6473.jpg" alt="img" title="Low Tide" />
    <img src="http://www.jcdouglass.net/gallery/IMG_6476.jpg" alt="img" title="Susie giving treats"/>
    <img src="http://www.jcdouglass.net/gallery/IMG_6478.jpg" alt="img" title="Cousins" />
    <img src="http://www.jcdouglass.net/gallery/IMG_6485.jpg" alt="img" title="Let go o my tail" />
    <img src="http://www.jcdouglass.net/gallery/IMG_6487.jpg" alt="img" title="Sippewisset Marsh" />
    <img src="http://www.jcdouglass.net/gallery/IMG_6490.jpg" alt="img" title="Chilly day"/>
    <img src="http://www.jcdouglass.net/gallery/IMG_6493.jpg" alt="img" title="Wet Dogs" />
    
     </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var zxcMouseFade={
    
     init:function(o){
      var id=o.MouseOverID,ms=o.AnimateDuration,g=document.getElementById(o.GalleryID),d=document.getElementById(id),imgs=g.getElementsByTagName('IMG'),img=document.createElement('IMG'),ary=[],o,z0=0;
      img.style.position='absolute';
      img.style.visibility='hidden';
      img.style.width=d.offsetWidth+'px';
      img.style.height=d.offsetHeight+'px';
      for (;z0<imgs.length;z0++){
       img=img.cloneNode(false);
       img.src=imgs[z0].src;
       d.appendChild(img);
       ary[z0]=[img,0];
       this.addevt(imgs[z0],'mouseover','mse',id,z0,true);
       this.addevt(imgs[z0],'mouseout','mse',id,z0,false);
      }
      img=img.cloneNode(false);
      img.style.position='absolute';
      img.style.visibility='hidden';
      img.style.width=d.offsetWidth+'px';
      img.style.height=d.offsetHeight+'px';
      img.style.zIndex='101';
      d.appendChild(img);
      o=zxcMouseFade['zxc'+id]={
       ary:ary,
       ms:typeof(ms)=='number'?ms:1000,
       lst:ary[0]
      }
     },
    
     mse:function(id,nu,ud){
      var o=zxcMouseFade['zxc'+id],t;
      if (o&&o.ary[nu]){
       o.lst[0].style.zIndex='0';
       clearTimeout(o.lst[2]);
       this.animate(o,o.lst,o.lst[1],0,new Date(),o.ms*Math.abs((0-o.ary[nu][1])/100)+10);
       o.ary[nu][0].style.visibility='visible';
       clearTimeout(o.ary[nu][2]);
       t=ud?100:0;
       o.ary[nu][0].style.zIndex='2';
       this.animate(o,o.ary[nu],o.ary[nu][1],t,new Date(),o.ms*Math.abs((t-o.ary[nu][1])/100)+10);
       o.lst=o.ary[nu];
      }
     },
    
     animate:function(o,ary,f,t,srt,mS){
      var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
      if (isFinite(now)){
       ary[1]=now;
       oop.opc(ary[0],now);
      }
      if (ms<mS){
       ary[2]=setTimeout(function(){ oop.animate(o,ary,f,t,srt,mS); },10);
      }
      else {
       ary[1]=t;
       oop.opc(ary[0],t);
       if (t==0){
        ary[0].style.visibility='hidden';
       }
      }
     },
    
     opc:function(o,n){
      o.style.filter='alpha(opacity='+n+')';
      o.style.opacity=o.style.MozOpacity=o.style.WebkitOpacity=o.style.KhtmlOpacity=n/100-.001;
     },
    
     addevt:function(o,t,f,p,p1,p2){
      var oop=this;
      if (o.addEventListener){
       o.addEventListener(t,function(e){ return oop[f](p,p1,p2);}, false);
      }
      else if (o.attachEvent){
       o.attachEvent('on'+t,function(e){ return oop[f](p,p1,p2); });
      }
     }
    
    
    }
    
    zxcMouseFade.init({
     MouseOverID:'mseDIV',
     GalleryID:'gal1',
     AnimateDuration:1000  //(optional) the animation speed in milli seconds.                        (number, default = no  animation)
    });
    
    zxcMouseFade.mse('mseDIV',0,true)
    
    /*]]>*/
    </script>
    
    </body>
    
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  4. #4
    Join Date
    Nov 2013
    Location
    capecod
    Posts
    6
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    Thank you!
    I think I fixed it.

    Here is the next one that I am having trouble with, my classmates got theirs to work with this tiny js file, but mine just wont go to the next photo like theirs do.
    Im pretty new at coding, so I am hoping that you can troubleshoot it, here is the URL,
    http://www.jcdouglass.net/gallery2013/puppy.html
    see how I have to back the browser up to get to the next picture. I want it to work like the previous one using Vic's code.
    (And picture five shows picture four, when it should show 5.)

    function swapPhoto(photoSRC) {
    document.images.imgPhoto.src=photoSRC;
    }
    is the js I am using, my classmates got it to work, but they had this, but I dont use extra assets/images folders, I just put everything in one folder, its easier for a beginner like me. I wonder if that is my problem.
    This below is what my classmates used and it worked OK.

    function swapPhoto(photoSRC) {
    document.images.imgPhoto.src="assets/images/"+photoSRC;
    }

    Thank you!

  5. #5
    Join Date
    Nov 2013
    Location
    capecod
    Posts
    6
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    function swapPhoto(photoSRC) {
    document.images.imgPhoto.src=" maybe something should be put in here to fix it? "photoSRC;
    }

    another thought? Obviously I dont know what Im doing with javascript, but sooner or later, we will get this working with your help. Happy Thanksgiving anyway.

  6. #6
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,707
    Thanks
    2
    Thanked 388 Times in 383 Posts

    Default

    you have

    Code:
        <a href="one.jpg" title="puppy" onClick="swapPhoto(one.jpg');return false;">
         <img src="one-tn.jpg" alt="puppy" width="120" height="90" /></a>
    the charactor in red is wrong


    you should have

    Code:
        <a href="one.jpg" title="puppy" onClick="swapPhoto('one.jpg');return false;">
         <img src="one-tn.jpg" alt="puppy" width="120" height="90" /></a>
    on on all your links
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  7. #7
    Join Date
    Nov 2013
    Location
    capecod
    Posts
    6
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    Thank you!!!

    I dont know where they come from, as they are not on my keyboard(Mac). But you sure spotted those offending little wrong marks and I put the new ones in from my keyboard.
    And it works nicely now!

    http://www.jcdouglass.net/gallery2013/puppy.html


    Its interesting that this tiny little couple lines of code will do what other galleries do with pages and pages of code!
    I love learning this!

Similar Threads

  1. Replies: 3
    Last Post: 03-25-2010, 02:00 PM
  2. troubleshoot this code?
    By evan in forum JavaScript
    Replies: 1
    Last Post: 05-05-2009, 11:08 PM
  3. unable to troubleshoot cause of white band on page
    By janicefernandes in forum HTML
    Replies: 3
    Last Post: 09-12-2007, 12:42 PM
  4. CMotion Image Gallery script: question on end of gallery message
    By monique in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 01-02-2007, 02:27 PM
  5. Drop In Content Box Troubleshoot
    By bishop101 in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 04-07-2006, 10:40 PM

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
  •