PDA

View Full Version : Shadowbox Media Viewer



meej
25 Jan 2008, 1:07 AM
Hello all,

I just posted a media viewer application that can sit on top of the Ext framework (similar to Lightbox, Lightwindow, etc.) on my website. It has an abstraction layer that enables it to use Ext, YUI, or any other library as a base. Please check it out and let me know what you think.

http://mjijackson.com/2008/01/22/shadowbox-js-media-viewer-1-0-beta/

Thanks,

Michael

aconran
25 Jan 2008, 1:18 AM
Michael -

That's an impressive implementation! Thanks for your contribution to the community. :D

evant
25 Jan 2008, 2:03 AM
Wow, that is awesome, love the port, impressive stuff!

DigitalSkyline
25 Jan 2008, 2:21 PM
Micheal thats cool, but your blog seems to be down... (must be getting hammered from ajaxian)

... well scrap that, loads just fine in FF, just not in IE

provagino
26 Jan 2008, 10:56 AM
new media viewer application with EXT adapter
http://mjijackson.com/shadowbox
by Michael J. I. Jackson

DigitalSkyline
26 Jan 2008, 1:32 PM
http://extjs.com/forum/showthread.php?t=24200

al_capone
31 Jan 2008, 11:22 PM
Your work is very, very impressive.
Thanks for sharing.

al_capone
1 Feb 2008, 3:12 AM
I want to implement your excellent Shadowbox into my desktop app.
I use Ext.DataView component.
But after dblclick on image who I want display error "O.addEventListener is not a function" occured

My code:


localImagesDataView.on(
'dblclick',
function() {
var selectedLocalImageNode = localImagesDataView.getSelectedNodes();
selectedLocalImageNode = selectedLocalImageNode[0];
Shadowbox.init();
Shadowbox.open('getimage?type=image&imageID='+selectedLocalImageNode.id);
},
this
);

All libraries I have included correctly.

Where is the problem?
Anybody know?
Thanks

Webnet
4 Feb 2008, 5:40 AM
I'm experiencing some technical difficulties with the software. We have it loaded on our site with the ext module and in IE we're getting an error that the page cannot be loaded, and it crashes.

When we comment out shadowbox the error disappears. For now, I'm changing it so that it won't use shadowbox if in IE. But if you'd like to debug this, we'd be happy to leave it up for you to debug your script as we'd like to make it a permanent part of our frequently used libraries.

damien
5 Feb 2008, 4:57 AM
I have included the shadowbox files. checked if they are included in firefox. I try to open shadow box with the hyperlink method, doesnt work. I tried to open shadowbox with the direct shadowbox.open(image_url); doesnt work. I get no errors. somebody has got this working with extjs? thanks

stumpy_uk
20 Feb 2008, 3:17 PM
No I am in the same space can get it working with YUI but want to get it working with EXT, any help is appeciated.

mystix
20 Feb 2008, 7:14 PM
i downloaded the full Shadowbox distribution (including the sample gallery) (http://mjijackson.com/shadowbox/download.php) just to play around with it. works flawlessly.

here's my include order


<link rel="stylesheet" type="text/css" href="src/css/ext/ext-all.css">
<link rel="stylesheet" type="text/css" href="src/css/shadowbox.css">

<script type="text/javascript" src="src/js/lib/ext-base.js"></script>
<script type="text/javascript" src="src/js/lib/ext-all-debug.js"></script>
<script type="text/javascript" src="src/js/adapter/shadowbox-ext.js"></script>
<script type="text/javascript" src="src/js/shadowbox.js"></script>


notes:

change the path references to ext-base.js, ext-all-debug.js and ext-all.css to fit your dev environment.
note that, unless you're running @hendricd's excellent override, you'll also need to be running the examples off a webserver.

stumpy_uk
21 Feb 2008, 3:38 PM
Mystix,

I did that but how do you call it in the EXT world, I tried the standard


<a rel="shadowbox;width=600;height=450" class="option" title="Alien" href="gallery/alien.flv">Flash Video</a>

obviously calling the initialise within my EXT.ONREADY function but it just opens the actual application and not in a window etc.

Cheers

Stumpy

mystix
21 Feb 2008, 6:29 PM
@stumpy_uk, drop this barebones example into the base shadowbox directory (it works as expected for me):


<html>
<head>
<title>ExtJS + Shadowbox.js Example</title>

<link rel="stylesheet" href="src/css/ext/ext-all.css">
<link rel="stylesheet" href="src/css/shadowbox.css">

<script src="src/js/lib/ext-base.js"></script>
<script src="src/js/lib/ext-all-debug.js"></script>
<script src="src/js/adapter/shadowbox-ext.js"></script>
<script src="src/js/shadowbox.js"></script>
<script>
Ext.onReady(function() {
Shadowbox.init();
});
</script>
</head>
<body>
<a rel="shadowbox;width=600;height=450" href="gallery/alien.flv">Flash Video</a>
</body>
</html>


(same old) notes:

change the path references to ext-base.js, ext-all-debug.js and ext-all.css to fit your dev environment.
note that, unless you're running @hendricd's excellent override (http://extjs.com/forum/showthread.php?t=10672), you'll also need to be running the examples off a webserver.

stumpy_uk
25 Feb 2008, 2:57 PM
mystix,

Sorry m8, I didn't explain myself, I can get it working with a single page as shown below but the moment i put the link in a viewport or on a page brought in on a tab / iframe etc it just opens as a new link each time. I just dont know why it works on a single page and not when using it in other examples and would love to overcome this one.

Cheers

Stumpy

mystix
26 Feb 2008, 5:34 AM
@stumpy_uk,

try this drop-in example


<html>
<head>
<title>Ext + Shadowbox.js + Dynamically-added Links Example</title>
<link rel="stylesheet" href="src/css/ext/css/ext-all.css">
<link rel="stylesheet" href="src/css/shadowbox.css">

<script src="src/js/lib/ext-base.js"></script>
<script src="src/js/lib/ext-all-debug.js"></script>
<script src="src/js/adapter/shadowbox-ext.js"></script>
<script src="src/js/shadowbox.js"></script>
<script>
Ext.onReady(function() {
Shadowbox.init();

var counter = 0;
var images = [
'gallery/aston_martin/vanquish.jpg',
'gallery/greatwall.jpg',
'gallery/aston_martin/vantage.jpg',
'gallery/aston_martin/db9.jpg'
];

function addNewLink(btn, e) {
var newLink = Ext.DomHelper.append(document.body, String.format('<a rel="shadowbox" href="{0}">View Image</a>', images[counter++ % 4]), true);
Ext.DomHelper.append(newLink, '<br/><br/>');
Shadowbox.setup([newLink.dom]); // setup newly added link for use with Shadowbox
}

new Ext.Button({
id: 'testBtn',
renderTo: document.body,
text: 'Click to add a new link...',
handler: addNewLink
});
});
</script>
</head>
<body>
<a rel="shadowbox;width=600;height=450" href="gallery/alien.flv">Flash Video</a><br/><br/>
</body>
</html>

Dumbledore
1 Mar 2008, 9:19 AM
curretly i play around with the dataview and the shadowbox. I know that must call Shadowbox.setup() for the images in the dataview. But where must i placed the call? Can i placed the Call in the template?


var store = new Ext.data.JsonStore({
url: 'get-images.php',
root: 'images',
fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date', dateFormat:'timestamp'}]
});
store.load();

var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="thumb-wrap" id="{name}">',
'<div class="thumb"><img src="{url}" title="{name}"></div>',
'<span class="x-editable">{shortName}</span></div>',
'</tpl>',
'<div class="x-clear"></div>' // How can i placed the Shadowbox.setup here?
);

var panel = new Ext.Panel({
id:'images-view',
frame:true,
width:535,
autoHeight:true,
collapsible:true,
layout:'fit',
title:'Simple DataView with editable labels, multi and drag selection',

items: new Ext.DataView({
store: store,
tpl: tpl,
autoHeight:true,
multiSelect: true,
overClass:'x-view-over',
itemSelector:'div.thumb-wrap',
emptyText: 'No images to display',

prepareData: function(data){
data.shortName = Ext.util.Format.ellipsis(data.name, 15);
data.sizeString = Ext.util.Format.fileSize(data.size);
data.dateString = data.lastmod.format("m/d/Y g:i a");
return data;
}
})
});

stumpy_uk
1 Mar 2008, 10:52 AM
@mystix,

Cheers for all that I still got stuck when trying to do it in a viewport and the incosistency of the results, however I have sorted out a solution as I used Doug's MediaPanel and created a MediaWindow using that which does the job.

Thanks for all your help wouldn't have got anywhere without your assistance.

Cheers

Stumpy..

mcaskey
28 May 2008, 9:29 AM
I need to create or find a replacement for lightwindow on my site.

Lightwindow works just like most other light* scripts, aside from one BIG difference:

It scans the page for links with class="lightwindow" and set everything up on page load (or DOM ready or something like that).

Then, when you click a link to either on-page hidden content, OR EVEN an external page.html, it launches the contents of the target right on the page in a floating layer/window.

I like Ext for its style and LOTS of examples, but I'm not seeing any solution for doing this kind of classname-based behavior.

Can anyone help me with this? Am I missing something?

mystix
28 May 2008, 9:37 AM
Then you probably won't need ShadowBox or any Light* clones.

an Ext.Window with a modal:true config should suffice for you.
using Ext, set a click listener on the document.body and delegate to all elements with class lightwindow (or something to that tune), and fire up an Ext.Window in the click listener's callback.

p.s. i don't see any difference between ShadowBox and lightwindow, functionality-wise.
ShadowBox wins (for me) because it provides adapters.
try the example in post #16 above.

mcaskey
28 May 2008, 11:28 AM
Thanks for replying to my post! I have never used Ext before, so this will take some learning. Any advice you might give to help me speed up the learning curve would be great!

I like your suggestion of just using the Ext.Window and not adding any other lightwindow things to the mix.

Are there some examples in the forums or how-to that I can follow to piece this together?

mcaskey
28 May 2008, 4:03 PM
Thanks again for helping me with this. Ok, so it looks like there are basically three things I need to do:

Ext.Window with a modal:true config
set a click listener on the document.body and delegate to all elements with class lightwindow
fire up an Ext.Window in the click listener's callbackI know you don't have all day to hold the hands of every Ext newbie, but could you help me get in the right direction with doing these three things with Ext?

Code-wise, with prototype, I might start #2 with something like just getting the links with the lightwindow class and putting them into an array, like... $$("a.lightwindow", and then ... well I'm not sure. lol

Again, any help you could send my way would be hugely appreciated!

mystix
28 May 2008, 5:52 PM
just a short code snippet to get you started (dig around in the API docs for what each function call means)


Ext.onReady(function() {
Ext.getBody().on('click', function(eventObject, domObject, listenerOptions) {
console.debug(eventObject, domObject, listenerOptions); // log callback function params to Firebug
}, this, {delegate: '.someCssClassToListenFor'});
});


note 1: you'll need to run this in FF with Firebug installed.
note 2: for further help, try the 1.x / 2.x Help Forums.

have fun ;)

damien
13 Jun 2008, 3:21 AM
I have shadowbox working in FF but in IE the shadowbox renders wrong. How can i bind the shadowbox to the viewport? The problem is dat the shadowbox in IE is shown behind the mask and below off the webpage. It is not centered and in front off the mask. I have a viewport
browser = new Ext.Viewport({
id:'browser'
});

Is it possible that this is the parent for the shadowbox? I hope you understand my problem, sorry for the bad englisch.

Scorpie
18 Jun 2008, 10:41 PM
Excellent piece of software, i`m certainly gonna use it for a image gallery!

meej
1 Jul 2008, 11:01 AM
Hi all. Just wanted to let you know that version 2.0 is out. http://www.mjijackson.com/shadowbox

mystix
1 Jul 2008, 11:24 AM
Hi all. Just wanted to let you know that version 2.0 is out. http://www.mjijackson.com/shadowbox

kudos! =D>

wm003
1 Jul 2008, 11:55 AM
=P~ Awesome stuff! looks like the best boxjs these days!=D>

warlord0
16 Aug 2008, 9:53 AM
I've set up shadowbox in my app and it all works just fine and looks great in FF. But in IE I get an "Invalid Argument" error at line 2675 in ext-all-debug.js as shown:


setStyle : function(prop, value){
if(typeof prop == "string"){
var camel;
if(!(camel = propCache[prop])){
camel = propCache[prop] = prop.replace(camelRe, camelFn);
}
if(camel == 'opacity') {
this.setOpacity(value);
}else{
this.dom.style[camel] = value;
}
}else{
for(var style in prop){
if(typeof prop[style] != "function"){
this.setStyle(style, prop[style]);
}
}
}
return this;
},

So I copied the barebones sample from above (needed to add in skin and language settings) and still it errors at the same place.

Barebones page



<html>
<head>
<title>ExtJS + Shadowbox.js Example</title>

<link rel="stylesheet" href="/ext-2.2/src/css/ext/ext-all.css">
<link rel="stylesheet" href="css/shadowbox.css">

<script type="text/javascript" src="/ext-2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/ext-2.2/ext-all-debug.js"></script>
<script type="text/javascript" src="adapter/shadowbox-ext.js"></script>
<script type="text/javascript" src="shadowbox.js"></script>

<script type="text/javascript">
/*<![CDATA[*/
Shadowbox.loadSkin('classic', 'skin');
Shadowbox.loadLanguage('en', 'lang');
Shadowbox.loadPlayer(['img'], 'player');

Ext.onReady(function() {
Shadowbox.init();
});
/*]]>*/
</script>
</head>
<body>
<a rel="shadowbox" href="mytestimage.jpg">Image</a>
</body>
</html>



Anyone got a clue?

mirage
3 Feb 2009, 3:27 PM
I've got the same issue now. Has there been any resolution to this bug with IE? Some secret sauce required to make it go?

Thanks much,
Juergen

mirage
3 Feb 2009, 4:56 PM
Ok, nailed it.

Let's just say sb2's skinning approach is not so skinny...

If you alter the default template or remove borders in the css or hide elements or set their height to 0px and such niceties, IE will return Nan for various calculations, wreaking havoc in the setDimensions() function.

Moral: IE still sucks. And SB could use a few x-plat sanity checks.

Still my favorite lightbox tho'.

Juergen

cnelissen
16 Apr 2009, 3:04 PM
I recently ran into the same issue, and I fixed it by adding a line to the skin.css file.

In /skin/class/skin.css add/alter the following declaration:

#shadowbox_title, #shadowbox_info {
border: 0px solid;
}

Works on all my sites in IE8.