Basically, the paging tab at the bottom has an ID that matches an object identifier, which contains an object with the details essential for paging - gallery number, page requested, number of pages, and the number of rows per page. It works in all browsers now.
Let me know what you think.
Update: supports left + right + escape keystrokes on the image previewer.
Update: Highlights the image in the background, also changes page in the background (if there are pages)
Update: added an additional effect (purely CSS) that makes the image previewer slightly transparent when trying to access an image that doesn't exist (going too far to the left or too far to the right) in case the visual cue of the current near epilepsy inducing effect wasn't enough - you can now actually see that you are at the end of the gallery!
I'm pretty much going to say that this is final now. Thumbnail sizes were going to be set in the script, but I'm pretty happy with them being in CSS. You can set other things in the CSS that I haven't bothered with, like a max size for the previewer.
The AJAX mode would basically be this: Load page, load JSON separately (you will see that half of the gallery script is just a big JSON compatible object) and then send the data back to the client and process the gallery script... So the code might be something like:
galleryAdd(galleryTargetObject,galleryTitle,cells,rows,tables,pages,ajaxDataLocation)
where ajaxDataLocation might be something like 'js/gallery.js' or 'grabgallery.php' or whatever you want really...
I'll probably put up a demo later tonight. I have some real work to do now.
gallery object creator script. It's so basic that you can only add things to the object. You can't edit or delete them. It's just to show you how easy it is to generate the gallery data. Here it is:
[{"title":"hey thar","description":"awesome gallery","contents":[{"title":"me and dad","description":"a picture of my dad getting physical with me","image":"dadtouch.jpg","thumb":"dadtouchsmall.jpg"},{"title":"dad and mum","description":"a photo my parents dont know about","image":"spycam.jpg","thumb":"spycamthumb.jpg"}]},{"title":"test gallery","description":"another test","contents":[{"title":"just this one","description":"one picture","image":"one.jpg","thumb":"one1.jpg"}]}]
var pageObject={};
var previewObject=null;
var galleryAjaxMode=false;
var galleryIDPrefix="gal";
var galleryPagePrefix="Page ";
var thumbWidth=100;
var thumbWidthType="%";
var thumbHeight=100;
var thumbHeightType="%";
var goverlayhover=false;
var goverlaymode=1;
var gpreloadimg=new Image();
var gpreloadpics=[];
var gCurrentPage=0;
var gCurrentRows=[];
function galleryGrab(o){
return document.all?document.all[o]:document.getElementById?document.getElementById(o):"";
}
function galleryAdd(objString,galleryTargetObj,galleryCells,galleryRows,tablesMode,pagesMode,ajaxMode){
!galleryCells?galleryCells=4:galleryCells;
!galleryRows?galleryRows=3:galleryRows;
if(tablesMode==null||tablesMode=="undefined"){ tablesMode=true; }
if(pagesMode==null||pagesMode=="undefined"){ pagesMode=true; }
if(ajaxMode==null||ajaxMode=="undefined"){ ajaxMode=false; }
var o=galleryGrab(objString);
var galleryGrid=galleryCells*galleryRows;
var galleryCellsw=Math.floor(100/galleryCells);
var pages=false;
for(var i in gallery){
if(gallery[i].hasOwnProperty("title")){
if(gallery[i].title==galleryTargetObj){
var currentGallery=gallery[i].contents;
var galleryLen=Object.size(currentGallery);
// Image preloading
if(document.images){ for(var j in currentGallery){ if(currentGallery[j].hasOwnProperty("image")){ gpreloadpics.push(currentGallery[j].image); } } }
// Shade
var _shade=document.createElement("div");
_shade.id=galleryIDPrefix+i+"_shade";
_shade.className="gshade gdn";
_shade.onclick=function(){
if(goverlayhover==false||goverlaymode==1){
galleryGrab(galleryIDPrefix+previewObject.gallery+"_cel"+previewObject.contents).className="gcell";
this.className="gshade gdn";
previewObject=null;
}
}
if(goverlaymode==0){
_shade.onmousemove=function(){
if(goverlayhover==false){ this.className="gshade gdt gshadehover"; }
else{ this.className="gshade gdt"; }
}
}
_shade.onselectstart=function(){ return false; };
var _overlay=document.createElement("div");
_overlay.id=galleryIDPrefix+i+"_overlay";
_overlay.className="goverlay gdtc";
_shade.appendChild(_overlay);
o.appendChild(_shade);
// Tabled mode
if(tablesMode===true){
var galleryPages=Math.floor(galleryLen/galleryGrid);
galleryPages+=galleryLen%galleryGrid===0?0:1;
var cellOverflow=galleryCells-galleryLen%galleryCells;
var rowOverflow=Math.floor(galleryGrid*galleryPages%galleryLen/galleryCells);
var _gal=document.createElement("table");
_gal.id=galleryIDPrefix+i+"_gal";
_gal.className="gcontents";
var lastj=0;
for(var j in currentGallery){
if(currentGallery[j].hasOwnProperty("image")){
// Add row if needed
if(j%galleryCells==0){
var _row=document.createElement("tr");
_row.id=galleryIDPrefix+i+"_row"+j/galleryCells;
_row.setAttribute("data-gpage",Math.floor(j/galleryGrid));
if(pagesMode===true){ _row.setAttribute("data-gpages",galleryPages); }
if(j>=galleryGrid&&pagesMode===true){ _row.className="gdn"; }
else{ _row.className="gdtr"; }
}
// Add cell
var _cel=document.createElement("td");
_cel.id=galleryIDPrefix+i+"_cel"+j;
_cel.className="gcell";
_cel.onclick=function(){
galleryImagePreviewer(this.id);
};
_cel.onselectstart=function(){ return false; };
// Add image
var _img=document.createElement("img");
_img.src=currentGallery[j].thumb;
_img.alt=currentGallery[j].title;
_img.onmousedown=function(){ return false; };
// Add caption
var _cap=document.createElement("div");
_cap.className="caption";
_cap.innerHTML=currentGallery[j].title;
// Append image to cell
_cel.appendChild(_img);
// Append caption to cell
_cel.appendChild(_cap);
// Append cell to row
_row.appendChild(_cel);
// Append row to gallery if needed
if(j>=0&&j%galleryCells==0){
_gal.appendChild(_row);
}
// Set paging flag if j > gallery galleryRowsid
if(j>=galleryGrid){ if(!pages){ pages=true; } }
lastj++;
}
}
// Cell overflow
if(cellOverflow>0&&cellOverflow!=galleryCells){
for(var j=0;j<cellOverflow;j++){
var _cel=document.createElement("td");
_cel.className="gcell";
var _img=document.createElement("img");
_img.src="gallery4/hidden.png";
_cel.appendChild(_img);
_row.appendChild(_cel);
lastj++;
}
}
// Row overflow (paging mode only)
if(pagesMode===true&&rowOverflow>0){
for(var j=lastj;j<lastj+(rowOverflow*galleryCells);j++){
if(j%galleryCells==0){
var _row=document.createElement("tr");
_row.id=galleryIDPrefix+i+"_row"+j/galleryCells;
_row.setAttribute("data-gpage",Math.floor(j/galleryGrid));
if(pagesMode===true){ _row.setAttribute("data-gpages",galleryPages); }
if(j>=galleryGrid&&pagesMode===true){ _row.className="gdn"; }
}
var _cel=document.createElement("td");
_cel.className="gcell";
var _wrapper=document.createElement("wrapper");
_wrapper.className="wrapper";
var _img=document.createElement("img");
_img.src="gallery4/hidden.png";
_img.onmousedown=function(){ return false; }
_wrapper.appendChild(_img);
var _cap=document.createElement("div");
_cap.className="caption";
_cap.innerHTML=" ";
_cel.appendChild(_wrapper);
_cel.appendChild(_cap);
_row.appendChild(_cel);
if(j>=0&&j%galleryCells==0){
_gal.appendChild(_row);
}
}
}
// Paging
if(pagesMode===true&&pages){
var _prow=document.createElement("tr");
var _cel=document.createElement("td");
_cel.colSpan=galleryCells;
_cel.className="gpages";
for(var j=0;j<galleryPages;j++){
var _anc=document.createElement("div");
_anc.id=galleryIDPrefix+i+"_pagetab"+j;
pageObject[galleryIDPrefix+i+"_pagetab"+j]={gallery:i,page:j,pages:galleryPages,rows:galleryRows};
_anc.innerHTML=galleryPagePrefix+(j+1);
if(j==0){ _anc.className="active"; }
else{ _anc.className="inactive"; }
_anc.onclick=function(){
galleryPage(pageObject[this.id]);
};
_cel.appendChild(_anc);
}
_prow.appendChild(_cel);
_gal.appendChild(_prow);
}
// Add gallery to object
o.appendChild(_gal);
}
// Dynamic mode
else{
var _gal=document.createElement("div");
_gal.id=galleryIDPrefix+i+"_gal";
_gal.className="gcontents";
for(var j in currentGallery){
var _cel=document.createElement("div");
_cel.id=galleryIDPrefix+i+"_cel"+j;
_cel.className="gcell";
_cel.onclick=function(){
galleryImagePreviewer(this.id);
};
_cel.onselectstart=function(){ return false; };
var _img=document.createElement("img");
_img.src=currentGallery[j].thumb;
_img.alt=currentGallery[j].title;
_img.onmousedown=function(){ return false; };
var _cap=document.createElement("div");
_cap.className="caption";
_cap.innerHTML=currentGallery[j].title;
_cel.appendChild(_img);
_cel.appendChild(_cap);
_gal.appendChild(_cel);
}
o.appendChild(_gal);
}
}
}
}
galleryImagePreloader();
}
// Pager
function galleryPage(args){
// change page tab classNames
for(var i=0;i<args.pages;i++){
galleryGrab(galleryIDPrefix+args.gallery+"_pagetab"+i).className=i==args.page?"active":"inactive";
}
// change row classNames
args.pages=parseInt(args.pages);
args.rows=parseInt(args.rows);
for(var i=0;i<args.pages*args.rows;i+=args.rows){
for(var j=0;j<args.rows;j++){
var rowNum=i+j;
if(galleryGrab(galleryIDPrefix+args.gallery+"_row"+rowNum)){
galleryGrab(galleryIDPrefix+args.gallery+"_row"+rowNum).className=args.page==(i/args.rows)?"gdtr":"gdn";
}
}
}
}
// Preloader
function galleryImagePreloader(){
for(var i in gpreloadpics){ gpreloadimg.src=gpreloadpics[i]; }
}
// Previewer
function galleryImagePreviewer(objString){
galleryGrab(objString).className="gcell active";
var galleryNum=objString.split("_")[0].split("gal")[1];
var contentsNum=objString.split("_")[1].split("cel")[1];
var currentGallery=gallery[galleryNum].contents[contentsNum];
previewObject={gallery:galleryNum,contents:contentsNum};
var _shade=galleryGrab(galleryIDPrefix+galleryNum+"_shade");
_shade.className="gshade gdt";
var _overlay=galleryGrab(galleryIDPrefix+galleryNum+"_overlay");
var _cel=document.createElement("div");
_cel.className="gcell";
_cel.onmouseover=function(){ goverlayhover=true; };
_cel.onmouseout=function(){ goverlayhover=false; };
var _img=document.createElement("img");
_img.src=currentGallery.image;
_img.alt=currentGallery.title;
_img.onmousedown=function(){ return false; };
var _cap=document.createElement("div");
_cap.className="caption";
_cap.innerHTML=currentGallery.title;
var _sub=document.createElement("div");
_sub.className="subcaption";
_sub.innerHTML=currentGallery.description;
_cel.appendChild(_img);
_cel.appendChild(_cap);
_cel.appendChild(_sub);
_overlay.innerHTML="";
_overlay.appendChild(_cel);
window.onkeydown=function(e){
if(previewObject!=null){
switch(e.keyCode){
case 37: // left
if(!gallery[previewObject.gallery].contents[parseInt(previewObject.contents-1)]){
galleryGrab(galleryIDPrefix+previewObject.gallery+"_shade").className="gshade gdt gshadealert";
}
break;
case 39: // right
if(!gallery[previewObject.gallery].contents[parseInt(previewObject.contents-1+2)]){
galleryGrab(galleryIDPrefix+previewObject.gallery+"_shade").className="gshade gdt gshadealert";
}
break;
}
}
}
window.onkeyup=function(e){
if(previewObject!=null){
switch(e.keyCode){
case 27: // esc
galleryGrab(galleryIDPrefix+previewObject.gallery+"_cel"+previewObject.contents).className="gcell";
galleryGrab(galleryIDPrefix+previewObject.gallery+"_shade").className="gshade gdn";
previewObject=null;
break;
case 37: // left
if(gallery[previewObject.gallery].contents[parseInt(previewObject.contents-1)]){
var galleryPagesParent=galleryGrab(galleryIDPrefix+previewObject.gallery+"_cel"+parseInt(previewObject.contents-1)).parentNode;
if(galleryPagesParent.getAttribute("data-gpages")>1){
galleryPage(pageObject[galleryIDPrefix+previewObject.gallery+"_pagetab"+galleryPagesParent.getAttribute("data-gpage")]);
}
galleryGrab(galleryIDPrefix+previewObject.gallery+"_cel"+previewObject.contents).className="gcell";
galleryImagePreviewer(galleryIDPrefix+previewObject.gallery+"_cel"+parseInt(previewObject.contents-1));
}
else{
galleryGrab(galleryIDPrefix+previewObject.gallery+"_shade").className="gshade gdt";
}
break;
case 39: // right
if(gallery[previewObject.gallery].contents[parseInt(previewObject.contents-1+2)]){
var galleryPagesParent=galleryGrab(galleryIDPrefix+previewObject.gallery+"_cel"+parseInt(previewObject.contents-1+2)).parentNode;
if(galleryPagesParent.getAttribute("data-gpages")>1){
galleryPage(pageObject[galleryIDPrefix+previewObject.gallery+"_pagetab"+galleryPagesParent.getAttribute("data-gpage")]);
}
galleryGrab(galleryIDPrefix+previewObject.gallery+"_cel"+previewObject.contents).className="gcell";
galleryImagePreviewer(galleryIDPrefix+previewObject.gallery+"_cel"+parseInt(previewObject.contents-1+2));
}
else{
galleryGrab(galleryIDPrefix+previewObject.gallery+"_shade").className="gshade gdt";
}
break;
}
}
}
}
Object.size=function(o){
var size=0,k;
for(k in o){
if(o.hasOwnProperty(k)){ size++; }
}
return size;
};
