JS Photo Album Program

Source: Internet
Author: User
Tags create index prev setinterval

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.