Plugins gratuits pour le framework JavaScript Mootools 1.2 |
Français

<< BACK TO HOME

ByZoomer - Come on ! Let's zoom !

What is ByZoomer?

ByZoomer is a Free and Open Source plugin for Mootools. This script allow you to easily create a picture gallery which will be nicely zoomed when clicked.

No more explanations, just look below to see it in 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)

Requirements

ByZoomer est écrit pour Mootools v1.2

It requires these modules (and their dependencies):

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

Get it!

How much I need to pay to get it?

Nothing! It's totally free. You can download it, modify it and use it in any commercial project as long as you respect the license. It's Open Source !

Download

License

ByZoomer by ByScripts is licensed under a Open Source MIT License.

Participate

Donate

If you like this script, and want to participate, you can send some money. You can give anything you want by clicking here (and you can give nothing by NOT clicking here ^^):

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