Unable to set up ShadowBox

[kam2701]

Im having a bit of difficulty setting Shadow Box up.

I downloaded the script with the settings: Adapter : Basic : Lang: Eng Player: img


The usage instructions say I need other files.

Usage instructions:

<script type="text/javascript" src="shadowbox-base.js"></script>
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">

Shadowbox.loadSkin('classic', 'my/skin/dir'); // use the "classic" skin
Shadowbox.loadLanguage('en', 'my/lang/dir'); // use the English language
Shadowbox.loadPlayer(['img', 'qt'], 'my/player/dir'); // use img and qt players

window.onload = Shadowbox.init;

</script>


If I was to be following those usage instructions and using the downloaded script wouldn't I be missing the files :

shadowbox-base.js ?
language file
skin
player ?

Is there another way to set this up. Can somebody shed some light on this .


Thanks for your help.

[mjijackson]

I apologize for the mess it is to set up Shadowbox right now. I'll be making it much easier to do in the coming few weeks. For right now, you must download the entire distribution (or at least the code files). They contain they other files that you need (the skin files) to set it up.

[kam2701]

Thanks for your help.


Ill download the entire distribution.


Dan

[kam2701]

Hi i've downloaded the entire distribution, put the files in my scripts folder but I can't get it to work.
When I click on the thumbnail the web browser IE7 FF3 doesn't use  shadowbox.


The site is http://www.boilerreplacement.net/boiler_gallery

HTML :




Javascript:

</script>


<script type="text/javascript" src="assets/scripts/shadowbox-base.js"></script>
<script type="text/javascript" src="assets/scripts/shadowbox.js"></script>
<script type="text/javascript">

Shadowbox.loadSkin('classic', 'assets/scripts/skin.js'); // use the "classic" skin
Shadowbox.loadLanguage('en', 'assets/scripts/shadowbox-en.js'); // use the English language
Shadowbox.loadPlayer(['img' , 'qt'], 'assets/scripts/shadowbox-img.js'); // use img and qt players

window.onload = Shadowbox.init;

</script>



I have the files in my scripts folder /boilerreplacement/assets/scripts :

skin.js

shadowbox.js

shadowbox-img.js

shadowbox-en.js

shadowbox-base.js

icons in folder

icons out of folder


In the Javascript it says to use img and qt . I only included the img file in my scripts folder. Should  I alter this?

Is the problem that I took the png files out of their icons folder ?
I included the pngs in the same folder as skins .js .  Should I have done  this?

[Wizzud]

Check your syntax on the Shadowbox.load....() calls.
2 arguments are required: identifier, and folder
For folder you are providing filepath!

[Wesss]

Figured I'd post in this thread as well since it most accurately describes my problem -- I'm having absolutely no luck setting up Shadowbox 2.0. Even after reading the instructions multiple times, I'm still not entirely clear what I'm supposed to be doing. Should I be taking the files from the build folder or the src folder, or are both required? Do the js files depend upon some specific directory structure that I should be taking extra care to preserve? I admit that I likely know way less about javascript than perhaps Shadowbox's intended audience, but some simple step-by-step installation instructions would be useful.

But I'm also experiencing some pretty weird stuff. Since MJ's sample page worked when I downloaded and unzipped the full install, I moved it to a different directory and changed all of the directory links on the page accordingly -- without touching the core files or anything else -- to see if I was pasting the code in incomplete fashion. Predictably (but not really in keeping with any sensible explanation I've devised yet...) it broke. But then the kicker came when I changed all of the directory references back in the old file -- I just held down Ctrl+Z in Notepad++ until the file was back to its original form -- and moved it back to its original place, as it no longer worked there either! Even after I cleared the cache and refreshed. I'm completely lost.

That said, I was trying all of this with the base adapter -- when I failed to get Shadowbox 2.0 working, I found a version of 1.0 and had similar issues with that until I switched the adapter (without changing anything else). Should the adapter be making that much of a difference? And are there specific places I should be getting the adapter (or specific directories in which they should be) in order to ensure compatibility with Shadowbox?

Any specific help, well-intentioned responses, or comforting pats on the back will be greatly appreciated. :)

[Wizzud]

Firstly, use Firefox with the Firebug, Web Developer, and EditCSS extensions installed! These are an absolute must for any web developer!
Secondly, this post might help.

[Wesss]

Thanks for the response and the link! Unfortunately I haven't had any luck following these instructions either -- I take it the player files, skinning, and additional images make these step-by-step instructions outdated in some respects?

And I did install Firebug after reading some of the posts on this board, though I haven't found it to be the least bit helpful -- I don't have any experience with javascript or javascripting programs, so I haven't the slightest idea how to use it to pinpoint my issues.

[Wizzud]

Yes, I should have read all the way through that post before giving you the link - it's aimed at a version distribution, not v2. Sorry.
I have to say, though, that the general principles should still hold true.
Basically, if you have a demo working, then you have all the information you need to decide where and how to restructure your included files - simply look at the working page's links. Otherwise the same cautions apply as with any other web files (eg. if you have a stylesheet with background images, check the paths are still valid after moving things around).

One more piece of advice : don't play with the distribution at all. Download it, and run it, and it will work! Then make a copy of it and play with that! Then if something doesn't work you can always compare the original with the tinkered and that may highlight a problem.

[Wesss]

Thanks again for your help, Wiz! After taking your advice and just unzipping the build without doing anything, noticing it working fine, and then suddenly noticing it breaking -- without me doing anything -- I think I've figured out the issue: IETab! For some reason, going back and forth with IETab eventually results in the javascript not working, but things are fine if I restart FF3 again (or preview the page in IE from a separate window). I don't seem to be having this problem with Shadowbox 1.0, though, which is... odd.

So I guess in keeping with this thread, my advice would be for folks to make absolutely sure that IETab isn't mucking something up in the background!

Anyway, now that that issue's been identified, I'm only having one other problem. I've modified the skin and css files so that the titles slide down from the bottom rather than sliding up from the top -- no problems with that; I found the * -1 multiplier and rearranged the div tags so that all seems to be in order. But whereas in v1.0 I used -- height: 100% -- for #shadowbox_title to get the element to fit itself to the captions (sometimes I have rather lengthy ones), that doing that in v2.0 causes the script to not work in IE. Still works fine in FF3, though. Any ideas about that?

[Wizzud]

Umm ... if you set shadowbox_title { height:100%; }, what is the height 100% of? ... the height of the parent element? What is that parent element?

Working with undefined/self-expanding heights in title and info is tricky. Shadowbox tends to rely on the heights being defined, purely because there is no simple (cross-browser) way of calculating Shadowbox's dimensions to fit (and centre in) the viewport unless the title/info heights are fixed.

[Wesss]

Ah, I see -- that makes sense. Thanks for the explanation! In light of that, I've "resolved" the difficulty -- which stemmed from there being a bunch of blank space below the title box if I made the height fairly tall -- by shifting the info/navigation controls to the top of the image.

Anyway, thanks again for all of your assistance! :)