Indexhibit Support

Hi,
I'm having some trouble displaying video and images together in the same exhibition.

1. First of all, the title of the videos doesn't show up.

2. When clicking on any of the images the videos appear above the pop-up image. (I use Thickbox)

3. Is there anyway I can place the thumbnails on top of the video clips?

Is it possible to use Thickbox and HTML code in the same exhibit?

website:
http://www.martinadolfsson.com/index.php?/portfolio/new-work/

Thanks for your help!
/Martin!

Hello

1. what title? I can't see a title... Not even in your source code...
2. that's a thickbox bug. There are workarounds for this but not sure what actually works crossbrowser...
3. yes there is. Just got to indulge into html or php ;-)
4. Yes there is... Thickbox is html - no magic here... You can copy the code from your source code switch off Proccess HTML and off you go...

Hi Arsondpi,
Thanks for your quick reply. The title should be stills for Sony Ericsson. Does that usually show up underneath the video frame?

So I added the code that from the Ina Code blog but I'm not sure where to insert the "wmode=”transparent”" tag?

Thanks
/Martin!

I've been trying to find a solution to my problem the entire day and don't get anywhere...
According to Ina Code Blog by adding the following code I should be able to get rid of the problem:

1. Place the following code in your object parameters:
2. <param name=‚Äùwmode‚Äù value=‚Äùtransparent‚Äù></param>
3. Also add this code to <embed> tag:

wmode=”transparent”

This is what my code looks like in exhibits window, what am I doing wrong here?

1. <div style="float: left; width: 30%;">
2. <object classid='clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B' codebase='http://www.apple.com/qtactivex/qtplugin.cab' width='320' height='280'><param name='src' value='http://martinadolfsson.com/files/martinadolfssonnyday_v2.mov' wmode=‚Äùtransparent‚Äù/><param name='controller' value='true' /><param name='autoplay' value='false' /><param name=‚Äùwmode‚Äù value=‚Äùtransparent‚Äù></param><!--[if !IE]>--><object type='video/quicktime' data='http://martinadolfsson.com/files/martinadolfssonnyday_v2.mov' width='320' height='280'><param name='autoplay' value='false' /><param name='controller' value='true' /><param name=‚Äùwmode‚Äù value=‚Äùtransparent‚Äù></param></object><!--<![endif]--></object>

Thanks for your help!
/Martin!

doulble post - cooking and typing at the same time... 'scusé moi.

As it was obvious in the other thread this is a thickbox bug and has nothing to do with indexhibit.

What I can suggest is this:
movies open up with thickbox either using text or image links!!!

....switch html proccess to off and use the code below...

1. <a href="#TB_inline?inlineId=video&height=275&width=320" class="thickbox" title="YOUR VIDEO TITLE">TEXT OR AN IMAGE TAG THAT MAKES THE VISITOR TO CLICK TO WATCH THE MOVIE</a>
2. <div id = "video" style = "display: none;">
3. <object classid='clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B' codebase='http://www.apple.com/qtactivex/qtplugin.cab' width='320' height='280'><param name='src' value='http://martinadolfsson.com/files/martinadolfssonnyday_v2.mov' /><param name='controller' value='true' /><param name='autoplay' value='false' /><!--[if !IE]>--><object type='video/quicktime' data='http://martinadolfsson.com/files/martinadolfssonnyday_v2.mov' width='320' height='280'><param name='autoplay' value='false' /><param name='controller' value='true' /></object><!--<![endif]--></object>
4. </div>

So first you have the link that triggers thickbox and then you have the code encapsulated in a div with a display:none; attribute... the object code is the same as the one you get from the indexibit uploader...

I know you know how to do the rest... ;-)

Well I'm getting there, slowly but surely.
I think you're right this is a better solution. The problem now is that the videos doesn't show up at all. Only the title box appears.
This is what the code looks like right now:

1. <a href="#TB_inline?inlineId=video&height=275&width=320" class="thickbox" title="Video compiled by stills
2. Client: Sony Ericsson"><img src ="http://www.martinadolfsson.com/files/NYdaystart.jpg"></a>
3. <div id = "video" style = "display: none;">
4. <object classid='clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B' codebase='http://www.apple.com/qtactivex/qtplugin.cab' width='320' height='260'><param name='src' value='http://martinadolfsson.com/files/martinadolfssonnyday_v2.mov' /><param name='controller' value='true' /><param name='autoplay' value='true' /><!--[if !IE]>--><object type='video/quicktime' data='http://martinadolfsson.com/files/martinadolfssonnyday_v2.mov' width='320' height='260'><param name='autoplay' value='true' /><param name='controller' value='true' /></object><!--<![endif]--></object>
5. </div>

Any ideas?

/Martin!

this is funny... it works when your source code is on a local html file but not online...

Cmon' man...

1.  title="Video compiled by stills<br>Client: Sony Ericsson">

...???

First get your tags straight (img and br tags need a /> in the end)
Second you can't have a br tag in the title of your thickbox...
If you want to add more information about the movies maybe you should think about the iframed thickbox code (I gave you Inline content thickbox code)... Search at the thickbox site for that.

Run the About / Clients exhibit through the validator and you'll see what sort of basic mistakes you should fix....
;-)

I was playing around with the title and simply forgot to remove the tags before I hit the bed yesterday :)
I will clean up the tags on the rest of the website as soon as I get the thickbox issue to start working.

Thanks for your help
/Martin!

So, I got it to work for a while but the video was displayed in the left corner beneath the gray bar. However once I changed the attribute in order to correct that it stop working. I decided to show the video with flash instead of QT. Once again it WORKED for a while.

This is what the code looks like now:

1. <a title="Video compiled by stills Client: Sony Ericsson" class="thickbox" href="#TB_inline?inlineId=video&height=200&width=300" >
2. <img src="http://www.martinadolfsson.com/files/Beachtstart.jpg" style="float: left;"/></a>
3. <div id="video">
4. <object id="flowplayer" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="300" height="200">
5. <param name="allowfullscreen" value="true" />
6. <param name="allowscriptaccess" value="always" />
7. <param name="movie" value="http://martinadolfsson.com/files/flowplayer-3.1.1.swf" />
8. <param name="flashvars" value='config={"clip":"http://martinadolfsson.com/files/martinadolfsson_NY_day.flv"}' />
9. </object>
10. </div>

When my friend posts it on his server it works perfectly:

http://www.jonarne.no/martin/

Any thoughts?
/Martin!

Never mind the previous post. I worked it out.

/M

Hmm... I can't quite get this to work.

this is the code I'm working with
I'm sorry this is a screen shot, arg - is there some trick to using the Code tag? It wont show up in my preview. I know this isn't an ideal way to look at code. Thanks for your patience.

the website I'm referring to: http://gorociao.com/dev/index.php?/entertainment/bet-dewmocracy/
is here

looking at past posts it seems I have to insert some sort of CSS to get "CLICK TO LAUNCH" to exist on the next line down from Design, Lead Animation...

1) First of all your code won't work because you're using the NoThumbsWithCaptions exhibition. The code above works with the Thickbox exhibition cause it activates jquery.thickbox.js
Of course you can use any exhibition you want and call jquery.thickbox.js in your document. Refer to HTML/CSS basics on this or ask a friend.

2) Either keep HTML Proccess ON and keep your code all in one line with no gaps and breaks and then add paragraph breaks or have HTML Process OFF (like now) and do something like

1. <p>Design, Lead Animation, Art Direction</p>
2. <p><a href="#TB_inline?inlineId=video&height=720&width=502" class="thic...</p>

Of course that's a just one way of doing it, so better refer to HTML/CSS basics for more references on line breaks, paragraphs etc.

Hi.
I believe this script should call jquery.thickbox.js

see here

however i'm confused if I'm putting this script in the right place, or should I somehow be working in my index.php file? Or if there is some sort of conflict because I have HTML processing off?

sorry and thanks again!

...cause the thickbox.js file isn't here. It's here.

so change the code to:

1. <script type="text/javascript" src="http://gorociao.com/dev/ndxz-studio/site/js/jquery.thickbox.js"></script>

If that won't work then place it in your header or activate the thickbox plugin and insert the images via code. If that won't work as well then I don't know and it's my fault (‚Üêinside joke)

But, it is your fault.

;)

thanks guys.

I don't think it's working.
just to be absolutely certain I'll post a screen shot of the index.php file (the on in site>sample>index.php) and what im looking at on the back end

code
&
backend

otherwise on to inserting the images by code.

also these errors are what im seeing in firebug (maybe helpful?)
firebug

The thickbox plugin requires jquery, thickbox.js, thickbox.css and the actual code.
It even needs a path for the loader.

This is what I've worked with

1. <script type="text/javascript" src="http://gorociao.com/dev/ndxz-studio/site/js/jquery.js"></script>
2. <script type="text/javascript" src="http://gorociao.com/dev/ndxz-studio/site/js/jquery.thickbox.js"></script>
3. <script type="text/javascript"> var tb_pathToImage = "http://gorociao.com/dev/ndxz-studio/site/img/loadingAnimation-whbg.gif";</script>
4. <style type="text/css" media="screen">@import "http://gorociao.com/dev/ndxz-studio/site/css/jquery.thickbox.css";</style>
5. <p>Lead Design, Lead Animation, Art Direction
6. <a href="#TB_inline?inlineId=video&height=502&width=720" class="thickbox" title="DEWMOCRACY"><em>CLICK TO LAUNCH</em></a>
7. <div id="video" style="display: none;">
8. <object classid='clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B' codebase='http://www.apple.com/qtactivex/qtplugin.cab' width='720' height='502'>
9. <param name='src' value='http://gorociao.com/movies/dew.mov' />
10. <param name='controller' value='true' />
11. <param name='autoplay' value='false' />
12. <!--[if !IE]>-->
13. <object type='video/quicktime' data='http://gorociao.com/movies/dew.mov' width='720' height='502'><param name='autoplay' value='false' />
14. <param name='controller' value='true' /></object><!--<![endif]--></object>
15.  </div></p>

But even that wont work...
The js file is customised to work tightly with the plugin - loadingAnim is something defined in the plugin and that's why the javascript action stops there...
I can either think of calling another non custom thickbox.js file or use the native thickbox exhibit and insert the images manually.

Do some research on this - this query has little to do with indexhibit and more to do with actual coding knowledge.I hope I helped a tiny bit... ;-)

ps. since this is caused by the customised js, it's Vaskas fault and not mine.

Thanks again arsondpi! (really!)

Just wanted to post my progress.

I'm planning on inserting the images in manually - however, just getting thickbox to launch a quicktime from a text-link has proven difficult.

I'm going to do some more research on this - and also about lightbox, which supports quicktimes. Just thought I'd post my progress.

After looking on the thickbox forum - seems like the key was to put a quicktime file in an html file - and then link up to the html file. ripped code from here
This worked! however! Because I'm trying to direct a link to open the thickbox with an .mov - I *think* it's reading the thickbox plugin twice? Once in my code, once as I've selected Thickbox on the right drop-down.

page I'm trying this on

backend

Did anybody even check if Thickbox can display a movie? To my knowledge it does not.

Use Shadowbox...but it's some work to get it to work. Or even Fancybox.

Vaska- that's what I was going to try next. Googling around for indexhibit + fancybox, shadowbox or Lightwindow - not finding too much. So if you do know of some handy link, please let me know.

No Thickbox doesn't support quicktimes - the workaround is to put a quicktime in an html file and then link up to that html file. (see post above). Still can't get it to run perfectly.

I've made it work (but it's my fault).
gorociao I think your site is heavily customised.
I mean: query.js+thickbox.js+prototype.js+scriptaculous.js+lightwindow.js
And some strange css rules like p {position: fixed;}....
All this may create conflicts... and it may not.

You can wait for the new version for many tricks like these... or play on!!! ;-)

wow thanks - going to look at this more in depth tonight and try to imitate. If I could buy you a beer, I would!

Can't wait for the next version of indexhibit. But I gotta get moving on this site - so I guess I'll play on.

thanks again.

oh and re: "I just added some stupid and dirty css rules to get rid of scrollbars..."

I assume you mean you modified the site's css file, not thickbox's css?