"
Team:USTC-Software/test
From 2013.igem.org
- 0
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
Introduction
Hi there. First of all excuse me for my bad english, second excuse me if you will find some bugs in Diapo slideshow.
Diapo slideshow is an open source project. You can suggest changes or improvements if you want. You can download it and use for free, you can also include it in your projects and sell it as part of a bigger work (in this case please consider a donation).
Diapo slideshow is tested on new browsers, but I tried to make it compatible with the old versions of Internet Explorer too (8 and 7). But I don't think I will spend many hours to improve this feature, sorry.
Diapo slideshow requires jQuery 1.4+ and other jQuery plugins are necessary if you want to use some functionalities: jQuery Easing (http://gsgd.co.uk/sandbox/jquery/easing/), jQuery HoverIntent (http://cherne.net/brian/resources/jquery.hoverIntent.html), jQuery Mobile (http://jquerymobile.com/, but not all the plugins). These plugins are included in the zip you can download at the bottom of this page.
Diapo slideshow is the first jQuery plugin I develop from scratch and I distribute for free, so please be lenient
Methods
| $('selector').diapo(); | basic format |
| $('selector').diapo({fx: 'scrollHorz', time: '5000'}); | an example with some customizations |
| $('selector').diapoStop(); | you can use this function to stop the slideshow |
| $('selector').diapoPlay(); | you can use this function to play/resume the slideshow |
Options
| selector: | 'div', [target element] |
| fx: | 'random', |
| Available effects: 'random','simpleFade', 'curtainTopLeft', 'curtainTopRight', 'curtainBottomLeft', 'curtainBottomRight', 'curtainSliceLeft', 'curtainSliceRight', 'blindCurtainTopLeft', 'blindCurtainTopRight', 'blindCurtainBottomLeft', 'blindCurtainBottomRight', 'blindCurtainSliceBottom', 'blindCurtainSliceTop', 'stampede', 'mosaic', 'mosaicReverse', 'mosaicRandom', 'mosaicSpiral', 'mosaicSpiralReverse', 'topLeftBottomRight', 'bottomRightTopLeft', 'bottomLeftTopRight', 'bottomLeftTopRight' You can also use more than one effect: 'curtainTopLeft, mosaic, bottomLeftTopRight' |
|
| mobileFx: | '', [leave empty if you want to display the same effect on mobile devices and on desktop etc.] |
| slideOn: | 'random', [next, prev, random: decide if the transition effect will be applied to the current (prev) or the next slide] |
| gridDifference: | 250, [to make the grid blocks slower than the slices, this value must be smaller than transPeriod] |
| easing: | 'easeInOutExpo', [for the complete list http: jqueryui.com/demos/effect/easing.html] |
| mobileEasing: | '', [leave empty if you want to display the same easing on mobile devices and on desktop etc.] |
| loader: | 'pie', [pie, bar, none (even if you choose "pie", old browsers like IE8- can't display it... they will display always a loading bar)] |
| loaderOpacity: | .8, [0, .1, .2, .3, .4, .5, .6, .7, .8, .9, 1] |
| loaderColor: | '#ffff00', |
| loaderBgColor: | '#222222', |
| pieDiameter: | 50, |
| piePosition: | 'top:5px; right:5px', [this option accepts any CSS value] |
| pieStroke: | 8, |
| barPosition: | 'bottom', [bottom, top] |
| barStroke: | 5, |
| navigation: | true, [true, false. It enables the previous and the next buttons, their IDs are #pix_prev and #pix_next] |
| mobileNavigation: | true, [true, false. It enables the previous and the next buttons on mobile devices] |
| navigationHover: | true, [true, false. If true navigation will be visible only on hover state] |
| mobileNavHover: | true, [true, false. If true navigation will be visible only on hover state for mobile devices] |
| commands: | true, [true, false. It enables stop and play buttons] |
| mobileCommands: | true, [true, false. It enables stop and play buttons on mobile devices] |
| pagination: | true, [true, false. It enables the pagination numbers. Here below you can see the appended code] |
| <div id="pix_pag"> <ul id="pix_pag_ul"> <li id="pag_nav_0"><span><span>0</span></span></li> <li id="pag_nav_1"><span><span>1</span></span></li> <li id="pag_nav_2"><span><span>2</span></span></li> ...etc. </ul> </div> |
|
| mobilePagination: | true, [true, false. It enables the pagination numbers on mobile devices] |
| thumbs: | true, [true, false. It shows the thumbnails (if available) when the mouse is on the pagination buttons. Not available for mobile devices] |
| hover: | true, [true, false. Puase on state hover. Not available for mobile devices] |
| pauseOnClick: | true, [true, false. It stops the slideshow when you click the sliders.] |
| rows: | 4, |
| cols: | 6, |
| slicedRows: | 8, [if 0 the same value of rows] |
| slicedCols: | 12, [if 0 the same value of cols] |
| time: | 3000, [milliseconds between the end of the sliding effect and the start of the nex one] |
| transPeriod: | 1500, [lenght of the sliding effect in milliseconds] |
| autoAdvance: | true, [true, false] |
| mobileAutoAdvance: | true, [true, false. Auto-advancing for mobile devices] |
| onStartLoading: | function() { }, |
| onLoaded: | function() { }, |
| onEnterSlide: | function() { }, |
| onStartTransition: | function() { } |
APIs
| 'data-fake' | a path to an image, [iframes (or objects) must be replaced by an image during the transition. Paste here the path to the image, for an example see here below] |
| <iframe width="940" height="470" src="http://www.youtube.com/embed/qas5lWp7_R0?wmode=transparent&autoplay=1" data-fake="images/slides/up-official-trailer-fake.jpg" frameborder="0" allowfullscreen></iframe> | |
| 'data-thumb' | a path to an image, [its size is set by default on 50x50 pixels. You can change it in the stylesheets. Use this attribute for the target element to set the thumbnail relative to the slide] |
| 'data-fx' | the same value as 'fx' option, [use this attribute for the target element to set the effect relative to a slide] |
| 'data-mobileFx' | the same value as here above, but for mobile devices |
| 'data-slideOn' | next or prev, [use this attribute for the target element to set if apply the transition effect to the previous or the next element relative to the slide] |
| 'data-slideOn' | next or prev, [use this attribute for the target element to set if apply the transition effect to the previous or the next element relative to the slide] |
| 'data-time' | in milliseconds, [use this attribute for the target element to set for a slide the time between one transition the and the next one] |
| 'data-easing' | the same value as 'easing' option, [use this attribute for the target element to set the easing effect for a slide] |
| '.fromLeft' | add this class to an element (with position:absolute) you want to appear from the left after the transition effect has terminated* |
| '.fromRight' | add this class to an element (with position:absolute) you want to appear from the right after the transition effect has terminated* |
| '.fromTop' | add this class to an element (with position:absolute) you want to appear from the top after the transition effect has terminated* |
| '.fromBottom' | add this class to an element (with position:absolute) you want to appear from the bottom after the transition effect has terminated* |
| '.fadeIn' | add this class to an element (with position:absolute) you want to appear fade in after the transition effect has terminated* |
| (*)all these elements are display not at the same time, but consecutively5080 |
Download, support and donations... if you want
Diapo slideshow is an open source plugin and you can use it for free. But if you want to help me to improve it, keep it updated etc. please consider a free donation or buy something on my portfolio on ThemeForest.
Donations
Buy me a beer, a coffee or an ice cream to my daughter. Decide the amount you prefer
Buy something
Buy my works: here is my portfolios on Themeforest and CodeCanyon
Hire
If you want you can hire me at manu@pixedelic.com (include some details about your project and do not ask for support at this address)
Support
You can visit the Diapo Google Group and ask your question there (post a link that shows your problem) or post a tip or whatever you want... with moderation
Changelog
| 11/14/2011 v.1.0.4 | fixed a minor "comma" bug :-P |
| 11/10/2011 v.1.0.3 | fixed some navigation bugs and other issues regarding mobile devices |
| 9/20/2011 v.1.0.2 | fixed some bugs with IE |
| 8/28/2011 v.1.0.1 | made it compatible with jQuery 1.4+ |
| 8/23/2011 v.1.0.0 | first public release |
