Shadowbox Take 2 – screencast and demo (approx 13minutes)
ShadowBox – advanced integration
Developers Site: http://mjijackson.com/shadowbox/ (no relation to the singer :) )
So what ?
This readme covers the hard coded integration for ShadowBox and to have this available in all your pages, if you require :)
Here you can see the demo page with the finished result. This also works with Blocks, Accordion and Carousel (well partially :( ) and even Pluskit import.. how cool is that!
Integrating to RapidWeaver!
After my first try, I though I needed to do something a bit more integrated so it is used on all pages (thanks to seemore for the hint). just to recap some basics, shadowbox will use the Mootools 1.11 framework which should keep things tidy with all the other Mootools related plugins that are produced by YourHead.
I will walk though all this in the screencast …. so please watch (feel free to pause at any time) read through compare notes and what is actually happening on the screencast and then finally you can use this in your Theme of choice :)
First of all
- Duplicate your Theme (Ctrl- Click Duplicate) and give it a name
- download(see below download files in the comments) the files that we are going to add in the Theme contents , add all the files (except the readme) from the Shadowbox folder into the duplicated Theme contents, this includes the javascript, the images and Jeroens FLV player.
Open the Themes.plist in your text editor (I’m using Textmate)
Things to add to the Theme.plist see image below
loading.gif
overlay-85.png
mootools.js
shadowbox-mootools.js
shadowbox.js
shadowbox.css
flvplayer.swf
Figure 1.
Add the javascript Header information following RapidWeaver conventions. This includes the relevant information for your pages to find the mootools, shadowbox javascript and shadowbox css. In addition it also initialises the shadowbox with extra path information to find the images and flvplayer as you can see below.
<script type=“text/javascript” src=“%pathto(mootools.js)%”>script>
<script type=“text/javascript” src=“%pathto(shadowbox-mootools.js)%”>script>
<script type=“text/javascript” src=“%pathto(shadowbox.js)%”>script>
<script type=“text/javascript”>
window.addEvent(‘domready’,function(){
var options = {
loadingImage:‘%pathto(loading.gif)%’,
flvPlayer:‘%pathto(flvplayer.swf)%’,
overlayBgImage:‘%pathto(overlay-85.png)%’,
};
window.addEvent(Shadowbox.init(options));
});
script>
Screenshot of what it should look like
figure 2.
Add the following to find the shadowbox css
rel=“stylesheet” type=“text/css” media=“screen” href=“%pathto(shadowbox.css)%” />
Screenshot again
Figure 3.
-Install the snippets I have created first of all from the download pack
Create a new project or Test Page
- Add the ShadowBox JS Header to the Header Section in the Page Inspector
Looks like we are good to go so lets add a page to our ShadowBox modified Theme and see if it works.
As a note this will work in preview mode and export also.
To call a Shadowbox (without going into too much detail) just add shadowbox to the rel tag. You can see more at the developers site :)
Some examples… it is worth noting you can change the default size at initialisation. Web page content goes full size :)
Figure 4.
Change size of Shadowbox, using a FLV asset
Figure 5.
Hi,
I am trying to learn how to integrate ShadowBox into RapidWeaver (I am an extreme novice) but this tutorial keeps cutting off after 2.54mins. I have tried to use the ReadMe instead but I am stumped as to what RapidWeaver conventions are. Do I put this:
window.addEvent(‘domready’,function(){
var options = {
loadingImage:’%pathto(loading.gif)%’,
flvPlayer:’%pathto(flvplayer.swf)%’,
overlayBgImage:’%pathto(overlay-85.png)%’
};
Shadowbox.init(options);
});
into the Themes.plist ?
Please Help. I am getting very stuck.
Kind regards
Jennifer
Hi Jennifer,
You should not have to work with the code at all AFAIK. Kevin is the SB expert. All the files get put inside the theme and then you add the above referenced index.html master file that is found inside the theme and the plist references to the plist. Code does not go in the plist.
The movie played all the way for me. I think you may have just had a slow load or your internet connection was slow so the play indicator caught up with the leading edge of the download. Let the play site for an extra minute and watch to see if the progress bar for the loading of the movie keeps moving and reached the end. Then you should be able to play it through and have your answers needed to complete your installation
Larry
Hello Jennifer
The movie is hosted on Blip TV where we collate some of our free content so I can probably guess that there was a drop in the connection somewhere.
As for this ShadowBox screencast … this is based on Shadowbox V1, it is now replaced by V2 by the developers. However, I have retrieved the original files [http://supportcasts.com/show_notes/freebies/Shadow2.zip] used to add Shadowbox1 (the readme file is there also , verbatim from what is published on this blog page pretty much)However, they will be removed over time and as such carry no support asides from being a guide.
‘the cast is free as it is a little old and is now superseded , it was also created prior to formation of supportcasts’
Watch the cast carefully and see where the code is placed. However, if you are getting into trouble we can arrange for some professional consultancy (in your time zone) to help get the effect you want. Get in touch with us on our contact form if you want to go down this road and get a quote.
This also depends on the type of Theme you are using as some Themes come loaded with additional javascript that may cause these effects to degrade.
Regards
Kb
Hi Kb…
Can you direct me to instructions for making the “Gallery” function work with Shadowbox. I had no problem getting single images and video to work, but the only instructions I’ve seen for “Gallery” was in your “Shadowbox Revisited” video and all you did there was to add [Test] behind “shadowbox” in the “REL field.
The problem is… there doesn’t seem to be complete instructions… only references form you like this:
“Group the media you want in the same gallery with shadowbox[name_of_gallery] in the rel tag”
WHAT GALLERY… WHERE… HOW?
My images were individually uploaded under the “assets” tab in RW(v4). I have created a folder of images and upload that… didn’t work. Then I create a “Photo album page” and called that… didn’t work. Obviously, there’s more to it, but I’m not sure how to proceed…
Thanks for you help and all the work that you share.
- rick
Hi Rick
Yes, the brackets invoke the gallery function :) so naturally if you want all images to be in the same ‘gallery’ just give them the same gallery name
Regards
Kb
sorry I mean the link ” download ” the files . . .
If you check the comments of this thread you will see the original files are available see above…
I am using Exposureroom – and want to use the shadowbox to show the video in. But I am having trouble knowing which code to place in the URL window because if I put all the embedcode into the URL window it just embed it on the page instead.
Here is the URL code from Exposureroom:
All sorted Henrik ? we have sent email to you :)
Hi
Where can I download the files for this?
Thanks
Mark
I loved your description on how to get ShadowBox working in RapidWeaver (tutorial topic 35640) as well as the matching tutorial. I followed your instructions on editing theme.plist and index.html, and got everything working except .flv videos. Is there something else I have to do besides simply load my .flv file into the assets on the page I want to display it on, and then create a link to it? Nothing happens when I do so. Am I missing something very basic?
Hello
We don’t provide any support to the Free Videos, sorry. However, check on the Shadowbox Forum as Shadowbox has now moved a few versions up from when this video was last recorded. The RealMac forum also covers shadowbox too