Giter Site home page Giter Site logo

slidegallery's Introduction

slideGallery

Multifunctional gallery for MooTools 1.3+.

Cross Browser: IE6+, FF2+, Safari3+, Opera9+, Chrome

Screenshot

How to use

HTML
-----------
`<div class="gallery">`
	`<div class="holder">`
		`<ul>`
			...
			`<li><img src="../Source/Assets/img1.jpg" alt="image description" width="240" height="180" /></li>`
			...
		`</ul>`
	`</div>`
	`<a href="#" class="prev">prev</a>`
	`<a href="#" class="next">next</a>`
`</div>`

CSS
-----------
.gallery { width: 960px; }
.gallery .holder {
	width: 100%;
	position: relative;
	overflow: hidden;
}
.gallery .holder ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 99999px;
}
.gallery .holder ul li { float: left; }

JavaScript:
-----------
window.addEvent("domready", function() {
    var gallery = new slideGallery(element [, options]);
});
or 
window.addEvent("domready", function() {
    var gallery = new fadeGallery(element [, options]);
});

Arguments:
----------
	- element [string, element] - reference to the element object.
	- options [object]
		- holder [string] - class or node for holder. Default ".holder"
		- elementsParent [string] - class or node for slides(elements) holder. Default "ul"
		- elements [string] - class or node of elements. Default "li"
		- nextItem [string] - class or node of the button Next. Default ".next"
		- prevItem [string] - class or node of the button Prev. Default ".prev"
		- stop [string] - class or node of Stop button. Default ".stop"
		- start [string] - class or node of Play button. Default ".start"
		- speed [integer] - speed of sliding in ms. Default 600
		- steps [integer] - quantity of elements which are scrolled for one step. Default 1
		- current [integer] - number of an element with which begins scrolling. Default 0
		- currentClass [string] - className of an element with which begins scrolling. Default "current"
		- transition [object] - transition effect. Default "sine:in:out"
		- direction [string: "horizontal", "vertical"] - sliding direction. Default "horizontal"
		- mode [string: "callback", "circle", "line"] - sliding mode. Default "callback"
		- nextDisableClass [string] - className for the button Next in a disabled state. Default "next-disable"
		- prevDisableClass [string] - className for the button Prev in a disabled state. Default "prev-disable"
		- random [boolean] - random set of slides. Default false
		- paging [boolean] - on\off handles. Default false
		- pagingEvent [string] - event which fire the paging. Default "click"
		- pagingHolder - class or node for paging holder. Default ".paging"
		- autoplay [boolean] - on\off autoplay. Default false
		- autoplayOpposite [boolean] - on\off opposite autoplay. Default false
		- duration [integer] - autoplay interval in ms. Default 4000
		- stopOnHover  [boolean] - on\off scrolling when the cursor over gallery. Default true
		- onStart [function] - callback ones after initialization
		- onPlay [function] - callback after each scrolling

Screenshots

Screenshot Screenshot

slidegallery's People

Stargazers

Daniel Faure avatar ChinaBUG avatar Dinesh Kr. Choudhary avatar  avatar Jayvan J Santos avatar Alexander avatar Piotr avatar Chris Tarantl avatar Jason Trill avatar karan avatar Sergii Kashcheiev avatar Alberto Renzi avatar Cameron Morgan avatar Alexander Herrmann avatar René Kersten avatar  avatar Johannes Fischer avatar

Watchers

Sergii Kashcheiev avatar Dinesh Kr. Choudhary avatar luca palomba avatar

slidegallery's Issues

Problem after update to Mootools 1.3

Hello,

I think there is a problem in the slideGallery class using mode circle with Mootools 1.3.
It seems that onComplete function on tween (prev & next) is added every time you click and, at the end of the tween, it's fired many many times...

Can you help me to solve this issue?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.