Bones
Code Helper 
Posts: 131
Bones said 0 great things
|
Post by Bones on Jan 31, 2011 21:35:25 GMT -8
(updated to version 0.7 BETA with a choice of prototype or jQuery versions) - Browsers Tested: Firefox 3.6
- Placement: Global (or board) Header and Footer.
- Overview: I've been seeing a number of requests lately for a code that can add Lightbox Image Galleries to Proboards posts so I decided to see if it was possible.
This code is VERSION 0.1 which means it was born just a few hours ago and is considered ALPHA. Features are still in the decision stage but I'm posting it to get any feedback on desired features as well as to weed out any bugs that may be discovered.
- Code (Header):
<script type="text/javascript" src="http://etonbones.comxa.com/Proboards/scripts/prototype.js"></script>
<script type="text/javascript" src="http://etonbones.comxa.com/Proboards/scripts/scriptaculous/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="http://etonbones.comxa.com/Proboards/scripts/lightbox.js"></script>
<link rel="stylesheet" type="text/css" href="http://etonbones.comxa.com/Proboards/css/lightbox.css" />
<style type="text/css">
.lightthumb25 {max-width:25px; _width:25px;}
.lightthumb30 {max-width:30px; _width:30px;}
.lightthumb40 {max-width:40px; _width:40px;}
.lightthumb50 {max-width:50px; _width:50px;}
.lightthumb60 {max-width:60px; _width:60px;}
.lightthumb75 {max-width:75px; _width:75px;}
.lightthumb100 {max-width:100px; _width:100px;}
.lightthumb140 {max-width:140px; _width:140px;}
.lightthumb180 {max-width:180px; _width:180px;}
.lightthumb200 {max-width:200px; _width:200px;}
.lightthumb300 {max-width:300px; _width:300px;}
.lightthumb {border-width: 2px 2px 10px; margin: 5px;}
#thumbgrouplegend {padding-top:8px;}
#thumbgrouplegend li,#thumbgrouplegend ul {display:inline;}
#thumbgrouplegend ul {padding-left:0px; margin-left:0px;;}
#thumbgrouplegend li {margin:0px 0px 0px 4px;}
#thumbgrouplegend li:first-child {margin-left:0px;}
#galleryfilter li {opacity: 0.5;}
#galleryfilter li.selected {opacity:1;}
</style>
- Code (Footer):
<script type="text/javascript" >
/* Proboards Lightbox Image Gallery (Prototype/Scriptaculous Version)*/
(function(){
var thumbnailWidths = [25,30,40,50,60,75,100,140,180,200,300];
var defaultThumbWidth = 50;
if(window.jQuery && jQuery===$)jQuery.noConflict();
var disable=window.disable
$$('textarea[name=message]').each(function(item,index){
window.getImages = function getImages(group){
var groupLegend,imgDiv = Builder.node('nobr', {id:'lightImages', style:'display:none;'},
[
Builder.node('fieldset', {id:"postImages"},
[
Builder.node('legend', {onclick:"var t=this.parentNode.lastChild; t.style.display = t.style.display=='none'?'':'none';", style: "cursor:pointer;"},'Gallery Images'),
(function(){ var eventPreview =function(event,thumbs){
var msg = event.srcElement||event.target,t=thumbs;
if(!thumbs)thumbs = document.getElementById('thumbpreview'); else arguments.callee.oldval = msg.value;
if(thumbs && ((arguments.callee.oldval!=msg.value)||t)){
thumbs.innerHTML = ""; arguments.callee.oldval = msg.value;
var a,imgs = (function(){
var thumbs = [];
var groups = arguments[0]||
{
"__selected": "unfiltered",
genRGB: function (m,s,c){ /* paulirish.com/2009/random-hex-color-code-snippets (modified to use charAt for IE)*/
return (c ? arguments.callee(m,s,c-1) : '#') + s.charAt(Math.floor(Math.random() * s.length))
},
genLe: function(){
var legend = Builder.node('div',{id:'thumbgrouplegend'},['filter by galleryID: ',Builder.node('ul', {id:'galleryfilter'},
function(obj){ var selected = obj['__selected'];
var a,b=[Builder.node('li',{className:'titlebg'+(selected == 'unfiltered'?' selected':''), style:'color:'+obj[a]+';cursor:pointer;',onclick:"window.getImages.groups['__selected']=this.innerHTML; $$('#lightImages').each(function(i){i.remove()});$('lightAdd').parentNode.insert(getImages()).lastChild.style.display='';"},'unfiltered')]
for(a in obj)if("string"==typeof(obj[a]) && obj[a].substr(0,1)=="#")
b.push(Builder.node('li',{className:'titlebg'+(selected == a?' selected':''), style:'color:'+obj[a]+';cursor:pointer;',onclick:"window.getImages.groups['__selected']=this.innerHTML; $$('#lightGroup input')[0].value=this.innerHTML;$$('#lightImages').each(function(i){i.remove()});$('lightAdd').parentNode.insert(getImages(this.innerHTML)).lastChild.style.display='';"},a));
return b
}(this))]);
return legend;
}
}
var postGroup = pb_username+'_gallery';
msg.value.replace(/\[url=([^\]]+?)\][\s\n\r]*?\[img width=(\d+) height=\d+]([^\[]+?)\[\/img\][\s\n\r]*?\[\/url\]/gi,
function(m,p1,p2,p3,p4){
if(/lbrel=lightbox/.test(p1)){
p1 = decodeURIComponent(p1);
var g = (p1.match(/lbrel=lightbox(?:\[(.+?)\])?/)[1]||postGroup);
if(!(g in groups))groups[g] = groups.genRGB(Math,'0123456789ABCDEF',5)
var w = (/lbw=([^&#]+)/.test(p1)?p1.match(/lbw=([^&#]+)/)[1]:defaultThumbWidth);
var c = decodeURIComponent(/lbcap=([^&#]+)/.test(p1)?p1.match(/lbcap=([^&#]+)/)[1]:'Proboards Gallery');
thumbs.push(Builder.node('img',{src:p3,className:'lightthumb lightthumb'+w+ ' '+g.replace(/\W/g,'_'),style:'outline:3px solid '+groups[g]+";_border: 3px solid "+groups[g] +";float:left;",title:c, onclick:"$$('#lightURL input')[0].value=this.src;$$('#lightURL input')[1].value='Edit Image';if(/lightthumb(\\d+)/.test(this.className))$$('#thumb'+RegExp.$1)[0].selected=true; if(this.title)$$('#lightCaption input')[0].value=this.title; $$('#lightGroup input')[0].value=this.className.split(' ').pop();"}));
return m.replace(/&lbrel=lightbox(\[.+?\])?/,'').replace(/&lbw=\d+/,'');
}else return m;
});
//if(thumbs[0])thumbs = thumbs.concat([Builder.node('br')]).concat([groups.genLe()]);
if(document.getElementById('thumbgrouplegend')) document.getElementById('thumbgrouplegend').parentNode.replaceChild(groups.genLe(), document.getElementById('thumbgrouplegend'));
window.getImages.groups = groups;
return thumbs;
})(window.getImages.groups)
for(a=0;a<imgs.length;a++)if(!group || (group && (RegExp("\\b"+group+"\\b").test(imgs[a].className)||imgs[a].nodeName!='IMG'))){thumbs.appendChild(imgs[a]);if(imgs[a].id=='thumbgrouplegend')groupLegend = imgs[a];}
}
}
,previewDiv;
$$('textarea[name=message]').each(function(item){
if(item.form && item.form.nextaction){
item.observe('keyup',eventPreview); item.observe('focus',eventPreview);
}
});
previewDiv = Builder.node('div',{id:'thumbpreview',style:'overflow:hidden;height:1%'});
eventPreview({target:item},previewDiv); window.getImages.eventPreview = eventPreview;
return previewDiv;
})(),
window.getImages.groups.genLe()
])
]);
//patch: reposition legend for image wrapping
/*if(groupLegend){
if(document.getElementById('thumbgrouplegend')) document.getElementById('thumbgrouplegend').parentNode.replaceChild(groupLegend, document.getElementById('thumbgrouplegend'));
else groupLegend.parentNode.parentNode.appendChild(groupLegend);
}*/
return imgDiv;
}
if(item.form && item.form.color && window.add){
var td =item.up('td.windowbg2');
td.parentNode.parentNode.insertBefore(
Builder.node('tr',
[
Builder.node('td',{className:'windowbg2',width:'30%',valign:'top',bgColor:td.bgColor},[Builder.node('font',{size:2},'Image Gallery:')]),
Builder.node('td',{className:'windowbg2',width:'70%',bgColor:td.bgColor},
[
Builder.node('fieldset',{id: 'lightAdd'},
[
Builder.node('nobr',{id:'lightURL'},
[
'Image URL: ', Builder.node('input', {type:'text', size:50}), ' ',
(function(){
var a
a = Builder.node('input',{type: "button", value: "Add Image"});
a.observe('click',function(){
var thumbCaption = null, thumbGroup = "["+(this.form.post?"post"+this.form.post:(+new Date))+"]", thumbURL="", thumbSize=defaultThumbWidth, rel="&lbrel=lightbox";
$$('#lightThumbSize select').each(function(item){thumbSize = (item.options.selectedIndex!=-1 && !isNaN(item.options[item.options.selectedIndex].value))?item.options[item.options.selectedIndex].value:thumbSize;});
$$('#lightCaption input').each(function(item){if(item.value.length )thumbCaption = item.value;});
$$('#lightGroup input').each(function(item){if(item.value.length && /^\w+$/.test(item.value))thumbGroup = "["+item.value+"]";else item.value=thumbGroup.replace(/(^\[|\]$)/g,'')});
$$('#lightURL input[type=text]').each(function(item){if(item.value.length && /^https?:\/\/.+$/.test(item.value))thumbURL = item.value;item.value = '';});
window.getImages.eventPreview.oldval = this.form.message.value;
if(thumbURL.length && RegExp('\\[url='+thumbURL+"[^\\]]*?\\][\\s\\n\\r]*?\\[img width=\\d+ height=\\d+][^\\[]+?\\[\\/img\\][\\s\\n\\r]*?\\[\\/url\\]","i").test(this.form.message.value)){
this.form.message.value = this.form.message.value.replace(RegExp('\\[url='+thumbURL+"[^\\]]*?\\][\\s\\n\\r]*?\\[img width=\\d+ height=\\d+][^\\[]+?\\[\\/img\\][\\s\\n\\r]*?\\[\\/url\\]","i"),
" [url="+thumbURL+ (/\?/.test(thumbURL)?"":"?")+rel+ encodeURIComponent(thumbGroup)+(thumbCaption?"&lbcap="+ encodeURIComponent(thumbCaption):"") +"&lbw="+ thumbSize +"][" +
"img width="+ thumbSize +" height="+ thumbSize +"]"+ thumbURL + "[\/img][\/url]");
}else
add(
" [url="+thumbURL+ (/\?/.test(thumbURL)?"":"?")+rel+ encodeURIComponent(thumbGroup)+(thumbCaption?"&lbcap="+ encodeURIComponent(thumbCaption):"") +"&lbw="+ thumbSize +"][",
"img width="+ thumbSize +" height="+ thumbSize +"]"+ thumbURL + "[\/img][\/url]"
);
window.getImages.eventPreview({target:this.form.message});
$$('#lightURL input')[1].value= 'Add Image';
$$('#lightThumbSize select option[id=thumb'+defaultThumbWidth+']')[0].selected = true;
})
return a
})()
]),
Builder.node('div',{style:'text-align:right;'},
[
Builder.node('a',{href:'#',onclick:"var a = document.getElementById(\'lightOptions\'); if(a)a.toggle();return false;"},'Options'),
Builder.node('span',null,' - '),
Builder.node('a',{href:'#',onclick:"var a = document.getElementById(\'lightImages\'); if(a)a.toggle();return false;"},'Gallery Images')
])
]),
Builder.node('fieldset', {id:"lightOptions",style:"display:none;"},
[
Builder.node('legend','Options'),
Builder.node('nobr', {id:'lightThumbSize'}, ['Thumbnail Size: ',
(function(){ var a,b=Builder.node('select',{style: 'margin: 0 20px;'});
for(a=0;a<thumbnailWidths.length;a++){
b.options[b.options.length] = new Option(thumbnailWidths[a]+"x"+thumbnailWidths[a],thumbnailWidths[a]);
b.options[b.options.length-1].id = "thumb"+thumbnailWidths[a];
}
b.select('[id=thumb'+defaultThumbWidth+']').each(function(opt){opt.selected = true;}) //TODO: use storage to persist user preference
return b;
})()
]),
Builder.node('nobr', {id:'lightCaption'}, ['Caption: ', Builder.node('input', {type:'text', size:20, value:pb_username+'\'s gallery',onfocus:'this.select();'})]),
Builder.node('nobr',{style: 'margin-left:20px;',id:'lightGroup'}, [' Gallery ID: ', Builder.node('input', {type:'text', size:20, value:pb_username+'_gallery', onfocus:'this.select();'})]),
]),
(function(){
return getImages()
})()
])
]),td.parentNode
)
item.form.observe('submit',function(){
var a;
for(a in this.elements) if(this.elements[a].removeAttribute)this.elements[a].removeAttribute('disabled');
disable(this);
})
}
})
$$('td.titlebg b').each(function(item,index){
if(item.innerHTML=="Topic Summary"){
var ts = item.parentNode;
while(!/^(table|body)$/i.test(ts.nodeName))ts=ts.parentNode;
if(ts.nodeName=="TABLE"){
$(ts).select('a[href*="lbrel=lightbox"]').each(function(lnk){lnk.href=lnk.href.replace(/&?lb(rel|w|cap)=[^&#]+/g,'')})
}
}
})
//Apply lightbox to any hyperlink on the page that possess the required HREF patterns.
var groups={}
$$('a[href*="lbrel=lightbox"]').each(function(lnk){
var href = decodeURI(lnk.href),rel,cap
if( /\?&lbrel=(lightbox([^&#]+)?)/.test(href)){
rel = RegExp.$1;
if(/&lbcap=([^&#]+)/.test(href))cap=decodeURIComponent(RegExp.$1);
href = href.replace(/&lbrel=(lightbox([^&#]+)?)/,'').replace(/&lbcap=([^&#]+)/,'').replace(/&lbw=([^&#]+)/,'');
lnk.href=encodeURI(href);
lnk.setAttribute("rel", rel+(lnk.getAttribute('rel').length?" "+decodeURIComponent(lnk.getAttribute('rel')):""));
if(cap&&cap.length)lnk.title = cap;
lnk.select('img').each(function(img){
img.title=img.alt="Proboards Gallery Image";
img.className = "lightthumb lightthumb"+img.width;
img.removeAttribute('width'); img.removeAttribute('height');
if(/&lbw=([^#&]+)/.test(rel))img.style.width=RegExp.$1;
})
}
})
})()
</script>
- Known Issues:
- grouping colors not working in Internet Exploder (doesn't support outline in quirksmode --no Proboards doctype)
update: border used when IE is detected
- grouping colors are randomly chosen after each edit (inconsistent)
update: chosen colors now consistent within an editing/posting session
- Notes:
- Everything is currently hosted on my own server but since this is a bandwidth limited server once the code is considered stable you'll be required to host the files yourself or use Google's free library hosting service. As of this writing however Google doesn't have the most recent stable versions of the libraries which is why I decided to host it.
- Prototype library will conflict with jQuery library since they both use $ and using noConflict() call in jQuery actually won't completely solve the problem so if you have jQuery scripts installed on your forum then installing this [the prototype version] might not be a good idea. Since jQuery appears to be tied to the future of Proboards this will eventually need to be rewritten in jQ but for now it is written in the Prototype library used by the lightbox script.
update: added a jQuery version (see below)
- jQuery version added below
- TODO: add plugin system to allow capturing generated URLS from image uploaders, alternatively just add a dedicatated uploader
- Preview:
- fixed Proboards automatic insertion of spaces on long lines in posted codes causing syntax error on both Prototype and jQuery version (not sure I got them all).
- added a jQuery version for those already using jQuery
- updated CSS for new feature (group legends)
- collapsible Gallery preview
- automatic grouping for any ungrouped gallery images in a post.
- exclude images in topic summary from being "lightboxed"
- clicking on group name inserts that name in group field
- clicking on caption or group field automatically selects any text in them for easier editing
- values in group and caption fields persist for editing session by default to reduce typing.
- thumbnail resized (if code is running) to maintain aspect ratio of native size.
- ability to edit the properties of an existing gallery image
jQuery Version:
header: <script type="text/javascript" src="http://etonbones.comxa.com/jqlightbox/js/jquery.js"></script>
<script type="text/javascript" src="http://etonbones.comxa.com/jqlightbox/js/jquery.lightbox-0.5.js"></script>
<style type="text/css">
/* jQuery lightBox plugin - Gallery style */
#gallery {
background-color: #444;
padding: 10px;
width: 520px;
}
#gallery ul { list-style: none; }
#gallery ul li { display: inline; }
#gallery ul img {
border: 5px solid #3e3e3e;
border-width: 5px 5px 20px;
}
#gallery ul a:hover img {
border: 5px solid #fff;
border-width: 5px 5px 20px;
color: #fff;
}
#gallery ul a:hover { color: #fff; }
</style>
<link rel="stylesheet" type="text/css" href="http://etonbones.comxa.com/jqlightbox/css/jquery.lightbox-0.5.css" media="screen"/>
<style type="text/css">
.lightthumb25 {max-width:25px; _width:25px;}
.lightthumb30 {max-width:30px; _width:30px;}
.lightthumb40 {max-width:40px; _width:40px;}
.lightthumb50 {max-width:50px; _width:50px;}
.lightthumb60 {max-width:60px; _width:60px;}
.lightthumb75 {max-width:75px; _width:75px;}
.lightthumb100 {max-width:100px; _width:100px;}
.lightthumb140 {max-width:140px; _width:140px;}
.lightthumb180 {max-width:180px; _width:180px;}
.lightthumb200 {max-width:200px; _width:200px;}
.lightthumb300 {max-width:300px; _width:300px;}
.lightthumb {border-width: 2px 2px 10px; margin: 5px;}
#thumbgrouplegend {padding-top:8px;}
#thumbgrouplegend li,#thumbgrouplegend ul {display:inline;}
#thumbgrouplegend ul {padding-left:0px; margin-left:0px;;}
#thumbgrouplegend li {margin:0px 0px 0px 4px;}
#thumbgrouplegend li:first-child {margin-left:0px;}
#galleryfilter li {opacity: 0.5;}
#galleryfilter li.selected {opacity:1;}
</style>footer: <script type="text/javascript">
/* Proboards Lightbox Image Gallery (jQuery Version)*/
(function(){
var thumbnailWidths = [25,30,40,50,60,75,100,140,180,200,300];
var defaultThumbWidth = 50;
var Builder = {
node:function (tag,attr,children){
tag = tag.get?tag.get(0):tag;
if(attr && (attr.constructor===Array||attr.constructor===String) && !children){children=attr; attr=null;}
var e = tag.nodeName?tag:document.createElement(tag),a,b; attr=attr?attr:{};
for(a in attr)try{
if(/^class$/i.test(a)){a="className";}else if(/^for$/i.test(a)){a="htmlFor";}
if(/^style$/i.test(a)){
e.style.cssText=attr[a];
}else{
if(/^on/i.test(a)){
if( !this.attrEvent)e[a]= ("function" == typeof( attr[a])?attr[a]:Function(attr[a])); else e.setAttribute(a, attr[a]);
}else e[a]=attr[a];
}
}catch(f){}
if("string"==typeof(children))e.appendChild(document.createTextNode(children));
else if(children && children[0]){
for(a=0,b=children.length;a<b;a++){
if("string"==typeof children[a]){e.appendChild(document.createTextNode(children[a]));
}else if(children[a] && children[a].nodeName){e.appendChild(children[a])}
}
}
return e;
},
eventTest: function(){var a = document.createElement('a'); a.setAttribute('onclick','return true;'); this.attrEvent = "function" == typeof a.onclick?a.onclick():false; a=null;}
}; Builder.eventTest();
$('textarea[name=message]').each(function(index,item){
window.getImages = function getImages(group){
var groupLegend,imgDiv = Builder.node('nobr', {id:'lightImages', style:'display:none;'},
[
Builder.node('fieldset', {id:"postImages"},
[
Builder.node('legend', {onclick:"var t=this.parentNode.lastChild; t.style.display = t.style.display=='none'?'':'none';", style: "cursor:pointer;"},'Gallery Images'),
(function(){ var eventPreview =function(event,thumbs){
var msg = event.srcElement||event.target,t=thumbs;
if(!thumbs)thumbs = document.getElementById('thumbpreview'); else arguments.callee.oldval = msg.value;
if(thumbs && ((arguments.callee.oldval!=msg.value)||t)){
thumbs.innerHTML = ""; arguments.callee.oldval = msg.value;
var a,imgs = (function(){
var thumbs = [];
var groups = arguments[0]||
{
"__selected": "unfiltered",
genRGB: function (m,s,c){ /* paulirish.com/2009/random-hex-color-code-snippets (modified to use charAt for IE)*/
return (c ? arguments.callee(m,s,c-1) : '#') + s.charAt(Math.floor(Math.random() * s.length))
},
genLe: function(){
var legend = Builder.node('div',{id:'thumbgrouplegend'},['filter by galleryID: ',Builder.node('ul', {id:'galleryfilter'},
function(obj){ var selected = obj['__selected'];
var a,b=[Builder.node('li',{className:'titlebg'+(selected == 'unfiltered'?' selected':''), style:'color:'+obj[a]+';cursor:pointer;',onclick:"window.getImages.groups['__selected']=this.innerHTML; $('#lightImages').each(function(ii,i){$(i).remove()});$('#lightAdd').parent().append(getImages()).children().last()[0].style.display='';"},'unfiltered')]
for(a in obj)if("string"==typeof(obj[a]) && obj[a].substr(0,1)=="#")
b.push(Builder.node('li',{className:'titlebg'+(selected == a?' selected':''), style:'color:'+obj[a]+';cursor:pointer;',onclick:"window.getImages.groups['__selected']=this.innerHTML; $('#lightGroup input')[0].value=this.innerHTML; $('#lightImages').each(function(ii,i){$(i).remove()});$('#lightAdd').parent().append(getImages(this.innerHTML)).children().last()[0].style.display='';"},a));
return b
}(this))]);
return legend;
}
}
var postGroup = pb_username+'_gallery';
msg.value.replace(/\[url=([^\]]+?)\][\s\n\r]*?\[img width=(\d+) height=\d+]([^\[]+?)\[\/img\][\s\n\r]*?\[\/url\]/gi,
function(m,p1,p2,p3,p4){
if(/lbrel=lightbox/.test(p1)){
p1 = decodeURIComponent(p1);
var g = (p1.match(/lbrel=lightbox(?:\[(.+?)\])?/)[1]||postGroup);
if(!(g in groups))groups[g] = groups.genRGB(Math,'0123456789ABCDEF',5)
var w = (/lbw=([^&#]+)/.test(p1)?p1.match(/lbw=([^&#]+)/)[1]:defaultThumbWidth);
var c = decodeURIComponent(/lbcap=([^&#]+)/.test(p1)?p1.match(/lbcap=([^&#]+)/)[1]:'Proboards Gallery');
thumbs.push(Builder.node('img',{src:p3,className:'lightthumb lightthumb'+w+ ' '+g.replace(/\W/g,'_'),style:'outline:3px solid '+groups[g]+";_border: 3px solid "+groups[g] +";float:left;",title:c, onclick:"$('#lightURL input')[0].value=this.src; $('#lightURL input')[1].value='Edit Image';if(/lightthumb(\\d+)/.test(this.className))$('#thumb'+RegExp.$1).attr('selected',true); if(this.title)$('#lightCaption input')[0].value=this.title; $('#lightGroup input')[0].value=this.className.split(' ').pop();"}));
return m.replace(/&lbrel=lightbox(\[.+?\])?/,'').replace(/&lbw=\d+/,'');
}else return m;
});
if(document.getElementById('thumbgrouplegend')) document.getElementById('thumbgrouplegend').parentNode.replaceChild(groups.genLe(), document.getElementById('thumbgrouplegend'));
window.getImages.groups = groups;
return thumbs;
})(window.getImages.groups)
for(a=0;a<imgs.length;a++)if(!group || (group && (RegExp("\\b"+group+"\\b").test(imgs[a].className)||imgs[a].nodeName!='IMG'))){$(thumbs).append(imgs[a]);if(imgs[a].id=='thumbgrouplegend')groupLegend = imgs[a];}
}
}
,previewDiv;
$('textarea[name=message]').each(function(index,item){
if(item.form && item.form.nextaction){
$(item).bind('keyup',eventPreview); $(item).bind('focus',eventPreview);
}
});
previewDiv = Builder.node('div',{id:'thumbpreview',style:'overflow:hidden;height:1%'});
eventPreview({target:item},previewDiv); window.getImages.eventPreview = eventPreview;
return previewDiv;
})(),
window.getImages.groups.genLe()
])
]);
return imgDiv;
}
if(item.form && item.form.color && window.add){
var td =$(item).parents('td.windowbg2'); td=td[0];
$(td.parentNode).before(
Builder.node('tr',
[
Builder.node('td',{className:'windowbg2',width:'30%',valign:'top',bgColor:td.bgColor},[Builder.node('font',{size:2},'Image Gallery:')]),
Builder.node('td',{className:'windowbg2',width:'70%',bgColor:td.bgColor},
[
Builder.node('fieldset',{id: 'lightAdd'},
[
Builder.node('nobr',{id:'lightURL'},
[
'Image URL: ', Builder.node('input', {type:'text', size:50}), ' ',
(function(){
var a
a = Builder.node('input',{type: "button", value: "Add Image"});
$(a).bind('click',function(){
var thumbCaption = null, thumbGroup = "["+(this.form.post?"post"+this.form.post:(+new Date))+"]", thumbURL="", thumbSize=defaultThumbWidth, rel="&lbrel=lightbox";
$('#lightThumbSize select').each(function(i,item){thumbSize = (item.options.selectedIndex!=-1 && !isNaN(item.options[item.options.selectedIndex].value))?item.options[item.options.selectedIndex].value:thumbSize;});
$('#lightCaption input').each(function(i,item){if(item.value.length )thumbCaption = item.value;});
$('#lightGroup input').each(function(i,item){if(item.value.length && /^\w+$/.test(item.value))thumbGroup = "["+item.value+"]";else item.value=thumbGroup.replace(/(^\[|\]$)/g,'')});
$('#lightURL input[type=text]').each(function(i,item){if(item.value.length && /^https?:\/\/.+$/.test(item.value))thumbURL = item.value;item.value = '';});
window.getImages.eventPreview.oldval = this.form.message.value;
if(thumbURL.length && RegExp('\\[url='+thumbURL+"[^\\]]*?\\][\\s\\n\\r]*?\\[img width=\\d+ height=\\d+][^\\[]+?\\[\\/img\\][\\s\\n\\r]*?\\[\\/url\\]","i").test(this.form.message.value)){
this.form.message.value = this.form.message.value.replace(RegExp('\\[url='+thumbURL+"[^\\]]*?\\][\\s\\n\\r]*?\\[img width=\\d+ height=\\d+][^\\[]+?\\[\\/img\\][\\s\\n\\r]*?\\[\\/url\\]","i"),
" [url="+thumbURL+ (/\?/.test(thumbURL)?"":"?")+rel+ encodeURIComponent(thumbGroup)+(thumbCaption?"&lbcap="+ encodeURIComponent(thumbCaption):"") +"&lbw="+ thumbSize +"][" +
"img width="+ thumbSize +" height="+ thumbSize +"]"+ thumbURL + "[\/img][\/url]");
}else
add(
" [url="+thumbURL+ (/\?/.test(thumbURL)?"":"?")+rel+ encodeURIComponent(thumbGroup)+(thumbCaption?"&lbcap="+ encodeURIComponent(thumbCaption):"") +"&lbw="+ thumbSize +"][",
"img width="+ thumbSize +" height="+ thumbSize +"]"+ thumbURL + "[\/img][\/url]"
);
window.getImages.eventPreview({target:this.form.message});
$('#lightURL input')[1].value= 'Add Image';
$('#lightThumbSize select option[id=thumb'+defaultThumbWidth+']').attr({selected:true});
})
return a
})()
]),
Builder.node('div',{style:'text-align:right;'},
[
Builder.node('a',{href:'#',onclick:"var a = document.getElementById(\'lightOptions\'); if(a)$(a).toggle();return false;"},'Options'),
Builder.node('span',' - '),
Builder.node('a',{href:'#',onclick:"var a = document.getElementById(\'lightImages\'); if(a)$(a).toggle();return false;"},'Gallery Images')
])
]),
Builder.node('fieldset', {id:"lightOptions",style:"display:none;"},
[
Builder.node('legend','Options'),
Builder.node('nobr', {id:'lightThumbSize'}, ['Thumbnail Size: ',
(function(){ var a,b=Builder.node('select',{style: 'margin: 0 20px;'});
for(a=0;a<thumbnailWidths.length;a++){
b.options[b.options.length] = new Option(thumbnailWidths[a]+"x"+thumbnailWidths[a],thumbnailWidths[a]);
b.options[b.options.length-1].id = "thumb"+thumbnailWidths[a];
}
$(b).find('[id=thumb'+defaultThumbWidth+']').each(function(i,opt){opt.selected = true;}) //TODO: use storage to persist user preference
return b;
})()
]),
Builder.node('nobr', {id:'lightCaption'}, ['Caption: ', Builder.node('input', {type:'text', size:20, value:pb_username+'\'s gallery',onfocus:'this.select();'})]),
Builder.node('nobr',{style: 'margin-left:20px;',id:'lightGroup'}, [' Gallery ID: ', Builder.node('input', {type:'text', size:20, value:pb_username+'_gallery', onfocus:'this.select();'})]),
]),
(function(){
return getImages()
})()
])
])/*,td.parentNode*/
)
$(item.form).bind('submit',function(){
var a;
for(a in this.elements) if(this.elements[a].removeAttribute)this.elements[a].removeAttribute('disabled');
disable(this);
})
}
})
$('td.titlebg b').each(function(index,item){
if(item.innerHTML=="Topic Summary"){
$(item).parents('table').eq(0).find('a[href*="lbrel=lightbox"]').each(function(i,lnk){lnk.href=lnk.href.replace(/&?lb(rel|w|cap)=[^&#]+/g,'')})
}
})
//Apply lightbox to any hyperlink on the page that possess the required HREF patterns.
var groups={}
$('a[href*="lbrel=lightbox"]').each(function(i,lnk){
var href = decodeURI(lnk.href),rel,cap
if( /\?&lbrel=(lightbox([^&#]+)?)/.test(href)){
rel = RegExp.$1;
if(/&lbcap=([^&#]+)/.test(href))cap=decodeURIComponent(RegExp.$1);
href = href.replace(/&lbrel=(lightbox([^&#]+)?)/,'').replace(/&lbcap=([^&#]+)/,'').replace(/&lbw=([^&#]+)/,'');
lnk.href=encodeURI(href);
lnk.setAttribute("rel", rel+(lnk.getAttribute('rel').length?" "+decodeURIComponent(lnk.getAttribute('rel')):""));
if(cap&&cap.length)lnk.title = cap;
$(lnk).find('img').each(function(i,img){
img.title=img.alt="Proboards Gallery Image";
img.className = "lightthumb lightthumb"+img.width;
img.removeAttribute('width'); img.removeAttribute('height');
if(/&lbw=([^#&]+)/.test(rel))img.style.width=RegExp.$1;
})
}
})
$('a[rel*=lightbox]').lightBox();
})()
</script> |
|