maxiBox v2.14 ♦ 12 Plugins jQuery

Alert • Confirmation • Prompt


<input type="button" name="alert" value="Bouton Alert" />
<input type="button" name="confirm" value="Bouton Confirm" />
<input type="button" name="prompt" value="Bouton Prompt" />

<input type="button" name="confirm_2" value="Bouton Confirm + Alert" />
<input type="button" name="prompt_2" value="Bouton Prompt + Alert" />
$('input[name=alert]').click(function() {
    $.alert({
        title: "Alerte",
        value: "Allo le monde, est-ce que tout va bien ?",
        callback: function(r) {
            console.log(r);
        }
    });
});

$('input[name=confirm]').click(function() {
    $.confirm({
        title: "Confirmation",
        value: "Vous confirmez ce message ?",                    
        callback: function(r) {
            console.log(r);
        }
    });
});

$('input[name=prompt]').click(function() {
    $.prompt({
        title: "T'es qui ?",
        value: 
            '<input type="text" name="prenom" required="required" placeholder="Prénom" />' +
            '<input type="text" name="nom" required="required" placeholder="Nom" />',
        button: ['Voila', 'Personne'],
        callback: function(r) {
            console.log(r);
        }
    });
});

$('input[name=confirm_2]').click(function() {
    $.confirm({
        title: "Confirmation",
        value: "Vous confirmez ce message ?",  
        button: ["Je confirme", "J'annule"],                          
        callback: function(r) {
            if (r) {
                $.alert({
                    title: "Merci d'avoir confirmé",
                });
            }else{
                $.alert({
                    title: "Merci d'avoir annulé",
                });
            }
        }
    });
});

$('input[name=prompt_2]').click(function() {
    $.prompt({
        title: "T'es qui ?",
        value: 
            '<input type="text" name="prenom" required="required" placeholder="Prénom" />' +
            '<input type="text" name="nom" required="required" placeholder="Nom" />',
        button: ['Voila', 'Personne'],
        callback: function(r) {
            if (r) {
                $.alert({
                    title: 'Bonjour ' + r['prenom'] + ' ' + r['nom'] + ' :)',
                });
            }
        }
    });
});

Notification • Chargement


<input type="button" name="notify_1" value="Notification N°1">
<input type="button" name="notify_2" value="Notification N°2">

<input type="button" name="loadbox_1" value="Chargement indéfini"> 
<input type="button" name="loadbox_2" value="Chargement limité">
<input type="button" name="loadbox_3" value="Charger & Fermer">
$('input[name=notify_1]').click(function() {
    $.notify({
        value: 'Bon message très loooooooooooooooooooooooooong',
        class: 'true',
        callback: function(r) {
            console.log(r);
        }
    });
});

$('input[name=notify_2]').click(function() {
    $.notify({
        value: 'Pas bon message très court',
        class: 'false',
        callback: function(r) {
            console.log(r);
        }                    
    });
});

$('input[name=loadbox_1]').click(function() {
    $.loadbox();
});

$('input[name=loadbox_2]').click(function() {
    $.loadbox({
        value: 'Veuillez patienter 5 secondes',
        timeOut: 5000
    });
});

$('input[name=loadbox_3]').click(function() {
    $.loadbox({
        value: 'Veuillez patienter 5 secondes',
        callback: function(r) {
            if (r == 'show') {
                setTimeout(function() {
                    $.loadbox('close')
                }, 5000)
            }
        }
    });
});

Barre de progression

25
50
100
<div class="progress">25</div>        

<div class="progress blue">50</div>        

<div class="progress red">100</div>

<input type="button" name="refresh" value="Actualiser" />
$.progress({
    id: '.progress',
    anim: true,
    callback: function(r) {
        console.log(r);
    }
});

$('input[name=refresh]').click(function() {
    var btn = $(this);
    $.progress({
        id: '.progress',
        anim: true,
        callback: function(r) {                        
            console.log(r);
            if (r == 100) $(btn).removeAttr('disabled');
        }
    });
    $(btn).attr('disabled', true);
});

LightBox Image • Tooltip

<ul>
    <li><a rel="lbox0" href="images/image1.jpg" data-title="Un coucher de soleil" title="Un coucher de soleil"><img src="images/image1.jpg" width="150" height="99" alt=""></a></li>
    <li><a rel="lbox1" href="images/image2.jpg" data-title="Le lac des cygnes" title="Le lac des cygnes"><img src="images/image2.jpg" width="150" height="99" alt=""></a></li>
    <li><a rel="lbox1" href="images/image3.jpg" data-title="Heuuuuu" title="Heuuuuu"><img src="images/image3.jpg" width="150" height="99" alt=""></a></li>
    <li><a rel="lbox1" href="images/image4.jpg" data-title="L'automne" title="L'automne"><img src="images/image4.jpg" width="150" height="99" alt=""></a></li>
</ul>
$('a[rel=lbox0],[rel=lbox1]').click(function() {
    return $.lightbox({
        image: $(this)
    });
});

$.tooltip({
    id: 'a[rel=lbox1]',
    before: '<strong>C\'est quoi ?</strong><br />'
});

LightBox iFrame + Fermeture

Advibe.fr
Advibe.net
Directive Media
Travaux Illico
LaRossettisserie
Une page exemple pour fermeture
<a rel="lbox2" href="http://www.advibe.fr">Advibe.fr</a><br />
<a rel="lbox2" href="http://www.advibe.net">Advibe.net</a><br />
<a rel="lbox2" href="http://www.directivemedia.fr">Directive Media</a><br />
<a rel="lbox2" href="http://travaux-illico.com">Travaux Illico</a><br />
<a rel="lbox2" href="http://www.larossettisserie.com/fr/">LaRossettisserie</a>
<a rel="lbox2" href="iframe.html">Une page exemple pour fermeture</a>
$('a[rel=lbox2]').click(function() {
    return $.lightbox({
        iframe: $(this),
        width: '80%',
        height: '80%'
    });
});

Onglet classique + synchro

Onglet 1
Onglet 2
Onglet 3
Onglet 1
Onglet 2
Onglet 3
Onglet 1
Onglet 2
Onglet 3
<div class="tabbox v2">
    <ul>
        <li><a href="#" class="actif">Onglet 1</a></li>
        <li><a href="#">Onglet 2</a></li>
        <li><a href="#">Onglet 3</a></li>
    </ul>
    <div>Onglet 1</div>
    <div>Onglet 2</div>
    <div>Onglet 3</div>
</div>

<div class="tabbox v2">
    <ul>
        <li><a href="#">Onglet 1</a></li>
        <li><a href="#" class="actif">Onglet 2</a></li>
        <li><a href="#">Onglet 3</a></li>
    </ul>
    <div>Onglet 1</div>
    <div>Onglet 2</div>
    <div>Onglet 3</div>
</div>

<div class="tabbox v2">
    <ul>
        <li><a href="#">Onglet 1</a></li>
        <li><a href="#">Onglet 2</a></li>
        <li><a href="#" class="actif">Onglet 3</a></li>
    </ul>
    <div>Onglet 1</div>
    <div>Onglet 2</div>
    <div>Onglet 3</div>
</div>
$.tabbox({
    class: 'actif',
    callback: function(r) {
        console.log(r);
    }
});

$.tabbox({
    id: '.v2',
    class: 'actif',
    sync: true,
    callback: function(r) {
        console.log(r);
    }
});

Toolbar • Comeback • Navigate

It's already working :)

<div id="toolbar">

    <h1>maxiBox v2.14 ♦ 12 Plugins jQuery</h1>
        
</div>
$.toolbar({
    id: '#toolbar',
    class: 'shadow',
    opacity: 0.9
});

$.comeback({
    title: 'Reviendez plus haut',
    value: '▲ TOP'
});

$.navigate();

Téléchargement

maxiBox.zip / maxiBox.js / maxiBox.css