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

Printable View

10-14-2013, 09:50 PM
BrettRobyCreativeDesign

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!
10-16-2013, 12:33 AM
vwphillips

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>
10-17-2013, 05:22 PM
BrettRobyCreativeDesign

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.
10-18-2013, 09:56 AM
vwphillips

please posr alink to your page

see

http://www.vicsjavascripts.org.uk/Im...ageGallery.htm
10-18-2013, 04:41 PM
BrettRobyCreativeDesign

Quote:

Originally Posted by vwphillips

please posr alink to your page

see

http://www.vicsjavascripts.org.uk/Im...ageGallery.htm

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.
10-19-2013, 11:58 AM
vwphillips

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