JS Photo Album Program

Mylib.albums = {


OImgs:document.getElementsByTagName ("img"),//All Picture objects on the page that need to be displayed (IMG tag)


Oalbumsimgs:new Array (),//all objects that need to display pictures in the album


Oalbumspath:new Array (),//all the paths that need to be displayed in the photo album


pathindex:0,





Oshardow:null,//Shadow Layer


Oimgcontainer:null,//album Container layer


Ocurrentimg:null,//currently displayed Picture Object (img tag)


Oinfobar:null,//photo album Top Information Bar


Onavbar:null,//photo Gallery bottom Navigation bar


Ologobar:null,//Album logo container


Otxtinfo:null,//Photo Introduction information container


Oclosebar:null,//Close button


Oprepage:null,//prev


Otxtindex:null,//Picture index information container


Onextpage:null,//Next page





Slogopath: "Img/logo.jpg",//Album logo address





Stxtprepage: "Prev",


Simgcount: "",//total number of pictures


Stxtnextpage: "Next Page",





scurrenttxtindex:0,//index information for the current picture in Oalbumsimgs


Scurrentimgpath: "",//the path to the currently displayed picture


Scurrentimgalt: "",///Current picture (ALT) profile information


sindex:0,//Current index


Stxtindexinfo: "",//Full index information





Stylepageenable: {


Color: "#000",


TextDecoration: "Underline",


Cursor: "Pointer"


},





Stylepagedisable: {


Color: "#CCC",


TextDecoration: "None",


Cursor: "Default"


},





Init:function () {


for (Var i=0;i<this.oimgs.length;i++) {


Get the (ClassName) style for all pictures (img tags)


var imgclass = This.oimgs[i].classname | | This.oimgs[i].getattribute ("class");





If the picture style is "albumsimg", add the modified picture to the OALBUMSIMGS array


if (imgclass== "Albumsimg") {


This.oalbumspath[this.pathindex] = THIS.OIMGS[I].SRC; Get all picture paths


This.oalbumsimgs[this.pathindex] = this.oimgs[i]; Get all Picture objects


This.oalbumsimgs[this.pathindex].setattribute ("rel", this.pathindex); Set the index for a picture (Rel property)


This.simgcount = This.oAlbumsImgs.length; Get the total number of pictures to be displayed in an album





This.oalbumsimgs[this.pathindex].onclick = function () {


var o = mylib.albums;


var dom = Mylib.dom;


var com = mylib.com;





var Curpath = O.scurrentimgpath = THIS.SRC; Get the path to the currently clicked picture


var curindex = O.scurrenttxtindex = parseint (This.getattribute ("rel")); Get the index value of the currently clicked picture


O.sindex = Curindex + 1; Index value


var Curalt = O.scurrentimgalt = This.getattribute ("alt"); Get the current picture introduction information


var txtindex = (curindex+1) + "/" + O.simgcount;





Execute Closure function to create album DOM container


(function () {


Create a shadow Layer


var Shardow = document.createelement ("div");


Shardow.setattribute ("id", "Shardow");


Apply a style to the shadow layer


Dom.className.add (Shardow, "Styleshardow");


Append the shadow layer to the document


Document.body.appendChild (Shardow);





Create (img tag) picture


var curimg = document.createelement ("img");


Curimg.setattribute ("id", "curimg");


Curimg.setattribute ("alt", Curalt);


Curimg.setattribute ("src", curpath);


CURIMG.SRC = Curpath;





Create album container layer


var container = document.createelement ("div");


Container.setattribute ("id", "Albumscontainer");


Apply a style to the album Container layer


Dom.className.add (Container, "Stylecontainer");


Add a picture to a photo album container


Container.appendchild (CURIMG);





Create Information Bar


var infobar = document.createelement ("div");


Infobar.setattribute ("id", "InfoBar");


Infobar.style.display = "block";


Apply a style to the InfoBar


Dom.className.add (InfoBar, "Styleinfobar");





Create Picture Info Bar


var imginfo = document.createelement ("P");


Imginfo.setattribute ("id", "imginfo");


Dom.className.add (Imginfo, "stylealtinfo");


Create a hint message text


var txtaltinfo = document.createTextNode (Curalt);


Add text information to an information bar


Imginfo.appendchild (Txtaltinfo);


To add an information bar to the InfoBar


Infobar.appendchild (Imginfo);





Create a Logo information layer


var Albumslogo = document.createelement ("img");


Albumslogo.setattribute ("id", "logo");


Albumslogo.setattribute ("Alt", "Order small secretary");


Albumslogo.setattribute ("src", o.slogopath);


ALBUMSLOGO.SRC = O.slogopath;


Apply a style to a logo


Dom.className.add (Albumslogo, "Stylelogo");


Add a logo to the InfoBar


Infobar.appendchild (Albumslogo);





Create a Close button


var Closebar = document.createelement ("img");


Closebar.setattribute ("id", "Closebar");


Closebar.setattribute ("src", "img/g_close.gif");


CLOSEBAR.SRC = "Img/g_close.gif";


Closebar.setattribute ("Alt", "close Window");


Dom.className.add (Closebar, "Styleclosebar");


To add a close button to the InfoBar


Infobar.appendchild (Closebar);





Add the InfoBar to the album container


Container.appendchild (InfoBar);





Create the bottom navigation Information Bar


var navbar = document.createelement ("div");


Navbar.setattribute ("id", "navbar");


Apply a navigation bar style to this layer


Dom.className.add (NavBar, "Stylenavbar");





Create a picture index information navigation bar


var txtindex = document.createelement ("P");


Txtindex.setattribute ("id", "Txtindex");


Apply a style to an information bar


Dom.className.add (Txtindex, "stylealtinfo");


Get Complete index information


O.stxtindexinfo = "Total" + O.simgcount + "Picture" + O.sindex + "/" + O.simgcount;


Create INDEX information text


var textindex = document.createTextNode (O.stxtindexinfo);


Append text to an Information bar


Txtindex.appendchild (Textindex);


To add an index bar to the navigation Information Bar


Navbar.appendchild (Txtindex);





Create a previous page navigation


var prepage = document.createelement ("P");


Prepage.setattribute ("id", "prepage");


Apply a style to the previous page navigation


Dom.className.add (Prepage, "styleprepage");


Create a previous page navigation text


var txtprepage = document.createTextNode (o.stxtprepage);


Prepage.appendchild (Txtprepage);


Append text to Navigation


Navbar.appendchild (Prepage);











Create next page navigation


var nextPage = document.createelement ("P");


Nextpage.setattribute ("id", "nextPage");


Apply a style to this layer


Dom.className.add (NextPage, "stylenextpage");


Create next-page navigation text


var txtnextpage = document.createTextNode (o.stxtnextpage);


Nextpage.appendchild (Txtnextpage);


Append text to the Navigator


Navbar.appendchild (NextPage);





Add a navigation bar to a photo album container


Container.appendchild (NavBar);





To add a photo album container to a document


Document.body.appendChild (container);


O.oshardow = Shardow;


o.ocurrentimg = curimg;


O.oimgcontainer = container;


O.oinfobar = InfoBar;


O.otxtinfo = Imginfo;


O.oclosebar = Closebar;


O.onavbar = NavBar;


O.oprepage = Prepage;


O.otxtindex = Txtindex;


O.onextpage = NextPage;


O.fixpos ();


To control whether page navigation is available based on the index


if (O.sindex = = O.simgcount) {


Dom.setstyle (NextPage, o.stylepagedisable); The next page button is not available when the last one


}


else {


if (O.sindex = 1)


Dom.setstyle (Prepage, o.stylepagedisable); The previous page button is not available when the first one


}





Add a gradual animation effect to the album layer


Dom.slideup (container);





Closebar.onclick = O.close;


Nextpage.onclick = O.next;


Prepage.onclick = o.previous;


Curimg.onclick = O.show;


})();





return false; Eliminate a label default action


}


this.pathindex++;


}


}


},





Close album


Close:function () {


var pos = 100;


var o = mylib.albums;


var dom = Mylib.dom;





var tt = Window.setinterval (function () {


if (POS <= 5) {


if (TT) {


Document.body.removeChild (O.oimgcontainer);


Document.body.removeChild (O.oshardow);


Window.clearinterval (TT);


}


}


else {


pos-= 5;


Dom.setopacity (O.oimgcontainer, POS);


}


},50);


},





Show Next picture


Next:function () {


var o = mylib.albums;


var dom = Mylib.dom;


var temindex = o.sindex + 1;


If the current picture is not the last one


if (O.sindex!= o.simgcount) {


Replace the path to the next picture in the current display (img tag) picture (Standard Dom method)


O.ocurrentimg.setattribute ("src", O.oalbumspath[o.sindex]);


The method of BOM


O.OCURRENTIMG.SRC = O.oalbumspath[o.sindex];


Write the picture description information in the picture Information Bar


o.otxtinfo.innerhtml = O.oalbumsimgs[o.sindex].getattribute ("alt");


Get the index information for the current picture


O.stxtindexinfo = "Total" + O.simgcount + "Picture" + Temindex + "/" + O.simgcount;


Write index information to the index Information Bar


o.otxtindex.innerhtml = O.stxtindexinfo;


Resize the album layer to fit the size of the new picture


O.fixpos ();


Add a gradual animation effect to the restructured Photo album layer


Dom.slideup (O.oimgcontainer);





o.sindex++; Move to the next index





The previous page button is available


Dom.setstyle (O.oprepage, o.stylepageenable);


The next page button is not available when the picture is transferred to the last one


Don't be surprised because the front o.sindex++, so originally o.sindex==11 (O.sindex!= o.simgcount) was established


and + + after, now O.sindex==o.simgcount (12), that is, to the last picture


if (O.sindex = = O.simgcount) Dom.setstyle (o.onextpage,o.stylepagedisable);


}


},





Show previous picture


Previous:function () {


var o = mylib.albums;


var dom = Mylib.dom;


var temindex = o.sindex-1;


If not the last one and the first picture


if (O.sindex > 1) {


Replace the path to the next picture in the current display (img tag) picture (Standard Dom method)


O.ocurrentimg.setattribute ("src", o.oalbumspath[o.sindex-2]);


The method of BOM


O.OCURRENTIMG.SRC = O.oalbumspath[o.sindex-2];


Write the picture description information in the picture Information Bar


o.otxtinfo.innerhtml = O.oalbumsimgs[o.sindex-2].getattribute ("alt");


Get the index information for the current picture


O.stxtindexinfo = "Total" + O.simgcount + "Picture" + Temindex + "/" + O.simgcount;


Write index information to the index Information Bar


o.otxtindex.innerhtml = O.stxtindexinfo;


Resize the album layer to fit the size of the new picture


O.fixpos ();


Add a gradual animation effect to the restructured Photo album layer


Dom.slideup (O.oimgcontainer);





o.sindex--; Move to an index on the previous sheet





The next page button is available


Dom.setstyle (O.onextpage, o.stylepageenable);


If you go to the first picture, the previous page button is not available


if (O.sindex = = 1) dom.setstyle (O.oprepage, o.stylepagedisable);


}


},





Show:function () {


var o = mylib.albums;


var dom = Mylib.dom;


var maxheight =-40;


var minheight = 0;


var pos = 100;


if (O.oinfobar.style.display = = "Block") {


var tt = Window.setinterval (function () {





if (MinHeight < maxheight) {


if (TT) {


O.oinfobar.style.margintop = maxheight + "px";


Dom.setopacity (o.oinfobar,0);


pos = 0;


O.oinfobar.style.display = "None";


Window.clearinterval (TT);


}


}


MinHeight-= 4;


pos-= 10;


O.oinfobar.style.margintop = minheight + "px";


Dom.setopacity (O.oinfobar,pos);


},60);


}


else{


var ss = Window.setinterval (function () {


O.oinfobar.style.display = "block";


if (MaxHeight >-5) {


if (ss) {


o.oinfobar.style.margintop = 0;


Dom.setopacity (o.oinfobar,100);


Window.clearinterval (ss);


}


}


MaxHeight + 4;


MinHeight + 10;


Dom.setopacity (O.oinfobar,minheight);


O.oinfobar.style.margintop = maxheight + "px";


},60);


}


},





Re-refresh album container


Fixpos:function () {


var o = mylib.albums;


var com = mylib.com;





var oshardow = O.oshardow;


var ocurimg = o.ocurrentimg;


var ocontainer = O.oimgcontainer;


var oinfobar = O.oinfobar;


var onavbar = O.onavbar;





if (ocurimg && ocontainer && Oshardow) {


var tempimg = new Image ();


TEMPIMG.SRC = OCURIMG.SRC;





var tempwidth = tempimg.width;


var tempheight = tempimg.height;





OCurImg.style.width = Tempwidth;


OCurImg.style.height = Tempheight;





OContainer.style.height = tempheight + "px";


OContainer.style.width = tempwidth + "px";





var yscroll = com. Page.getscroll () [1];


var xscroll = com. Page.getscroll () [0];


var winheight = com. Page.getcurwinsize () [1];


var winwidth = com. Page.getcurwinsize () [0];


var docheight = com. Page.getpagesize () [1];


var docwidth = com. Page.getpagesize () [0];





var w = "100%";


Resize Shadow layer width


if (Tempwidth > Winwidth) {


W = (tempwidth +) + "px";


}





OShardow.style.width = W;


OShardow.style.height = com. Page.getpagesize () [1] + "px";





var margintop = tempheight > winheight? Yscroll:yscroll + (Winheight-(tempheight + 20))/2;


Control the album layer can not be unrestricted sliding down, when the bottom of the album more than the document or viewport large hours, stop scrolling.


if (Tempheight > Winheight && (margintop + tempheight) > Docheight) return;





OContainer.style.top = margintop + ' px '


OContainer.style.marginLeft = '-' + (TEMPWIDTH/2 +) + ' px ';





OInfoBar.style.width = (tempwidth +) + "px";


ONavBar.style.width = (tempwidth +) + "px";


}


}


}





MyLib.Event.addEvent (window, "resize", MyLib.Albums.fixPos);


MyLib.Event.addEvent (window, "scroll", MyLib.Albums.fixPos);