Page 2 of 4 FirstFirst 1234 LastLast
Results 11 to 20 of 32

Thread: Newbie, want to learn how to make a photo gallery

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

    Default

    This is the closest one to what I would like to try, though it doesnt have the ability to go to 'next' or 'previous'.
    http://www.dynamicdrive.com/dynamici...thumbnail2.htm
    Thank you for the help and instructions, I will try this after Christmas and come back to the forum with a page.

  2. #12
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,821
    Thanks
    2
    Thanked 425 Times in 419 Posts

    Default

    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></title>
    <style type="text/css">
    /*<![CDATA[*/
    
    .gallery {
      width:300px;border:solid red 1px;
    }
    
    .gallery IMG{
      width:150px;float:left;
    }
    
    .popup {
      position: absolute;visibility:hidden;padding:10px;background-color:#d0e47e;border:1px solid black;
      width: 670px; /*Width of popup*/
    }
    
    .controls { /*CSS for control bar of popup*/
      position:relative;height:30px;background-Color:gray;padding:5px;text-align:center;font-size:16px;
    }
    
    .controls IMG {
      float:right;margin:3px;margin-Top:-10px;
    }
    
    
    .content { /*CSS for div that holds the image slide show*/
      border:1px solid gray;background-color:white;
    }
    
    .content IMG {
      width:400px;height:300px;
    }
    
    .mask{ /*CSS for background mask*/
     position:fixed;z-Index:101;background-Color:black;width:100%;height:100%;left:0px;top:0px;z-index: 5;filter:progid:DXImageTransform.Microsoft.alpha(opacity=80);opacity: 0.8;
    }
    
    /*]]>*/
    </style>
    
    </head>
    
    <body>
    
     <div id="gal1" class="gallery" >
      <img src="http://images.mlsplug-in.com/processphoto.php?id=21206876&num=0&boardid=2" alt="img" title="Image 1"/>
      <img src="http://images.mlsplug-in.com/processphoto.php?id=21206876&num=1&boardid=2" alt="img" title="Image 2" />
      <img src="http://images.mlsplug-in.com/processphoto.php?id=21206876&num=2&boardid=2" alt="img" title="Image 3" />
      <img src="http://images.mlsplug-in.com/processphoto.php?id=21206876&num=3&boardid=2" alt="img" title="Image 4" />
     </div>
    
     <div id="pop1" class="popup" style="background-Color:#FFFFCC;" >
      <div class="content" >
      </div>
      <div class="controls" >
       <a>Image 1</a>
       <img src="http://www.vicsjavascripts.org.uk/StdImages/X[1].gif" alt="img" title="exit" />
       <img src="http://www.vicsjavascripts.org.uk/StdImages/right.gif" alt="img" title="forward" />
       <img src="http://www.vicsjavascripts.org.uk/StdImages/left.gif" alt="img" title="back" />
      </div>
     </div>
    
    
    <script  type="text/javascript">
    /*<![CDATA[*/
    // PopUp Gallery. (23-December-2012)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    var zxcPopUpGallery={
    
     init:function(o){
      var id=o.GalleryID,ccls=o.ContentClass,mcls=o.MaskClass,ms=o.AnimateDuration,gal=document.getElementById(id),pop=document.getElementById(o.PopUpID),imgs=gal.getElementsByTagName('IMG'),div=document.createElement('DIV'),msk=div.cloneNode(false),ary=[],m,z0=0;
      pop.style.display='block';
      pop.style.overflow='hidden';
      pop.style.visibility='hidden';
      this.opc(pop,100);
      msk.style.position='absolute';
      msk.style.left='0px';
      msk.style.top='0px';
      msk.style.width='100%';
      msk.style.height='100%';
      m=msk.cloneNode(false)
      m.className=mcls;
      m.style.zIndex='0';
      msk.appendChild(m);
      pop.style.zIndex='200';
      msk.appendChild(pop);
      document.body.appendChild(msk);
      msk.style.position='fixed';
      msk.style.visibility='hidden';
      o={
       id:id,
       msk:msk,
       pop:pop,
       ms:typeof(ms)=='number'&&ms>0?ms:false,
       to1:null,
       to2:null
      }
      for (;z0<imgs.length;z0++){
       ary[z0]=[imgs[z0],new Image()];
       ary[z0][1].src=imgs[z0].src;
      }
      this.load(o,ary);
     },
    
     load:function(o,ary){
      for (var oop=this,z0=0;z0<ary.length;z0++){
       if (ary[z0][1].width<40){
        o.dly=setTimeout(function(){ oop.load(o,ary);  },200);
        return;
       }
      }
      var img=document.createElement('IMG'),ss=document.createElement('DIV'),c=ss.cloneNode(false),divs=o.pop.getElementsByTagName('DIV'),c=divs[1];
      img.src=ary[0][1].src;
      divs[0].style.position='relative';
      divs[0].appendChild(img);
      ss.style.position='relative';
      ss.style.width=img.width+'px';
      ss.style.height=img.height+'px';
      divs[0].removeChild(img);
      img.style.position='absolute';
      img.style.left='0px';
      img.style.top='0px';
      img.style.width='100%';
      img.style.height='100%';
      for (z0=0;z0<ary.length;z0++){
       img=img.cloneNode(false);
       img.src=ary[z0][1].src;
       img.style.zIndex=z0>0?'0':'1';
       ss.appendChild(img);
       ary[z0]=[ary[z0][0],img,ary[z0][0].title||''];
       this.addevt(ary[z0][0],'mouseup','ready',o,z0);
      }
      if (c){
       imgs=c.getElementsByTagName('IMG');
       for (z0=0;z0<imgs.length;z0++){
        if (imgs[z0].title=='forward'){
         this.addevt(imgs[z0],'mouseup','Next',o.id,1);
        }
        if (imgs[z0].title=='back'){
         this.addevt(imgs[z0],'mouseup','Next',o.id,-1);
        }
        if (imgs[z0].title=='exit'){
         this.addevt(imgs[z0],'mouseup','Hide',o.id,'hide');
        }
       }
      }
      divs[0].appendChild(ss);
      ss.style.left=(divs[0].offsetWidth-ss.offsetWidth)/2+'px';
      ss.style.top='10px';
      divs[0].style.height=ss.offsetHeight+20+'px';
      o.ph=ss.offsetHeight+(c?c.offsetHeight:0)+20;
      c=c?c.getElementsByTagName('A')[0]:false;
      o.caption=c?c:ss.cloneNode(false);
      o.ary=ary;
      o.cnt=0;
      o.lgth=ary.length-1;
      zxcPopUpGallery['zxc'+o.id]=o;
      this.pop=o;
      this.addevt(o.msk,'mousedown','Hide',o.id);
      this.addevt(window,'resize','Hide',o.id,true);
     },
    
     Hide:function(id,ud,e){
      var o=zxcPopUpGallery['zxc'+id],obj;
      if (o){
       if (e&&!ud){
        obj=e.target?e.target:e.srcElement;
        if (obj){
         while (obj.parentNode){
          if (obj==o.pop){
           return;
          }
          obj=obj.parentNode;
         }
        }
       }
       if (!o.ms||ud===true){
        this.hide(o);
       }
       else {
        clearTimeout(o.to1);
        clearTimeout(o.to2);
        this.animate(o,o.pop,'top',o.pop.offsetTop,o.msk.offsetHeight/2,new Date(),o.ms,'to1');
        this.animate(o,o.pop,'height',o.pop.offsetHeight,0,new Date(),o.ms,'to2');
       }
      }
     },
    
    
     Display:function(id){
      var o=zxcPopUpGallery['zxc'+id];
      if (o){
       this.ready(o);
      }
     },
    
     Next:function(id,ud){
      var o=zxcPopUpGallery['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
      if (o){
       nu=o.cnt+ud;
       nu=nu<0?o.lgth:nu>o.lgth?0:nu;
       o.caption.innerHTML=o.ary[nu][2];
       o.ary[o.cnt][1].style.zIndex='0';
       o.ary[nu][1].style.zIndex='1';
       this.animate(o,o.ary[nu][1],'',0,100,new Date(),o.ms,'op'+nu);
       o.cnt=nu;
      }
     },
    
     ready:function(o,nu){
      if (o!=this.pop){
       this.hide(this.pop);
      }
      o.ary[o.cnt][1].style.zIndex='0';
      o.ary[nu][1].style.zIndex='1';
      o.cnt=nu;
      o.caption.innerHTML=o.ary[nu][2];
      var mh=o.msk.offsetHeight;
      o.pop.style.left=(o.msk.offsetWidth-o.pop.offsetWidth)/2+'px';
      this.pop=o;
      if (o.ms){
       clearTimeout(o.to1);
       clearTimeout(o.to2);
       this.animate(o,o.pop,'top',mh/2,(mh-o.ph)/2,new Date(),o.ms,'to1');
       this.animate(o,o.pop,'height',0,o.ph,new Date(),o.ms,'to2');
      }
      else {
       o.pop.style.top=(mh-o.ph)/2+'px';
      }
      o.pop.style.visibility=o.msk.style.visibility='visible';
     },
    
     animate:function(o,obj,mde,f,t,srt,mS,to){
      var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
      if (isFinite(now)){
       if (mde){
        obj.style[mde]=Math.max(now,0)+'px';
       }
       else {
        oop.opc(obj,now);
       }
      }
      if (ms<mS){
       o[to]=setTimeout(function(){ oop.animate(o,obj,mde,f,t,srt,mS,to); },10);
      }
      else {
       if (mde){
        obj.style[mde]=t+'px';
       }
       if (t==0&&mde=='height'){
        this.hide(o);
       }
      }
     },
    
     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;
     },
    
     hide:function(o){
      clearTimeout(o.to1);
      clearTimeout(o.to2);
      o.msk.style.visibility=o.pop.style.visibility='hidden';
      o.pop.style.height='auto';
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      if (o.addEventListener){
       o.addEventListener(t,function(e){ return oop[f](p,p1,e); }, false);
      }
      else if (o.attachEvent){
       o.attachEvent('on'+t,function(e){ return oop[f](p,p1,e); });
      }
     }
    
    
    }
    
    
    zxcPopUpGallery.init({
     GalleryID:'gal1',     //  the unique ID name of the Gallery DIV.                                (string)
     PopUpID:'pop1',       // the unique ID name of the Pop Up DIV.                                  (string)
     MaskClass:'mask',     //(optional) the class name of the Pop Up mask DIV.                       (string, default = no mask)
     AnimateDuration:1000  //(optional) the animation speed in milli seconds.                        (number, default = no  animation)
    });
    
    /*]]>*/
    </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/

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

    Default

    Hi Vic,
    Thank you!
    I am going to work hard and get my album/gallery working with your help.
    At the moment Grandma is pretty involved in getting Christmas ready for the family, but while I have free moments, I sure will be having a great time learning this.

    Merry Christmas!

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

    Default

    Got a quick moment to work on this,,,,,,tried your code above, but it didn't work, just got the 4 photos and no js 'action'. I must have forgotten something or left it out.

    Of course Im a real beginner at this, but I got further with this one, from DD, their example.
    http://www.jcarter.net/scripts/gallery.html

    I want to have a small picture instead of a link like Saturn and the Moon.

    So next, I tried stripping out all the stuff on the realestate page and came up with this so far,
    http://www.jcarter.net/scripts/start.html

    But it doesnt have the mouse over effect, just the click to the big picture, then back up one page to get back, but its a start anyway.
    If I could just get that lovely mouseover effect from the original RE page, then I could put in my own pictures and it would work!

    Thank you again, I realize its Christmas and everybody is very busy, but Im getting closer thanks to you people here. Im sure Im leaving something out.

  5. #15
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,821
    Thanks
    2
    Thanked 425 Times in 419 Posts

    Default

    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/

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

    Default

    Oh, wow, that one works!
    Thank you! Now I have to figure out how to add my own photos.
    I might have some time today, I should say, I will make time, as this sure is fun to learn how to do this.


    Actually our children always donate to operationsmile here in USA, they send checks to the local chapter in our state.

  7. #17
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,821
    Thanks
    2
    Thanked 425 Times in 419 Posts

    Default

    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/

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

    Default

    I forgot to say I use Macs, This latest issue doesn't work well with Safari, Chrome, or Opera, the pictures cover up the controls, though its OK with Firefox. The picture is centered with FF.
    But the original one you sent me, works perfectly on all 4 of my browsers. Thats the one which I will work on adding my own pictures. If I can do that, that will be my Christmas present!

    Thank you again!

  9. #19
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    597
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default

    Hi capecodelily-I got a working version of Vic's first script if you want it.All you will need to do is use your images and add it to your page.

    http://www.web-user.info/vic/1/victest1.html

    Merry Christmas
    Thanks,

    Bud

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

    Default

    Thats wonderful! It works with Safari too, Firefox shows the pictures much smaller, but most of my classmates use Safari, so Im even happier with this.
    Thank you! Entire family here for Christmas, but will get working on it early tomorrow after I walk the dogs.

    Its just exactly what Im looking for. Its far less complex, and thats what I need, as Im pretty much a beginner at this.
    You people here are amazing! I really really appreciate the wonderful help.

Similar Threads

  1. Newbie trying to make my layout work!!
    By valeria in forum CSS
    Replies: 1
    Last Post: 12-03-2010, 03:46 AM
  2. How to learn to make Java Applets
    By Rockonmetal in forum Java
    Replies: 3
    Last Post: 08-24-2007, 09:55 PM
  3. A Place For Newbie To Learn
    By ArahMan7 in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 06-13-2007, 04:56 AM
  4. Replies: 2
    Last Post: 05-04-2007, 04:30 AM
  5. Replies: 20
    Last Post: 09-18-2006, 12:30 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
  •