Installing for morons :(

classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

Installing for morons :(

DJJoeJoe
Knowing I'll look like exactly what I am, a moron, I need to ask more detail installation instructions. I've been tinkering around html and web pages for a long time, but being 'taught' the way i have my knowledge is full of holes everywhere and some large concepts i can understand while other small issues baffle me. So here it is...

I've added the scripts to the page:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><script type="text/javascript" src="path/to/shadowbox-jquery.js"></script><script type="text/javascript" src="path/to/shadowbox.js"></script> 

etc. All in the head tags blah blah.

Here's where things get interesting, those paths need to directly link to where I have everything, but in the rar file from the site it has multiple redundant copies of the asme files, and other folders like images and such which AREN'T linked to by yours or the sites directions and example script text etc. So how does it find the images, I can gather the overlay image is relatively important along with the rest.

About 'opening a tag', what my brain gathered from you saying that had me pump out this chunk of code below the previous scripts:

 <script> $(document).ready(function(){ // Shadowbox optional Options var options = { counterType: 'skip', continuous: true }; Shadowbox.init(options); )}; </script>

Is that retarded? If you meant that I assume you'd have just typed exactly that and been done with it... so what DID you mean?

Also, what's this gargon about libraries and such, the site says I need adapters and other javascripts from other places, but that's really all it says to do...

Basically, I need the exact chunk of sexy code that makes everything better, and an explaination on what I need to download, if I need these moo-tools or prototype stuff etc.

Thanks for reading, hopefully you're not ready to punch a wall reacting to how dumb I seem. I've added shadowbox to my blog before, but now I'm wanting it on a raw page so things are a bit different then last time (no plugins and such).

Reply | Threaded
Open this post in threaded view
|

Re: Installing for morons :(

leftlink
The installation instructions for lightbox are much better than Shadowbox. See:

http://www.huddletogether.com/projects/lightbox2/#how

Basically the developer of shadowbox assumed that you were already familiar with a javascript library. I know javascript but I haven't used the libraries... when I played with it I got errors too.

So the question is, if you don't currently use a javascript library, do you need to install one and if so what is the order of the include statements for it (actually the <script> tags)?

I don't have an extra hour to spend testing a JS library right now so if I think I might just use a different script if I can't get an answer quickly on this!

-rich
Reply | Threaded
Open this post in threaded view
|

Re: Installing for morons :(

Wizzud
In reply to this post by DJJoeJoe
The distribution includes both source files and minified versions of those source files. the source files enable you to inspect - and change if you wish - the script; the minified files are simply for production use since they provide a smaller file download size - you don't have to use them.
The minified files are in build/; the source files are under src/.
CSS files are also duplicated under src/ and build/, and for the same reason: the src/ versions have all sorts of helpful comments; the build/ versions are compacted for smaller file size.

Use the src/ versions until you are happy with shadowbox!

You have the scripts included in the necessary order - as per http://mjijackson.com/shadowbox/doc/support.html#adapters.

You have used jQuery (good choice) but I would suggest downloading a local copy (http://jquery.com) rather than going to the jquery site to fetch it each time - use the unpacked, unminified version of jQuery until you a happy with everything.

First off, if you are playing with shadowbox, start off with a clear folder, not the one you extracted shadowbox into.
- Into this folder copy flvplayer.swf (from the top level of the distribution).
- Create a /js sub-folder. Copy shadowbox.js into it (from the src/js folder of the distribution) and the relevant adapter (from the src/js/adapter/ folder).
- Create a /css folder, and copy the shadowbox.css into ti (from the src/css folder).
- For the jQuery library itself, place a copy into the /js folder.
- Create an /images folder, and copy the loading.gif and overlay-85.png into it from the images folder in the distribution.

All your js links in head should now point to the /js folder for their files, and the css to the /css folder.

(this is all basic stuff so forgive me!)

If you look at http://mjijackson.com/shadowbox/doc/usage.html#options you will see that loadingImage and overlayBgImage both default to the images/ folder (which is where they are), and that flvplayer.swf defaults to the 'root' folder (which is where it is), so you are good to go.

[ IF you wish to keep shadowbox segregated from everything else on you site, then instead of creating the separate js, css and image folders (above), just create one called shadowbox and copy all the files mentioned above into it; then change your script src paths and css href path in the head section to point to the shadowbox/ folder, and bear in mind that certain options will require changing from their defaults - namely {assetURL:'shadowbox/', loadingImage:'loading.gif', overlayBgImage:'overlay-85.png'} ]

For calling the Shadowbox.init(); function you do need to have a rudimentary grasp of the library being used. For jQuery, you already have the correct syntax for the 'DOM Ready' call. For any other library, the syntax may vary slightly, but basically the DOM Ready call containing the call to Shadowbox.init() needs to come after all other scripts have been included - usually the last thing in the head section.

If you have options to supply to the init() call then construct the options object (as you have for counterType and continuous). If you don't have any options to supply then simply call Shadowbox.init();

As explained in the http://mjijackson.com/shadowbox/doc/usage.html#markup section, you will need to format your link HTML with certain parameters in order for them to be picked up by Shadowbox.

If you need to do anything more, then a rudimentary grasp of javascript is a necessity.

HTH
Combine literacy with curiosity and a whole world of information opens up to you