/* pdx.prototype.gadgets.projector: a prototype-based content slider v1.0, 2011/03/12, initial release v1.1, 2011/03/17, option to show only images v1.2, 2011/04/01, fixed the default renderer so when there is no title, it won't show the overlay text box v1.3, 2011/05/24, major rewrite, much easier to set up, more flexible, supports dud pager title, faster startup CC BY-SA 2011. Andras Kemeny (http://www.pdx.hu/) http://creativecommons.org/licenses/by-sa/3.0/legalcode NO WARRANTIES! however, it's tested on IE7/8, Firefox 3.5.x, Opera 10+, Chrome & Safari, and it works. REQUIRES prototype.js to work. http://www.prototypejs.org/ REQUIRES script.aculo.us to work. http://script.aculo.us/ usage: 1. make sure there is a block element (preferrably a DIV, but it's not mandatory) that houses the projection. it can be relatively positioned in the flow or it can be absolutely positioned. 2. make sure there is a list from which we can gather all data needed. in this setup, i house a DL in the projection container where DT/DD tags represent the slides (image, link, title, text). go down and see the comments for _extractorDDDT() to see how i do it, but by overriding the collector option and writing your own collector method/function you can have such a structure any way you want. 3. make sure you either use the default slide renderer/image loader, or write your own function/method to do these tasks. see comments for _drawSlide() for more information. 4. call projector.init(housingElement,[{options}]) after the housing element and the slide list is in the html document. important options(: defaults) for projector.init(): switchDelay: 8 the delay between two slides, in seconds slideIDPrefix: 'projSlide' the prefix string for all generated slides. pagers: 'numbers' if this is 'numbers', the pager control boxes will have page numbers in them (like: [1] [2] [3] etc.). if this is 'titles', the pager control boxes will have the respective slides' titles in them. if it's anything else, it's entirely up to the css to do something, and the page links will have a space for text. showPrevNext: true if true, we will show the previous and next slide controls. offsetTop: 0 offsetLeft: 0 sometimes the housing element's position is reported either erroneously, or a bit messed up, by clonePosition(). use these two values to counteract this so that the slides are put where they belong. positionContainer: true do a makePositioned() (IE fix) on the housing element? set to false if you lay the container out to an absolute position, otherwise, it's safe to leave it on true. removeOriginalContents: true delete all the children in the projection housing element? it's true as my default collector looks for the DL within the housing element, and it's good practice to clean up the container before we start putting the slides in it. slideCollector: false the default slide collection callback. set if your slide info shows up in different markup on your page; see _extractorDDDT's comments to learn how it works. if set to false, init sets it to projector._extractorDDDT. slideCreator: false the callback to create a new slide. you can override it if you want a different slide element structure. see the comments above _drawSlide() to learn how it works. if set to false, init sets it to projector._drawSlide. slideClicked: false callback to when the user clicks on any of the slides. if set to false, projector.clickCurrentINS gets called, which sets window.location to the link if there is one associated with the current slide. if you want to override this, the function/method you specify must accept one parameter, the number of the slide that is clicked. you can find out the link from projector.slideData[]['link']. the following options work with default slide renderer. if you create a new method/function for that, you can still use these, but if you create a whole new structure, you won't need this. slideClassBase: 'projector' classname base for the elements. suffixes: "-slide": outermost DIV of the generated slide "-infobgr": the info (title/text) overlay background DIV "-info": the DIV containing the title and the text "-title": the DIV containing the title "-text": the DIV containing the text "-control": the outermost DIV containing the pagers "-prev": the A element of the "previous slide" control "-next": the A element of the "next slide" control "-page": the A element of a slide access control "-page-current": the current page A "-page-dud": the pager title A */ var projector = { mainDiv: null, controlDiv: null, currentSlide: 0, targetSlide: 0, maxSlides: 0, switchTimer: null, slides: [null], slideData: [null], dudTitle: false, dudLink: false, dudTarget: '_self', options: { switchDelay: 4, slideIDPrefix: 'projSlide', slideClassBase: 'projector', pagers: 'numbers', positionContainer: true, removeOriginalContents: true, slideCollector: false, slideCreator: false, slideClicked: false, offsetTop: 0, offsetLeft: 0, showPrevNext: true }, /* array _extractorDDDT(): extracts projector content list from the main container. the following formats are recognized: - the items must be in a list container: either
,
    or