当前位置:首页 > 转自点点  >> diapo – 很强大的幻灯片JQ插件
28日

diapo – 很强大的幻灯片JQ插件

作者:皇家元林 时间:2011年10月28日 围观者: 1,539 人 【0条评论】

演示:http://www.pixedelic.com/plugins/diapo/

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/)
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]

  • 0
  • 1
  • 2
  • ...etc.

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]'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.
Support

You can visit theDiapo Google Group and ask your question there (post a link that shows your problem) or post a tip or whatever you want... with moderation

diapo.js
diapo.min.js

Download Diapo Slideshow (zip with demo)
备用下载

标签:, , , ,

Leave a Reply



5993