From: <lu...@us...> - 2009-10-16 22:46:54
|
Revision: 22398 http://tikiwiki.svn.sourceforge.net/tikiwiki/?rev=22398&view=rev Author: luciash Date: 2009-10-16 22:46:47 +0000 (Fri, 16 Oct 2009) Log Message: ----------- [ENH] ColorBox: fixes and enhancements - tested with wiki page links, inline, external, absolute, relative, images, slideshow, FileGals, ImageGals, ... Modified Paths: -------------- trunk/lib/jquery_tiki/tiki-jquery.js Modified: trunk/lib/jquery_tiki/tiki-jquery.js =================================================================== --- trunk/lib/jquery_tiki/tiki-jquery.js 2009-10-16 20:28:56 UTC (rev 22397) +++ trunk/lib/jquery_tiki/tiki-jquery.js 2009-10-16 22:46:47 UTC (rev 22398) @@ -232,33 +232,62 @@ }); } - // colorbox setup (shadowbox replacement) + // ColorBox setup (Shadowbox, actually "<any>box" replacement) if (jqueryTiki.colorbox) { $jq().bind('cbox_complete', function(){ $jq("#cboxTitle").wrapInner("<div></div>"); }); - // for every link containing 'shadowbox' or 'colorbox' - $jq("a[rel*='box']").colorbox({ + + // Tiki defaults for ColorBox (to speed it up, matches any link in #col1 only - the main content column): + + // for every link containing 'shadowbox' or 'colorbox' in rel attribute + $jq("#col1 a[rel*='box']").colorbox({ transition: "elastic", - maxHeight:"100%", + maxHeight:"95%", + maxWidth:"95%", overlayClose: true, title: true }); - // rel containg type=img or no type= - $jq("a[rel*='box'][rel*='type=img'],a[rel*='box'][rel!='type=']").colorbox({ - photo: true + + // now, first let suppose that we want to display images in ColorBox by default: + + // this matches rel containg type=img or no type= specified + $jq("#col1 a[rel*='box'][rel*='type=img'], #col1 a[rel*='box'][rel!='type=']").colorbox({ + photo: true, }); - // rel containg type=flash - $jq("a[rel*='box'][rel*='type=flash']").colorbox({ - flash: true - }); - // rel containg slideshow + // rel containg slideshow (this one must be without #col1) $jq("a[rel*='box'][rel*='slideshow']").colorbox({ + photo: true, slideshow: true, - preloading: false + slideshowSpeed: 3500, + preloading: false, + width: "100%", + height: "100%" }); + // this are the defaults matching all *box links which are not obviously links to images... + // (if we need to support more, add here... otherwise it is possible to override with type=iframe in rel attribute of a link) + $jq("#col1 a[rel*='box']:not([rel*='type=img']):not([href*='display']):not([href*='preview']):not([href*='thumb']):not([rel*='slideshow']):not([href*='image']):not([href$='\.jpg']):not([href$='\.jpeg']):not([href$='\.png']):not([href$='\.gif'])").colorbox({ + iframe: true, + width: "95%", + height: "95%" + }); + // hrefs starting with ftp(s) + $jq("#col1 a[rel*='box'][href^='ftp://'], #col1 a[rel*='box'][href^='ftps://']").colorbox({ + iframe: true, + width: "95%", + height: "95%" + }); + // rel containg type=flash + $jq("#col1 a[rel*='box'][rel*='type=flash']").colorbox({ + flash: true, + iframe: false + }); + // rel with type=iframe (if someone needs to override anything above) + $jq("#col1 a[rel*='box'][rel*='type=iframe']").colorbox({ + iframe: true + }); // inline content: hrefs starting with # - $jq("a[rel*='box'][href^='#']").colorbox({ + $jq("#col1 a[rel*='box'][href^='#']").colorbox({ inline: true, width: "50%", height: "50%", @@ -266,44 +295,42 @@ return $(this).attr('href'); } }); - // href starting with http(s) or no image link - //$jq("a[rel*='box'][href^='http://'], a[rel*='box'][href^='https://'], a[rel*='box'][href!='&display']").colorbox({ - // the line above seems to be breaking images with links - assuming that all images contain '&display' in the href seems to restrictive - $jq("a[rel*='box'][rel*='type=iframe']").colorbox({ - iframe: true, - width: "95%" + + // titles (for captions): + + // by default get title from the title attribute of the link + $jq("#col1 a[rel*='box'][title]").colorbox({ + title: function(){ + return $(this).attr('title'); + } }); - // href starting with ftp(s) - $jq("a[rel*='box'][href^='ftp://'], a[rel*='box'][href^='ftps://']").colorbox({ - iframe: true, - width: "95%" - }); - // get title from the title attribute of the link - $jq("a[rel*='box'][title]").colorbox({ + // but prefer the title from title attribute of a wrapped image if any + $jq("#col1 a[rel*='box'] img[title]").colorbox({ title: function(){ return $(this).attr('title'); } }); - /* shadowbox params compatibility functions */ - // rel containg height param (shadowbox compatible) - $jq("a[rel*='box'][rel*='height']").colorbox({ - height: function () { - re = /(height=([^;\"]+))/i; + /* Shadowbox params compatibility extracted using regexp functions */ + + // rel containg title param overrides title attribute of the link (shadowbox compatible) + $jq("#col1 a[rel*='box'][rel*='title=']").colorbox({ + title: function () { + re = /(title=([^;\"]+))/i; ret = $jq(this).attr("rel").match(re); return ret[2]; } }); - // rel containg title param overrides title attribute of the link (shadowbox compatible) - $jq("a[rel*='box'][rel*='title']").colorbox({ - title: function () { - re = /(title=([^;\"]+))/i; + // rel containg height param (shadowbox compatible) + $jq("#col1 a[rel*='box'][rel*='height=']").colorbox({ + height: function () { + re = /(height=([^;\"]+))/i; ret = $jq(this).attr("rel").match(re); return ret[2]; } }); // rel containg width param (shadowbox compatible) - $jq("a[rel*='box'][rel*='width']").colorbox({ + $jq("a[rel*='box'][rel*='width=']").colorbox({ width: function () { re = /(width=([^;\"]+))/i; ret = $jq(this).attr("rel").match(re); This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site. |