Plugins gratuits pour le framework JavaScript Mootools 1.2 |
English

<< RETOUR À L'ACCUEIL

ByZoomer - Zoom, zoom, zoom !

Qu'est-ce que ByZoomer ?

ByZoomer est un plugin Gratuit et Open Source pour Mootools. Ce script vous permet de créer facilement une galerie d'image qui, une fois cliquées, seront affichée en taille réelle avec un effet de zoom.

Que dire de plus, si ce n'est de regarder plus bas pour le voir en action !

Usage

HTML

<a href="big_picture.jpg" title="Optional title" class="byzoomer">
	<img src="small_picture.jpg" />
</a>
<a href="big_picture2.jpg" title="Optional title" class="byzoomer">
	<img src="small_picture2.jpg" />
</a>

Note : If you use the same large picture as link and preview, the preview one will be resized according to the "zoom" option (see below)

Note 2 : To insert a line break on the picture title, juste use two colons "::"

Javascript

var myZoomer = new ByZoomer(options);

Options

Option Type Default Description
css string "byzoomer" All picture having this class will become zoomable
zoom int 4 The zoom factor to resize preview images, if using same image for link and preview.
duration int 500 The duration of the zoom effect, in milliseconds
onZoomInStart function Méthode à exécuter au début du zoom avant
onZoomInComplete function Méthode à exécuter à la fin du zoom avant
onZoomOutStart function Méthode à exécuter au début du zoom arrière
onZoomOutComplete function Méthode à exécuter à la fin du zoom arrière
waitIcon string wait.gif Chemin vers l'icône d'attente
errorIcon string error.png Chemin vers l'icône d'erreur

Public Method

The myZoomer.unzoom() method can close the current zoomed image of any ByZoomer object (see third example below).

CSS

You can define 4 CSS rules. (Replace "byzoomer" by whatever you set with the "css" option, see above)

Pré-requis

ByZoomer est écrit pour Mootools v1.2

Il requiert ces modules (et leurs dépendances) :

  • Element.Dimensions
  • Element.Event
  • Fx.Tween
  • Fx.Transitions

Je le veux !

Combien dois-je payer pour l'avoir ?

Rien du tout ! C'est totalement gratuit. Vous pouvez le télécharger, le modifier et l'utiliser dans n'importe quel projet commercial tant que vous respectez la licence. C'est Open Source !

Télécharger

License

ByZoomer par ByScripts est mis à disposition selon les termes de la licence MIT Open Source.

Participer

Faire un don

Si vous aimez ce script, et que vous souhaitez participez, vous pouvez envoyer quelques (centimes d') euros. Vous pouvez donner ce que vous souhaitez en cliquant ici (vous pouvez ne RIEN donner en ne cliquant PAS ici ^^) :

Examples

Example 1 : Default options

HTML

<div style="text-align: center">
	<a class="byzoomer" href="chess.jpg">
		<img src="chess-tiny.jpg" alt="Chess" />
	</a>
	<a class="byzoomer" href="eiffeltower.jpg">
		<img src="eiffeltower-tiny.jpg" alt="Eiffel" />
	</a>
	<a class="byzoomer" href="screw.jpg">
		<img src="screw-tiny.jpg" alt="Screw" />
	</a>
	<a class="byzoomer" href="phone.jpg">
		<img src="phone-tiny.jpg" alt="Phone" />
	</a>
</div>

Javascript

var myZoomer = new ByZoomer();

Output

Example 2 : Using ByZoomer events

HTML

<div style="text-align: center">
	<a class="byzoomer2" href="chess.jpg">
		<img src="chess-tiny.jpg" alt="Chess" />
	</a>
	<a class="byzoomer2" href="eiffeltower.jpg">
		<img src="eiffeltower-tiny.jpg" alt="Eiffel" />
	</a>
	<a class="byzoomer2" href="screw.jpg">
		<img src="screw-tiny.jpg" alt="Screw" />
	</a>
	<a class="byzoomer2" href="phone.jpg">
		<img src="phone-tiny.jpg" alt="Phone" />
	</a>
</div>

Javascript

var myZoomer2 = new ByZoomer('byzoomer2',{
	onZoomInStart: function(){
		alert('Zoom In Start');
	},
	onZoomInComplete: function(){
		alert('Zoom In Complete');
	},
	onZoomOutStart: function(){
		alert('Zoom Out Start');
	},
	onZoomOutComplete: function(){
		alert('Zoom Out Complete');
	}
});

Output

Example 3: What happens if an image is not found ?

HTML

<div style="text-align: center">
	<a class="byzoomer3" href="chess.jpg">
		<img src="chess-tiny.jpg" alt="Chess" />
	</a>
	<a class="byzoomer3" href="not_found.jpg">
		<img src="eiffeltower-tiny.jpg" alt="Eiffel" />
	</a>
	<a class="byzoomer3" href="screw.jpg">
		<img src="screw-tiny.jpg" alt="Screw" />
	</a>
	<a class="byzoomer3" href="not_found.jpg">
		<img src="phone-tiny.jpg" alt="Phone" />
	</a>
</div>

Javascript

var myZoomer3 = new ByZoomer('byzoomer3');

Output

Example 4 : Transition & Duration

HTML

<div style="text-align: center">
	<a class="byzoomer4" href="chess.jpg">
		<img src="chess-tiny.jpg" alt="Chess" />
	</a>
	<a class="byzoomer4" href="eiffeltower.jpg">
		<img src="eiffeltower-tiny.jpg" alt="Eiffel" />
	</a>
	<a class="byzoomer4" href="screw.jpg">
		<img src="screw-tiny.jpg" alt="Screw" />
	</a>
	<a class="byzoomer4" href="phone.jpg">
		<img src="phone-tiny.jpg" alt="Phone" />
	</a>
</div>

Javascript

var myZoomer4 = new ByZoomer('byzoomer4',{
	duration: 2000,
	transition: 'bounce:out'
});

Output