SE@RCHER
SE@RCHER
Библиотека JAVASCRIPT + CSS Библиотека JAVASCRIPT + CSS Библиотека JAVASCRIPT + CSS
1997
Библиотека JAVASCRIPT + CSS Библиотека JAVASCRIPT + CSS Библиотека JAVASCRIPT + CSSназад на главную страницу - клавиша Esc
Floatbox v3.50 - InstructionsIndex
Basic quick-startThe three steps below are all you need to get floatbox content on your pages. But to get the most out of floatbox and use its more advance features you really should read the rest of these instructions, the options reference, the programmer's API and also check out the demo pages.
InstallationThere are many supporting files included in the floatbox download. They are nearly all needed for correct functioning. Floatbox is modular. It loads its modules and css files on demand as required, but it needs to find these modules and css files in order to do so. It is highly recommended that you keep the floatbox folder intact and not try to separate the components out to different folder locations. If you keep the install folder intact, floatbox will auto-detect its modules, graphics and css locations. If you break up the install into different locations (not recommended), you will need to set the jsModules, cssModules, languages, and graphics paths in the preferences section of floatbox.js, and you will also need to update all the css files with the correct relative paths to the background images. An important part of the download package is the "docs" folder where you will find the instructions (this page), the options reference, the programmer's API reference, and the floatbox license agreement. It is time well spent to familiarize yourself with these items before integrating floatbox on your site.
If you are developing your site on a local file system rather than serving it from a web server, you will need to use relative paths for the two floatbox include lines.
This can be a pain, because the relative paths will be different depending on what level you are at in you folder heirarchy.
If the page you are configuring is in the same folder that contains your floatbox install folder,
remove the first backslashes from the two <head> section includes lines. Like this:
UpgradingUpgrading to a new version of floatbox entails replacing the entire contents of your existing floatbox folder. The javascript modules, css files, graphics and languages can all change between versions and all the components need to be in sync. When you upgrade to a new version, you will need to edit the options section at the top of floatbox.js to set your default preferences if you want your defaults to be different than as shipped. If you are upgrading floatbox from a version prior to v3.50, you will notice a few changes in floatbox's operation and configuration. Previous versions used the rel attribute to activate anchors and to define behaviours such as slideshows. The newer versions of floatbox prefer using the class attribute (class="floatbox") to mark anchors for activation, and use rev options such as doSlideshow and group for setting behaviours. Also, some configuration options have had name changes. Floatbox is fully backward-compatable with the previous version's way of doing things and all the old style markup, functions and options will continue to work without modification.
If you are moving from lytebox to floatbox, you do not need to change the markup of your anchors if you don't want to.
Floatbox will recognize your existing lytebox rel attributes.
However, you will probably want to change your markup to take advantage of the many capabilities and configuration options that can be set.
Doc TypesFloatbox does not support quirks mode. All pages that include floatbox content need to have a valid doctype declaration at the top of the page which will set the browser to render in standards-compliant mode. Note that for IE6, if anything at all appears above the doctype declaration, quirks mode will be set. So please don't put an xml declaration such as <xml version="1.0" encoding="utf-8"?> at the top of your XHMTL 1.0 pages.
Configuring options
Don't overlook reading the options reference.
You'll get the best understanding of floatbox options from there.
Your first stop in configuring floatbox will probably be to edit the options section at the top of floatbox.js to set the default global options the way you like them. Details of the other various option-setting methods follow. (Note that option names and values are case-sensitive.)
Setting options directly on anchors
Probably the most useful of floatboxes options setting techniques is the ability to configure the behaviour of specific anchors.
When running a series of floatboxed items such as a gallery set or a slideshow,
the majority of the options from the clicked anchor will apply globally to all items in the set.
Some other options apply on a per item basis. It should usually be apparent from context which options are per item.
For example, width is per item whereas cornerRadius applies to the whole set.
The proposed HTML5 standard deprecates the anchor's "rev" attribute.
To get a jump on HTML5 compliance, floatbox allows you to place the option information on a "data-fb-options" attribute in place of the rev attribute.
(data-* attributes are "legal" under the current proposal and are intended for uses exactly such as this.)
Your HTML5 compliant anchors might look like this:
Setting page-specific options
All the default options listed at the top of floatbox.js can be overridden for a specific page by including an object definition called "fbPageOptions" in the head section of that page.
You could for example set a specific theme, animation values and navigation types for a for a page of floatboxed content with the following page-specific javascript object: You can also define an object on your host page called "fbChildOptions". Options defined in this object apply to child boxes only. Child boxes inherit option preferences from the parent box, but can be overridden with fbChildOptions and the childOptions defined in floatbox.js
Querystring options
Setting options in the url querystring is useful primarily for testing and experimentation purposes.
You can for example add something like this to your address bar's url:
Example: Start a slideshow from a linkIf an anchor has "doSlideshow:true" set on its rev attribute then, when clicked, the corresponding grouped images (or other content) will be shown as a slideshow. This allows for setting up a gallery with a dedicated link to viewing that gallery as a slideshow. When you do this, you would normally want to include the option "showThis:false" so that the activating link itself is not included in the invoked slideshow.
An anchor element that enables a slideshow could look something like this:
CaptionsThere are two ways to get floatbox to display caption text. One is to set the 'title' attribute on the <a> element and the other is to include a 'caption' entry in the rev attribute options. Browsers use the title attribute as a tooltip when the user mouses over an anchor. If you want the tooltip and the floatbox caption to be the same, just set the title attribute. If you want them to be different, put the caption string into the rev attribute as an option (see below). When using the rev caption option, you need to surround the caption text with backquotes (`). Here's two examples:
If you set the title or caption option to the string "href", the displayed caption will be the value of the anchor's href attribute. This can be useful when displaying iframed content or if you want to display the path/filename of the current image. The rev caption can include html styles and elements such as <br /> or even <a>nchors if you like. HTML entity characters (& " < >) in a caption will need to be encoded (& " < >). There's examples of html styled captions on the demo page.
Auto Gallery creationThe "normal" way to create an image gallery for floatbox is to add a floatbox class and rev attribute group option to each image link you want included in the gallery. You can auto-create a floatbox gallery without adding this markup to your anchors. To do so, include floatbox.js and floatbox.css in the usual fashion (as described above) and set up a fbPageOptions object that contains "autoGallery:true" in it. This will tell floatbox to build a gallery set consisting of each image that is the target of an anchor's href attribute. If you have a few image links that you want excluded from the autoGallery group, you can exclude them by pre-setting a class of class="nofloatbox" on the ones to be ignored. (Note: you can set autoGallery:true in the options section of floatbox.js. This will turn every page that you include floatbox on into an auto-gallery page.) You can auto-set a title (caption) on each image link as well. Do this by setting the autoTitle option to your desired title string. This title will be shown as a caption in the floatbox display. (Note that existing titles set on individual links will take precedence when the captions are setup.) Also, if you want to include a slideshow link to the auto-created gallery, do so in the normal fashion as described in this example and use a rev attribute grouping option of rev="group:.autoGallery. (The old school rel="floatbox.autoGallery" still works too).
The fbPageOptions object definition for an autoGallery would look something like this:
HTML content: iFrames, AJAX & inline DIVs
Floatbox handles 3 broad categories of content: images, html and multi-media.
This section describes handling html content. If you are loading forms or active content that includes links or that calls floatbox functions, use an iframe to display that content. With AJAX or inline content, floatbox's keyboard handler will interfere with forms and prevent use of tabs, spaces and arrow keys. Links clicked from within AJAX and DIV content will navigate the base page to the new link whereas links in iframed content will open inside the floatbox. AJAX and inline DIVs are good for displaying static content that does not have form fields or links. There are three rev options that should be assigned to each non-image anchor: "width", "height" and "scrolling". Width and height are the numeric size of the iframe window in pixels. One or both of width and height can be specified as "max" which will set that dimension to match the current window size. Width and height can also be expressed as percentages and will size to that percentage of the available displayable screen area (e.g, rev="width:90%"). Note that you can also set the "sizeRatio" option to display an item at maximum size while retaining a specific width/height ratio. Scrolling is either "no", for no scrollbars, or "auto" for displaying scrollbars in the iframe if they are required. If no value for scrolling is given, auto is assumed. Galleries aren't just for images. You can group multiple html-content pages together into a gallery set using the "group" option in rev attributes for any item type.
Here's some examples of anchor tags that load html content: The following section gives information about loading multimedia content, either directly or as iframe content.
Multimedia: Flash, Silverlight, QuickTime, YouTube, etc.Multi-media content type is recognized by floatbox based on the file extension in an anchor's href. .swf files are loaded with the flash plugin, .xap files are loaded using Silverlight, and .mov .mpg .mpeg and .movie extensions will be loaded with the QuickTime plugin. In addition to locally served multi-media files, you can load floatbox content directly from online video services such as YouTube, Yahoo Video, Google Video, Metacafe and many others. If the required plugin is not available on the client browser, floatbox will display a notice (in English) with a link to the plugin download page.
For flash content, floatbox assigns the following parameter default values: wmode=window, scale=exactfit, play=true, loop=true, quality=high.
You can over-ride these plus bgcolor, base and salign by providing new values in the href url's querystring.
Quicktime default parameters used are autoplay=true, controller=true, showlogo=false and scale=tofit.
These can be overridden with a querystring in the same manner as described for flash. Most online video services are recognized as flash content because they load their videos using the .swf file extension. Youtube and Dailymotion are exceptions, but they too is recognized as flash content by floatbox. A Youtube href will look something like this: "http://youtube.com/v/lj3iNxZ8Dww&hl=en". Please see the Multimedia section on the demo page for lots of examples of direct loading flash, quicktime and online services. Although floatbox will display most multi-media content natively, there may be times when you want more control. If so, you can put your multimedia content into an html page setup the way you like, and then load that page as an iframe. You will want to make sure your document body has no margin or padding: body {margin: 0; padding; 0; } Then set the iframe width and height to the exact dimensions of your multi-media object and add "scrolling:no" to your rev tag. There's a sample on the demo page.
Alternate content for javascript-disabled browsers
You may wish to provide alternate content for users who have javascript disabled in their browsers.
If your page is setup to display images in floatbox but javascript is disabled, clicking on the image link will simply display that image on a blank page.
To provide a more friendly experience in this case, you can set the link's href attribute to point to your friendly non-javascript content and use floatbox's "href" option in the rev attribute to provide the image path to floatbox.
A floatboxed link with alternate content might look like this:
Popup thumbnails
You can configure anchors to have a popup thumbnail that appears when the mouse is over the anchor and disappears when the mouse moves off.
The popup thumbnails can be clicked to load an associated image in floatbox.
Combining popup thumbnails with floatbox's ability to zoom from a thumbnail to an image makes for a nice effect.
Popup thumbnails are enabled by assigning a class of "fbPopup" to the <a>nchor element. Here's an example: As usual, there's samples on the demo page.
Info box for secondary contentThere are occasions when it is helpful to display additional information about your floatbox content. For photogrpahs, this might be descriptive text, EXIF information or a popup location map. Forms or other html content may have associated help or other information that can be effectively presented in a second floatbox. Floatbox's info box capability addresses this usage. When enabled, a link will appear in the lower left of the floatbox frame which activates the information box.
There are three option tags you can put in your anchor's rev attribute to enable and configure an info box.
A complete anchor with an associated info box could look like this: Yes, there's an example or two on the demo page.
Print contentsIf you set "showPrint:true" in a floatboxed anchor's rev attribute, a "Print..." link will be shown in the info panel area. When clicked, this link will invoke a second browser instance that will display just the contents of the floatbox window and will show the print dialog for this new browser instance. The contents that will be printed will be just that from the floatbox display, not the surrounding eye candy and not the host page content. In some circumstances you may find that you want to add css styling to the print window contents. You can do this with the printCSS rev tag option. If printCSS is a URL path to a css file, that css file will be attached to the print window. Or, you can just put css syntax directly into this rev option, surrounded by backquotes. For example: rev="showPrint:true printCSS:/css/print.css" or rev="showPrint:true printCSS:`p {font-size: 11px;} etc...`" You often don't need to add any css stuff for printing, but it's there if you need it.
Note that printing is not available for iframe content that comes from a different domain than the base page (cross-site script blocking).
If you are displaying a cross-domain iframe in floatbox, the "Print..." option will not be displayed.
Index links in a galleryGalleries of multiple images (or other content) can have a series of simple numbered links shown either in the info panel or control panel. If there are thumbnails associated with linked images, these thumbnails will be displayed as small popups when the numbered link is hovered with the mouse. Primary control over the display of index links is done with the numIndexLinks option. If this is zero, index links will not be shown. If it is -1, there is no limit on the number of index links shown - there will be a link for each image in the gallery group. Any positive integer and the number of links shown will be limited to this amount (in case you don't want a huge list of numbered links for your gallery of 479 pictures). Two other options affect index links. You can turn off the thumbnail popups by setting showIndexThumbs to false. The location of the index links is controlled by the indexLinksPanel option. Set this to 'control' to put index links in with the control widgets, or set it to 'info' to put the links in with the caption and other text goodies. You can see index links in action on the "Include Index Links" sample on the demo page.
Language localizationFloatbox includes language localization files for 27 languages. The strings in these files are used as tool tip hints for the floatbox controls, the "image x of y" display, and for the text displayed on "Info.." and "Print..." links. The corect language file will be selected for use based on the localization settings or your site visitor's browsers. You can set floatbox to always use one particular language file by setting the "language" option. But it is recommended that you not do this. By leaving language as "auto", your visitors will get the corrent language for themselves. There are two sets of graphics used for the floatbox controls. One set has English text on the controls ("Close", "Next", etc.), while the other set is purely graphical. In the default setting, the English controls will be served to people with English-localized browsers and all other users will get the non-graphical, international controls. You can use international controls for everybody, including English speaking folk, but setting graphicsType to "international".
Auto-start and exit tasksYou can have floatbox content appear directly on page load by using the autoStart rev option. Put "autoStart:true" into the rev attribute of the floatbox-enabled item that you want to run automatically. As soon as the page loads, floatbox will start with this item displayed. You can use "autoStart:once" to have that tagged item display only on the first page load of the session. Doing this sets a session cookie when the item is first shown and that item will not be auto-shown again as long as that session cookie is present. You can also invoke an auto-start through a query string on the url used to invoke the page. For example, a url of "http://mydomain.com/mypage.html?autoStart=myimage.jpg" will auto-start myimage.jpg provided there is an anchor on the page that is setup for floatbox and that has that image as its href value. Note that the query string value only has to match the right-hand side of the anchor's href. The given example would match an href of "/images/this_is_myimage.jpg". Floatbox can automatically load or reload a web page in the browser when it exits. The "loadPageOnClose" option is used to make this happen. Set loadPageOnClose to the string 'self' to refresh the host page on exit. This can be useful if your floatboxed content has modified some back-end content and the host page needs to be refreshed to reflect the changes. If you set loadPageOnClose to the string 'back', the previous page in the browser's history list will be loaded. This is used in the APOD slideshow on the demo page. If loadPageOnClose is neither 'self' nor 'back', it is assumed to be a valid url and the browser will be instructed to load that page. If you set loadPageOnClose to a url inside a rev tag option string, you must surround the url with backquotes (`) so as not to break parsing of the option string. The use of callback functions in floatbox may be of interest here. You can read about them in the programmer's API reference.
Image map areasFloatbox can work with image map areas the same way it does for standard <a> elements. To do this, set up the class, rev and title attributes as described above, but for image maps these attributes go on the map's <area> elements. There's an example on the demo page.
Navigation and controlsFloatbox includes controls for moving to previous and next items in a group, resizing, playing and pausing a slideshow, and exiting. These controls are graphical and loaded from the graphics folder. If the configuration setting "graphicsType" in the floatbox.js file is set to the default "auto", browsers that are configured with a localized language other than English will see graphics-only controls. Localized English browsers will see control graphics that include English words. There are two sets of previous/next controls for grouped items. "Overlay" navigation displays a small graphics on top of the displayed image when the mouse is over the left or right side of the image. "Button" navigation displays a clickable << prev || next >> (or the international equivalent) in the box frame outside of the content. You can use either or both of these by setting the navType option. My favourite setting is to set navType to "both" and set showNavOverlay to "never". This allows navigation to occur by clicking on the image (or on the button nav control) but does not display the popup graphic over top of the image. When the floatbox content has been shrunk from its native size to fit the screen, or when it is displayed larger than the current screen size, a resize control will be displayed which can be used to toggle the item's size. The "resizeTool" option controls whether the resize control will be a custom maginfying-glass cursor or a small graphic in the top left corner. If the custom cursor is used and overlay navigation is enabled, click-resizing is active only in the space between the two upper navigation areas. (Opera always gets the graphic in the top left corner because it can't do custom cursors.) When enableKeyboardNav is set to true, the following keys can be used in place of mouse-clicking the controls:
If the Ctrl key is used together with the left or right arrow, floatbox will jump 5 items ahead or back in the sequence. This is to facilitate quick navigation when using floatbox as a poor-man's PowerPoint.
Using compressed filesFloatbox ships with two kinds of compressed js and css files - minimized text files and gzip zipped files. If you want to reduce the byte transfer load of your web site a bit, you can serve up the compressed files instead of the "normal" full-sized floatbox files. Doing so is as simple as changing the two floatbox include lines in your page's <head> section. (Note: previous versions of floatbox had you copying the compressed files over top of the originals. Please DON'T do that with this version.)
Let's assume floatbox is under an "includes" folder and your original non-compressed include statements are:
To deliver compressed files instead, you simply need to insert the "compressed" folder name into those references, like this: The compressed files served this way are about 2/3 the size of the originals. You can get much more size reduction by serving the gzip files, but this is more challenging to implement. If you're interested, see the readme.html file inside floatbox's "compressed" folder.
AppearanceThere's lots of control over floatbox's appearance. You can set the colors, round corners, border sizes, display of controls, shadow effect, transparencies and various animation effects through the configuration options. Most of the General options, some of the Navigation options, and all of the Animation options are for configuring appearance. See the options reference for details on the use of these (and other) options.
Custom background image
You can use a graphic as an overlay background image by providing a background-image style for the overlay element.
In a css file, it would look something like this: If you use a custom background image you may want to set overlayOpacity to 100, or maybe play with lower values to fade the background image. For an example of a custom background and the use of autoStart and loadPageOnClose, check out the APOD slideshow on the demo page.
Running in iFramed pagesYou can run floatbox from iframed pages if you like, and those iframes can be nested as deep as you want. Floatbox.js needs to be included in the root (top) page and on every page in a nested chain down to and including the last child page that has floatbox content on it. For example, if you have a page with iframes nested two deep and floatbox content only in the deepest iframe, you need floatbox.js included in the deep iframe, the parent of that iframe, and the root document. The floatbox.css file has to be included in the root page, but does not need to be on the child iframe pages. (See the iFrames section of the demo page for an example of a floatbox-enabled page with iframes nested two deep.) Note that browsers restrict cross-site scripting. Floatbox (and any other lightbox-type script) will not be able to function from within an iframe if the top page and iframed child page do not have identical host name portions of their URLs. (You can use framebox.js in these circumstances. See below.)
Constraining floatbox to a particular iFrame
Floatbox normally occupies the entire browser window when displaying content by attaching itself to the top document.
You can, if you like, have floatbox appear only inside a particular iframe and constrain itself to the dimensions of that iframe (or to a frameset child document).
To do this, include the file framebox.js, instead of floatbox.js, in the head section of the iframe content document and also include floatbox.css.
|