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);