Results 1 to 6 of 6

Thread: Photo Album script v2.0 - Looking for a Slight Tweak/Enhancement

  1. #1
    Join Date
    Oct 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Photo Album script v2.0 - Looking for a Slight Tweak/Enhancement

    1) Script Title: Photo Album script v2.0

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...photoalbum.htm

    3) Describe problem:

    Hi all. Long-time DDer, first-time poster!

    I don't really have a "problem" per se with the way Photo Album script v2.0 is working, but I would like to see if someone had some ideas on how to add an option to this script. Basically all I would like it to do is to "slide" from one gallery to the next. That would be a nice touch, and it would suit my application well, because I have a lot of other similar scripts working on the site.

    Any help is appreciated!

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,775
    Thanks
    2
    Thanked 411 Times in 406 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 {
      position:relative;width:700px;height:204px;border:solid red 1px;background-Color:#FFFFCC;
    }
    
    #gallery IMG {
      width:200px;height:150px;margin-Left:0px;margin-Top:15px;border-Width:0px;
    }
    
    #gallery .caption {
      width:200px;background-Color:#FFFFCC;border:solid red 1px;margin-Top:5px;
    }
    
    #paginate {
      position:relative;width:700px;height:40px;border:solid red 1px;margin-Top:5px;background-Color:#FFFFCC;
    }
    
    #paginate .page{
      position:relative;width:20px;height:20px;background-Color:#FFFFCC;border:solid red 1px;margin-Left:20px;margin-Top:10px;float:left;text-Align:center;cursor:pointer;
    }
    
    #paginate .current{
      background-Color:#FFCC66;
    }
    
    /*]]>*/
    </style>
    <script type="text/javascript">
    // Gallery (16-October-2013) DRAFT
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    var zxcGallery={
    
     GoTo:function(id,n){
      var o=this['zxc'+id];
      if (o&&o.ary[n]&&n!=o.n){
       o.ary[o.n][2].className='page';
       this.animate(o,o.ary[o.n],0,o.w*(n>o.n?-1:1),new Date(),o.ms);
       this.animate(o,o.ary[n],o.w*(n>o.n?1:-1),0,new Date(),o.ms);
       o.ary[n][2].className='page current';
       o.n=n;
      }
     },
    
     init:function(o){
      var id=o.GalleryID,iary=o.ImageArray,c=o.Colums,r=o.Rows,ms=o.Animate,p=document.getElementById(id),pag=document.getElementById(o.PaginateID);
      if (p&&iary instanceof Array){
       var w=p.offsetWidth,h=p.offsetHeight,r=typeof(r)=='number'&&r>0?r:1,c=typeof(c)=='number'&&c>0?c:3,d=document.createElement('DIV'),i=document.createElement('IMG'),dd=d.cloneNode(false),pge,set,di,dt,a,z0=0;
       p.style.overflow='hidden';
       dd.style.position='absolute';
       dd.style.top='0px';
       dd.style.width=w+'px';
       dd.style.height=h+'px';
       o.ary=[];
       for (;z0<iary.length;z0++){
        if (z0%(r*c)==0){
         set=dd.cloneNode(false);
         p.appendChild(set);
         set.style.left=(o.ary.length>0?w:0)+'px';
         pge=document.createElement('DIV');
         if (pag){
          pge.className='page'+(o.ary.length>0?'':' current');
          pge.innerHTML=o.ary.length+1;
          pag.appendChild(pge);
          this.addevt(pge,'mouseup','GoTo',id,o.ary.length);
         }
         o.ary.push([set,'left',pge]);
        }
        if (z0%c==0){
         dr=d.cloneNode(false);
         dr.style.position='relative';
         dr.style.height=h/r+'px';
         set.appendChild(dr);
        }
        di=dd.cloneNode(false);
        di.style.width=w/c+'px';
        di.style.left=w/c*(z0%c)+'px';
        di.style.textAlign='center';
        dr.appendChild(di);
        a=document.createElement('A');
        iary[z0][2]?a.href=iary[z0][2]:null;
        di.appendChild(a);
        i=document.createElement('IMG');
        i.src=iary[z0][0];
        a.appendChild(i);
        dt=dd.cloneNode(false);
        dt.innerHTML=iary[z0][1]||'';
        dt.className='caption';
        iary[z0][1]?di.appendChild(dt):null;
        dt.style.width=i.width+'px';
        dt.style.height='20px';
        dt.style.left=i.offsetLeft+(i.width-dt.offsetWidth)/2+'px';
        dt.style.top=i.offsetTop+i.height+'px';
       }
       o.ms=typeof(ms)=='number'&&ms>20?ms:1000;
       o.w=w;
       o.n=0;
       this['zxc'+id]=o;
      }
     },
    
     animate:function(o,a,f,t,srt,mS){
      clearTimeout(a[4]);
      var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[0].style[a[1]]=n+'px';
      }
      if (ms<mS){
       a[4]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
      }
      else {
       a[0].style[a[1]]=t+'px';
      }
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null;
     }
    
    }
    
    
    </script>
    </head>
    
    <body>
    <div id="gallery" ></div>
    <div id="paginate" ></div>
    <script type="text/javascript">
    
    //Define your own array to hold the photo album images
    //Syntax: ["path_to_thumbnail", "opt_image_title", link url"]
    
    
    zxcGallery.init({
     GalleryID:'gallery',  // the unique ID name of the parent DIV.               (string)
     ImageArray:[          // the image definition array.                         (array)
      // field 0 = the image SRC.
      // field 1 = (optional) the image caption.
      // field 2 = (optional) the image link URL.
      ["http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg", "", "photo1-large.jpg"],
      ["http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg", "Our car", ""],
      ["http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg", "Our dog", "photo3-large.jpg"],
      ["http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg", "Our hotel", "http://www.gohawaii.com/"],
      ["http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg", "Our Computer", "http://www.google.com", "_new"],
      ["http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg", "Our house", "photo6-large.jpg"],
      ["http://www.vicsjavascripts.org.uk/StdImages/Egypt11.jpg", "Our Friends", "http://www.ask.com"]
     ],
     Colums:3,             //(optional) the number of colums.                     (number, default = 3)
     Rows:1,               //(optional) the number of rows.                       (number, default = 1)
     Animate:1000,         //(optional) the animation duration in millisec.       (number, default = 100)
     PaginateID:'paginate' //(optional) the unique ID name of the pagination DIV. (number, default = 100)
    });
    
    </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. #3
    Join Date
    Oct 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    That was fantastic! You got it perfectly correct. Thanks a million.

    I do have a couple small issues, and they have to do with styling. The image caption is displaying strangely in my browser(s). They all seem to come up shifted to the right of center, and the border doesn't quite look right. I'll be eliminating the border anyway, but if you could enlighten me as to what's going on for the image caption's text alignment that would be great. I've tried all the basics, like text-align and so forth. Nothing seems to quite work right. I'm sure there's just a margin or a padding that I am missing. When I click on a linked image and it takes me to another page, and then I hit the browser's "back" button, the page loads but this time the descriptions are centered. Once I refresh the page, the funky alignment reapplies. Very strange (to me).

    Also, with the paginate buttons, I would prefer that they are more like traditional "links" like they are in the original script, but I can work with them as they are. The one thing I would like to be able to modify, though, is the ability to edit the text that appears in the same way that it's done in the original script. In the original script, you modify the text that you want to appear by changing it in the .js file. I think I can work with it as it is after some style tweaking, but I do prefer it to be in the .js file in this particular case.

    Does this script still work properly with external link targets like the original?

    Anyway, all in all, it looks and works great! Thank you for your time. I do truly appreciate it greatly.
    Last edited by jscheuer1; 10-17-2013 at 04:54 PM. Reason: unnecessary quoting

  4. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,775
    Thanks
    2
    Thanked 411 Times in 406 Posts

    Default

    please posr alink to your page

    see

    http://www.vicsjavascripts.org.uk/Im...ageGallery.htm
    Last edited by vwphillips; 10-18-2013 at 01:00 PM.
    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/

  5. #5
    Join Date
    Oct 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by vwphillips View Post
    Thank you for your support!

    Here's a good example:

    http://nisene.com/compare-gallery-types

    If this works the way it does for me, you'll notice that when you first click on the link and enter the page for first time, the text for the image description is indeed centered. When you refresh the browser, you lose the alignment. That's just one issue I'm having.

  6. #6
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,775
    Thanks
    2
    Thanked 411 Times in 406 Posts

    Default

    first

    Code:
     ImageArray:[          // the image definition array.                         (array)
      // field 0 = the image SRC.
      // field 1 = (optional) the image caption.
      // field 2 = (optional) the image link URL.
      ["images/decap-image-jetetch-01-small.png", "SOT-14 with Rotated Die", ""],
      ["images/decap-image-jetetch-02-small.png", "Chip-scale BGA", ""],
      ["images/decap-image-jetetch-03-small.png", "DIP with Small Die", ""],
      ["images/decap-image-jetetch-04-small.png", "", ""],
      ["images/decap-image-jetetch-05-small.png", "", ""],
      ["images/decap-image-jetetch-06-small.png", "", ""],
      ["images/decap-image-jetetch-07-small.png", "", ""],
      ["images/decap-image-jetetch-08-small.png", "", ""],
      ["images/decap-image-jetetch-09-small.png", "", ""],
      ["images/decap-image-jetetch-10-small.png", "", ""],
      ["images/decap-image-jetetch-11-small.png", "", ""],
      ["images/decap-image-jetetch-12-small.png", "", ""] /* no commer here */
    second

    the class rule .caption controls the text-Align of the caption.

    lastly

    for more complex pagination you will need to use the latest version

    http://www.vicsjavascripts.org.uk/Im...ry/131019A.htm
    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/

Similar Threads

  1. Add Photo Title to PHP Photo Album Script
    By EdgeAgain in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 09-27-2009, 11:31 PM
  2. PHP Photo Album enhancement
    By aavaughan in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 10-17-2007, 05:18 AM
  3. DD PHP Photo Album script - photo descrip
    By aavaughan in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 09-13-2007, 12:44 AM
  4. PLS!!!!!! Photo Album Script v2.0 enhancement
    By eroychiu in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 06-21-2007, 05:12 AM
  5. PLS HeLp : Photo Album V2.0 enhancement
    By eroychiu in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 06-21-2007, 04:21 AM

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
  •