Améliore le visuel pour la section *Autres vues du produit* sur Materiel.net

materiel.net.js

/** Testé uniquement sur Chrome et Firefox **/
jQuery(function ($) {
    var isOpened = false,
        imageQuantity = $('.ProdThumbnails>dl').length;

    $('.ProdThumbnails')
        .css({
            'position': 'absolute',
            'height': 145,
            'width': 280,
            'background-color': 'white',
            'border': 'solid #fff 1px',
            'border-radius': '5px',
            'overflow': 'hidden'
        })
        .on ({
            'mouseenter': function (event) {
                if (isOpened || $('>dl', this).length <= 3) return;
                isOpened = true;
                $(this).stop(true, true).animate({
                    'height': 134 * ($('>dl', this).length % 3),
                    'border-color': '#bbb'
                }, 150).find ('>div').hide();
            },
            'mouseleave': function (event) {
                if (!isOpened) return;
                isOpened = false;
                $(this).stop(true, true).animate({
                    'height': 145,
                    'border-color': '#fff'
                }, 150).find ('>div').show();
            }
        })
        // L'option "indication du nombre d'images non affichées"
        .append(
            $('<div />').css({
                'position': 'absolute',
                'width': 'auto',
                'bottom': 0,
                'left': 0,
                'right': 0,
                'text-align': 'right',
                'color': '#aaa',
                'font-style': 'italic',
                'font-size': '0.9em'
            })
            .text(
                (imageQuantity > 3)
                    ? ((imageQuantity - 3) + ' autres images disponibles.')
                    : ''
            )
        )
        .next().css({'margin-top': 150});
});