just want to share this cool Media Viewer, hope you like this what is Shadowbox? Shadowbox is a cross-browser, cross-platform, cleanly-coded and fully-documented overlay media viewer application. Supported images, flash, multimedia, html and ajax page. Shadowbox is cross-adapter, means it was built with support to different javascript framework to run with such as: Yahoo! User Interface Library, Ext (standalone), Prototype + Scriptaculous, jQuery, MooTools. just download this files [url=http://h1.ripway.com/theusedBert/tax/shadowbox.css]Shadowbox.css[/url] [url=http://h1.ripway.com/theusedBert/tax/shadowbox.js]Shadowbox.js w/ mootoolsAdapter.js[/url] then paste this on your js extension [quote]Asset.css('[b]Shadowbox.css link here[/b]'); window.addEvent('domready', function() { document.getElements('img', 'html', 'iframe', 'qt', 'swf').each(function(e){e.getParent().rel='Shadowbox';e.getParent().href=e.src}); Asset.javascript('[b]Shadowbo.js w/ mootoolsAdapter.js link here[/b]'); }); window.addEvent('domready', function() {onPageLoad()}); window.onload = function(){ Shadowbox.init(); };[/quote] [b]note[/b] it will trigger any images, like [b]friends[/b], [b]groups[/b], [b]fan of[/b], [b]photo gallery[/b], [b]comments, post comments[/b] etc. heres some ex. of plain html code for [b]Youtube[/b] [spoiler]<a rel="shadowbox;width=405;height=340" class="option" title="[b]Title Here[/b]" href="[b]Youtube link here[/b]&autoplay=1">[b]Title Here[/b]</a>[/spoiler] for [b]swf[/b] [spoiler]<a rel="shadowbox;width=400;height=300" class="option" title="[b]Title Here[/b]" href="[b]swf link here[/b]">[b]Name Here[/b]</a>[/spoiler] for [b]qt[/b] or [b]QuickTime[/b] [spoiler]<a rel="shadowbox;width=292;height=218" class="option" title="[b]Title Here[/b]" href="[b]mov link here[/b]">[b]Name Here[/b]</a>[/spoiler] for [b]image[/b], [b]html[/b], [b]php[/b], [b]htm[/b] or [b]any link[/b] [spoiler]<a rel="shadowbox" class="option" title="[b]Title Here[/b]" href="[b]any link here[/b]">[b]Name Here[/b]</a>[/spoiler] modify on the codes (for eg. using it as addbox, controlpanel buttons etc.) don't forget to change [b]"[/b] into [b]\"[/b] [b]note[/b] You can combined those codes if you want you can also change the [b]Name Here[/b] into image like thumbnail for eg. [quote]<img src="[b]image Link Here[/b]">[/quote] don't forget to change [b]"[/b] into [b]\"[/b] for slide gallery, just refer to my code [spoiler]window.addEvent('domready', function() { var tax="<a rel=\"shadowbox[simpleMe];options={counterType:'skip',continuous:true,animSequence:'sync'}\" href=\"[b]http://mjijackson.com/shadowbox/gallery/aston_martin/vantage.jpg[/b]\" title=\"[b]Vantage[/b]\"><img src=\"[b]http://mjijackson.com/shadowbox/gallery/aston_martin/vantage.jpg[/b]\" width=\"86px\" height=\"75px\" alt=\"tax\"></a>"+ "<a rel=\"shadowbox[simpleMe];options={counterType:'skip',continuous:true,animSequence:'sync'}\" href=\"[b]http://www.mjijackson.com/shadowbox/gallery/aston_martin/vanquish.jpg[/b]\" title=\"[b]vanquish[/b]\"><img src=\"[b]http://mjijackson.com/shadowbox/gallery/aston_martin/vanquish.jpg[/b]\" width=\"87px\" height=\"75px\" alt=\"tax\"></a>"+ "<a rel=\"shadowbox[simpleMe];options={counterType:'skip',continuous:true,animSequence:'sync'}\" href=\"[b]http://mjijackson.com/shadowbox/gallery/aston_martin/db9.jpg[/b]\" title=\"[b]Db9[/b]\"><img src=\"[b]http://mjijackson.com/shadowbox/gallery/aston_martin/db9.jpg[/b]\" width=\"86px\" height=\"75px\" alt=\"tax\"></a>"+ "<a rel=\"shadowbox[simpleMe];options={counterType:'skip',continuous:true,animSequence:'sync'}\" href=\"[b]http://i233.photobucket.com/albums/ee20/dhenn8/cars/bugatti-veyron.jpg[/b]\" title=\"[b]Red Bugatti Veyron[/b]\"><img src=\"[b]http://i233.photobucket.com/albums/ee20/dhenn8/cars/bugatti-veyron.jpg[/b]\" width=\"86px\" height=\"75px\" alt=\"tax\"></a>"+ "<a rel=\"shadowbox[simpleMe];options={counterType:'skip',continuous:true,animSequence:'sync'}\" href=\"[b]http://i293.photobucket.com/albums/mm57/edwardryoung/veyron.jpg[/b]\" title=\"[b]Blue Bugatti Veyron[/b]\"><img src=\"[b]http://i293.photobucket.com/albums/mm57/edwardryoung/veyron.jpg[/b]\" width=\"87px\" height=\"75px\" alt=\"tax\"></a>"+ "<a rel=\"shadowbox[simpleMe];options={counterType:'skip',continuous:true,animSequence:'sync'}\" href=\"[b]http://i46.photobucket.com/albums/f136/popiwopi/IMG_0001.jpg[/b]\" title=\"Lambo\"><img src=\"[b]http://i46.photobucket.com/albums/f136/popiwopi/IMG_0001.jpg[/b]\" width=\"86px\" height=\"75px\" alt=\"tax\"></a><br />"+ "<a rel=\"shadowbox[simpleMe];options={counterType:'skip',continuous:true,animSequence:'sync'};width=405;height=340\" class=\"option\" title=\"[b]Saosin - You're Not Alone Video[/b]\" href=\"[b]http://www.youtube.com/v/uhD8WnBQQIw[/b]&hl=en&fs=1&autoplay=1\"><img src=\"[b]http://img50.imageshack.us/img50/8545/90763420ho6.png[/b]\" width=\"86px\" height=\"75px\" alt=\"tax\"></a>"+ "<a rel=\"shadowbox[simpleMe];options={counterType:'skip',continuous:true,animSequence:'sync'};width=405;height=340\" class=\"option\" title=\"[b]The Used - Blue and Yellow[/b]\" href=\"[b]http://www.youtube.com/v/OIIIts7oSow[/b]&hl=en&fs=1&autoplay=1\"><img src=\"[b]http://img102.imageshack.us/img102/2568/72052059jf4.png[/b]\" width=\"87px\" height=\"75px\" alt=\"tax\"></a>"+ "<a rel=\"shadowbox[simpleMe];options={counterType:'skip',continuous:true,animSequence:'sync'};width=405;height=340\" class=\"option\" title=\"[b]The Used and My Chemical Romance live (2gether)[/b]\" href=\"[b]http://www.youtube.com/v/QZev4cC7Qzg[/b]&hl=en&fs=1&autoplay=1\"><img src=\"[b]http://img208.imageshack.us/img208/2914/89120263pi9.png[/b]\" width=\"86px\" height=\"75px\" alt=\"tax\"></a>"+ "<a rel=\"shadowbox[simpleMe];options={counterType:'skip',continuous:true,animSequence:'sync'};width=405;height=340\" class=\"option\" title=\"[b]Pork and Beans - Weezer[/b]\" href=\"[b]http://www.youtube.com/v/T_jGlyqoYoo[/b]&hl=en&fs=1&autoplay=1\"><img src=\"[b]http://img221.imageshack.us/img221/5131/70284511ki7.png[/b]\" width=\"86px\" height=\"75px\" alt=\"tax\"></a>"+ "<a rel=\"shadowbox[simpleMe];options={counterType:'skip',continuous:true,animSequence:'sync'};width=405;height=340\" class=\"option\" title=\"[b]time stands still - the all-american rejects[/b]\" href=\"[b]http://www.youtube.com/v/i2ef2KjWSRY[/b]&hl=en&fs=1&autoplay=1\"><img src=\"[b]http://img111.imageshack.us/img111/8352/39531983up6.png[/b]\" width=\"87px\" height=\"75px\" alt=\"tax\"></a>"+ "<a rel=\"shadowbox[simpleMe];options={counterType:'skip',continuous:true,animSequence:'sync'};width=405;height=340\" class=\"option\" title=\"[b]Miss You Love - Silverchair[/b]\" href=\"[b]http://www.youtube.com/v/boXJfsuxiEY[/b]&hl=en&fs=1&autoplay=1\"><img src=\"[b]http://img385.imageshack.us/img385/7954/84974971mf0.png[/b]\" width=\"86px\" height=\"75px\" alt=\"tax\"></a><br />"+ "<a rel=\"shadowbox[simpleMe];options={counterType:'skip',continuous:true,animSequence:'sync'}\" href=\"[b]http://www.alesanarock.com[/b]/\" title=\"[b]Alesana[/b]\"><img src=\"[b]http://i324.photobucket.com/albums/k341/joshsabbath/alesana.jpg[/b]\" width=\"86px\" height=\"75px\" alt=\"tax\"></a>"+ "<a rel=\"shadowbox[simpleMe];options={counterType:'skip',continuous:true,animSequence:'sync'}\" href=\"[b]http://www.saosin.com/[/b]\" title=\"[b]Saosin[/b]\"><img src=\"[b]http://i286.photobucket.com/albums/ll105/LovelyLay05/SAOSIN.jpg[/b]\" width=\"87px\" height=\"75px\" alt=\"tax\"></a>"+ "<a rel=\"shadowbox[simpleMe];options={counterType:'skip',continuous:true,animSequence:'sync'}\" href=\"[b]http://tokiohotel.pop24.de/tokiohotel2/index2_us.php[/b]\" title=\"[b]Tokio Hotel[/b]\"><img src=\"[b]http://theftalk.com/img/avatars/av9/82932.jpg[/b]\" width=\"86px\" height=\"75px\" alt=\"tax\"></a>"+ "<a rel=\"shadowbox[simpleMe];options={counterType:'skip',continuous:true,animSequence:'sync'}\" href=\"[b]http://www.allamericanrejects.com/[/b]\" title=\"[b]The All American Rejects[/b]\"><img src=\"[b]http://i284.photobucket.com/albums/ll7/knight_frost/band%20pic/all-american-rejects.jpg[/b]\" width=\"86px\" height=\"75px\" alt=\"tax\"></a>"+ "<a rel=\"shadowbox[simpleMe];options={counterType:'skip',continuous:true,animSequence:'sync'}\" href=\"[b]http://www.fmstatic.com/[/b]\" title=\"[b]FM Static[/b]\"><img src=\"[b]http://i254.photobucket.com/albums/hh120/joshlewie/fm.jpg[/b]\" width=\"87px\" height=\"75px\" alt=\"tax\"></a>"+ "<a rel=\"shadowbox[simpleMe];options={counterType:'skip',continuous:true,animSequence:'sync'}\" href=\"[b]http://www.theused801.com/[/b]\" title=\"[b]The Used[/b]\"><img src=\"[b]http://i102.photobucket.com/albums/m94/igotplayed75181/myspace/TUsed.jpg[/b]\" width=\"86px\" height=\"75px\" alt=\"tax\"></a><br><br><a rel=\"shadowbox\" class=\"option\" title=\"My Album\" href=\"http://www.friendster.com/viewphotos.php?a=0&uid=[b]Your id[/b]\"><b>View All Albums</b></a><br><br></center>"; document.getElementById('content_1').style.height='250'; document.getElementById('content_1').innerHTML = "<table width='540'><tr><td align='center'>"+tax+"</td></tr></table>"; });[/spoiler] i just combined it just edit those bold parts and paste it to your js file [b]note[/b] you can add more in that slide, you can also make it a plain, for eg. a plain for images slide screenshot [img]http://img214.imageshack.us/img214/9668/96583244hm2.png[/img] just modify on the script by adding [b]rel=\" shadowbox\" [/b] attributes preview [url=http://profiles.friendster.com/62346457]Click Everything[/url] (click all [b]cp buttons[/b], [b]Post a Comment | View All[/b], [b]all images[/b] etc.) credits [b]Shadowbox.js[/b] [b]Michael J. I. Jackson[/b]

Last edited by simpleMe (2008-11-20 21:37:55)