FluxBB.fr

Le site des utilisateurs francophones de FluxBB.

Recherche rapide

Vous n'êtes pas identifié(e).

Version 1.4.13 : [.tar.gz][.zip] (maj 20/10/2014)
Pack langue française pour 1.4.x : [.zip] (maj 06/01/2012)

Branche 1.5.x : fluxbb.org
Pack langue française pour 1.5.x : [.zip] (maj 14/01/2016)

Ancienne Version 1.2.24 fr : [.zip] (maj 26/08/2011)

Vous avez un problème ?
Avant de poser votre question sur les forums d'entraide nous vous invitons à consulter :

#1 02-02-2011 00:21:24

Florider
Habitué actif
Lieu : $noip = '127.0.0.1'; :p
Inscription : 15-02-2010
Messages : 254
Site Web

Mettre un effet miroir sur chaque avatar 1.4

Dans viewtopic.php, juste après le dernier div du fichier, ajouter :

<script type="text/javascript" src="include/js/reflexion.js"></script>

Créer le fichier reflexion.js avec le contenu ci dessous, mais le placer dans /include/js/ (le dossier est fait pour happy)

if (!document.myGetElementsByClassName) {
    document.myGetElementsByClassName = function(className) {
        var children = document.getElementsByTagName('*') || document.all;
        var elements = new Array();
      
        for (var i = 0; i < children.length; i++) {
            var child = children[i];
            var classNames = child.className.split(' ');
            for (var j = 0; j < classNames.length; j++) {
                if (classNames[j] == className) {
                    elements.push(child);
                    break;
                }
            }
        }
        return elements;
    }
}

var Reflection = {
    defaultHeight : 0.5,
    defaultOpacity: 0.5,
    
    add: function(image, options) {
        Reflection.remove(image);
        
        doptions = { "height" : Reflection.defaultHeight, "opacity" : Reflection.defaultOpacity }
        if (options) {
            for (var i in doptions) {
                if (!options[i]) {
                    options[i] = doptions[i];
                }
            }
        } else {
            options = doptions;
        }
    
        try {
            var d = document.createElement('div');
            var p = image;
            
            var classes = p.className.split(' ');
            var newClasses = '';
            for (j=0;j<classes.length;j++) {
                if (classes[j] != "reflect") {
                    if (newClasses) {
                        newClasses += ' '
                    }
                    
                    newClasses += classes[j];
                }
            }

            var reflectionHeight = Math.floor(p.height*options['height']);
            var divHeight = Math.floor(p.height*(1+options['height']));
            
            var reflectionWidth = p.width;
            
            if (document.all && !window.opera) {
                /* Fix hyperlinks */
                if(p.parentElement.tagName == 'A') {
                    var d = document.createElement('a');
                    d.href = p.parentElement.href;
                }  
                    
                /* Copy original image's classes & styles to div */
                d.className = newClasses;
                p.className = 'reflected';
                
                d.style.cssText = p.style.cssText;
                p.style.cssText = 'vertical-align: bottom';
            
                var reflection = document.createElement('img');
                reflection.src = p.src;
                reflection.style.width = reflectionWidth+'px';
                reflection.style.display = 'block';
                reflection.style.height = p.height+"px";
                
                reflection.style.marginBottom = "-"+(p.height-reflectionHeight)+'px';
                reflection.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(opacity='+(options['opacity']*100)+', style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy='+(options['height']*100)+')';
                
                d.style.width = reflectionWidth+'px';
                d.style.height = divHeight+'px';
                p.parentNode.replaceChild(d, p);
                
                d.appendChild(p);
                d.appendChild(reflection);
            } else {
                var canvas = document.createElement('canvas');
                if (canvas.getContext) {
                    /* Copy original image's classes & styles to div */
                    d.className = newClasses;
                    p.className = 'reflected';
                    
                    d.style.cssText = p.style.cssText;
                    p.style.cssText = 'vertical-align: bottom';
            
                    var context = canvas.getContext("2d");
                
                    canvas.style.height = reflectionHeight+'px';
                    canvas.style.width = reflectionWidth+'px';
                    canvas.height = reflectionHeight;
                    canvas.width = reflectionWidth;
                    
                    d.style.width = reflectionWidth+'px';
                    d.style.height = divHeight+'px';
                    p.parentNode.replaceChild(d, p);
                    
                    d.appendChild(p);
                    d.appendChild(canvas);
                    
                    context.save();
                    
                    context.translate(0,image.height-1);
                    context.scale(1,-1);
                    
                    context.drawImage(image, 0, 0, reflectionWidth, image.height);
    
                    context.restore();
                    
                    context.globalCompositeOperation = "destination-out";
                    var gradient = context.createLinearGradient(0, 0, 0, reflectionHeight);
                    
                    gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");
                    gradient.addColorStop(0, "rgba(255, 255, 255, "+(1-options['opacity'])+")");
        
                    context.fillStyle = gradient;
                    context.rect(0, 0, reflectionWidth, reflectionHeight*2);
                    context.fill();
                }
            }
        } catch (e) {
        }
    },
    
    remove : function(image) {
        if (image.className == "reflected") {
            image.className = image.parentNode.className;
            image.parentNode.parentNode.replaceChild(image, image.parentNode);
        }
    }
}

function addReflections() {
    var rimages = document.myGetElementsByClassName('reflect');
    for (i=0;i<rimages.length;i++) {
        var rheight = null;
        var ropacity = null;
        
        var classes = rimages[i].className.split(' ');
        for (j=0;j<classes.length;j++) {
            if (classes[j].indexOf("rheight") == 0) {
                var rheight = classes[j].substring(7)/100;
            } else if (classes[j].indexOf("ropacity") == 0) {
                var ropacity = classes[j].substring(8)/100;
            }
        }
        
        Reflection.add(rimages[i], { height: rheight, opacity : ropacity});
    }
}

var previousOnload = window.onload;
window.onload = function () { if(previousOnload) previousOnload(); addReflections(); }

Ensuite, pour appliquer la réflexion, aller dans /include/functions.php, chercher :

$avatar_markup = '<img src="'.$pun_config['o_base_url'].'/'.$path.'?m='.filemtime(PUN_ROOT.$path).'" '.$img_size[3].' alt="" />';

Remplacer par :

$avatar_markup = '<img src="'.$pun_config['o_base_url'].'/'.$path.'?m='.filemtime(PUN_ROOT.$path).'" '.$img_size[3].' alt="" class="reflect rheight33" />';

Astuce ajoutée par Bagu

Screen : sanstitre4.png

Dernière modification par Florider (02-02-2011 16:28:07)


Fluxbb ===> smile

Hors ligne

#2 02-02-2011 07:53:36

j-slim
Habitué
Lieu : Bruxelles (Bel)
Inscription : 03-09-2010
Messages : 105
Site Web

Re : Mettre un effet miroir sur chaque avatar 1.4

Un petit aperçu serait le top car ton astuce m'interesse....


Développeur en herbe tongue -- Souvent derrière Notepad à essayer de comprendre ce qu'il ne comprend pas lol

Hors ligne

#3 02-02-2011 11:17:54

qwerty
Habitué actif
Inscription : 01-09-2010
Messages : 278
Site Web

Re : Mettre un effet miroir sur chaque avatar 1.4

Merci, c'est perfect ! wink

Dernière modification par qwerty (02-02-2011 11:18:04)

Hors ligne

#4 03-02-2011 14:48:39

j-slim
Habitué
Lieu : Bruxelles (Bel)
Inscription : 03-09-2010
Messages : 105
Site Web

Re : Mettre un effet miroir sur chaque avatar 1.4

Tout simplement génial big_smile

Merci à toi


Développeur en herbe tongue -- Souvent derrière Notepad à essayer de comprendre ce qu'il ne comprend pas lol

Hors ligne

#5 13-02-2011 00:07:15

El Matador
Régulier
Inscription : 02-09-2010
Messages : 97

Re : Mettre un effet miroir sur chaque avatar 1.4

En gros, tu ne sais pas coder et tu te permets d'aller pomper du code à droite et à gauche sur UW et de le diffuser... pas cool ça.

Hors ligne

#6 13-02-2011 00:27:10

Florider
Habitué actif
Lieu : $noip = '127.0.0.1'; :p
Inscription : 15-02-2010
Messages : 254
Site Web

Re : Mettre un effet miroir sur chaque avatar 1.4

En gros, tu ne sais pas coder et tu te permets d'aller pomper du code à droite et à gauche sur UW et de le diffuser... pas cool ça.

lol alors la je suis mort de rire étang donner que ce code a étais donner dans une section requête par Bagu et a étais reprit par l'administrateur de UW sur ce sujet même donc merci de s'abstenir quand on ne sais par de quoi l'on parle wink
( en gros c'est l'admin de UW qui est venu prendre le code sur le sujet de la requête pour l'installer sur son forum )

et sache que l'on ne pique pas des bout de code mais chacun a la droit d'avoir a sa disposition un code qui est identique au code d'une autre personne

Dernière modification par Florider (13-02-2011 00:29:37)


Fluxbb ===> smile

Hors ligne

#7 13-02-2011 00:37:03

El Matador
Régulier
Inscription : 02-09-2010
Messages : 97

Re : Mettre un effet miroir sur chaque avatar 1.4

Ton forum de Warez est une copie de deux autres forums (tu as même utilisé les Meta Keywords et les Meta Description).

Hors ligne

#8 13-02-2011 00:39:29

Florider
Habitué actif
Lieu : $noip = '127.0.0.1'; :p
Inscription : 15-02-2010
Messages : 254
Site Web

Re : Mettre un effet miroir sur chaque avatar 1.4

Ton forum de Warez est une copie de deux autres forums (tu as même utilisé les Meta Keywords et les Meta Description).

Déjà de une je me suis aider d'un fichier d'une certaine board sans même modifier les meta tu as absolument raisons sur ce point j'ai tord par contre pour dire que je suis une copie alors la tu y va fort car des milliers de forum utilise fluxbb dont nous l'utilisons wink


Fluxbb ===> smile

Hors ligne

#9 13-02-2011 04:55:45

Guims
Habitué très actif
Lieu : Chez GoOgle
Inscription : 07-03-2009
Messages : 891
Site Web

Re : Mettre un effet miroir sur chaque avatar 1.4

110213045840614736.gif

Hors ligne

#10 13-02-2011 10:55:55

Kramer
Régulier
Inscription : 17-12-2009
Messages : 92

Re : Mettre un effet miroir sur chaque avatar 1.4

Florider a écrit :

En gros, tu ne sais pas coder et tu te permets d'aller pomper du code à droite et à gauche sur UW et de le diffuser... pas cool ça.

lol alors la je suis mort de rire étang donner que ce code a étais donner dans une section requête par Bagu et a étais reprit par l'administrateur de UW sur ce sujet même donc merci de s'abstenir quand on ne sais par de quoi l'on parle wink
( en gros c'est l'admin de UW qui est venu prendre le code sur le sujet de la requête pour l'installer sur son forum )

et sache que l'on ne pique pas des bout de code mais chacun a la droit d'avoir a sa disposition un code qui est identique au code d'une autre personne

Parle pas de choses que tu ne connais pas smile

Les codes tu les pompes à droite à gauche, tu poses des questions basiques mais vraiment simple, tu passes vraiment pour un boulet.

Ne pas savoir comment gérer les droits des modérateurs faut le faire quand même ...

Bref, pour moi tu es et restera un boulet.

Hors ligne

#11 13-02-2011 11:04:19

Otomatic
Régisseur
Lieu : Paris, France
Inscription : 12-12-2005
Messages : 3 483
Site Web

Re : Mettre un effet miroir sur chaque avatar 1.4

horssujet et relire règle N° 6


Ce n'est pas parce que l'erreur se propage qu'elle devient vérité. Gandhi
Sont différents : ça et sa - est et ait - à et a - ce et se - mes et mais ou met - été et était - c'est et ces - ce-si et ceci
La vie sans musique est tout simplement une erreur, une fatigue, un exil. Friedrich Nietzsche

Hors ligne

#12 22-06-2011 11:57:03

Xtrem-AW
Habitué actif
Inscription : 19-08-2009
Messages : 339

Re : Mettre un effet miroir sur chaque avatar 1.4

Bonjour, désolé de déterrer le topic, mais est-il possible d'adapter l'astuce sur toute les pages ou l'avatar est afffiché ?

notamment le Profil et les MPs pour moi ? (Mod d'Adaur)

Merci des éventuelles réponses. wink

Hors ligne

#13 22-06-2011 18:05:44

WinuX
Habitué actif
Inscription : 17-07-2010
Messages : 390
Site Web

Re : Mettre un effet miroir sur chaque avatar 1.4

Si j'me trompe pas Xtrem-AW, le reflet est généré si la class "reflect rheight33" est présente sur l'image (avatar).
Il te suffit ensuite de faire les modifications toi même avec quelques condition wink


What's Up : All in One - Sous fluxBB 1.5.0 (on dirait pas?)

Hors ligne

#14 30-10-2011 11:34:01

Anthrax
Habitué
Lieu : Dans Mon Noyau Linux !
Inscription : 15-09-2011
Messages : 100

Re : Mettre un effet miroir sur chaque avatar 1.4

Bonjour,

Merci pour cette astuce, elle fonctionne bien smile

Pour info, j'ai essayé de centrer les avatars, seulement avec les modifications qui vont bien, l'avatar ne se centre pas, à cause de cette astuce.

J'ai donc farfouillé un peu dans les sujets, et je suis tombé sur ce fil.

Et donc la solution de Spiky fonctionne (merci à lui d'ailleurs), vous pouvez trouver la fameuse ligne dans /include/functions.php : (Testé sous FluxBB 1.4.7)

Chercher :

$avatar_markup = '<img src="'.$pun_config['o_base_url'].'/'.$path.'?m='.filemtime(PUN_ROOT.$path).'" '.$img_size[3].' alt="" class="reflect rheight33" />';

Et remplacer par :

$avatar_markup = '<img src="'.$pun_config['o_base_url'].'/'.$path.'?m='.filemtime(PUN_ROOT.$path).'" '.$img_size[3].' alt="" class="reflect rheight33" style="margin: 0 auto; width: 150px; height: 199px;" />';

Et ça fonctionne, à condition d'avoir fait les modifications nécéssaires dans le CSS pour centrer les avatars.

(Je post cela uniquement pour tenir informé ceux qui vont utiliser cette astuce, je ne me l'approprie pas, je relaie...)

Dernière modification par Anthrax (30-10-2011 11:36:08)

Hors ligne

#15 30-09-2013 16:12:55

barbuslex
Habitué actif
Inscription : 05-06-2008
Messages : 200
Site Web

Re : Mettre un effet miroir sur chaque avatar 1.4

Je déterre un peu le sujet...

J'ai appliqué ce script sur mon site mais il ne fonctionne pas si un service de lazyloading des images est appliqué sur l'hébergeur web.

Comment serait il possible de l'adapter pour qu'il fonctionne ?

Hors ligne

#16 30-09-2013 16:46:52

Otomatic
Régisseur
Lieu : Paris, France
Inscription : 12-12-2005
Messages : 3 483
Site Web

Re : Mettre un effet miroir sur chaque avatar 1.4

barbuslex a écrit :

... un service de lazyloading des images est appliqué sur l'hébergeur web.

Bonjour,

En Français de France, ça veut dire quoi ?


Ce n'est pas parce que l'erreur se propage qu'elle devient vérité. Gandhi
Sont différents : ça et sa - est et ait - à et a - ce et se - mes et mais ou met - été et était - c'est et ces - ce-si et ceci
La vie sans musique est tout simplement une erreur, une fatigue, un exil. Friedrich Nietzsche

Hors ligne

#17 30-09-2013 18:04:48

barbuslex
Habitué actif
Inscription : 05-06-2008
Messages : 200
Site Web

Re : Mettre un effet miroir sur chaque avatar 1.4

En effet c'est un peu bizarre comme je l'ai dit lol

En fait le lazyloading charge les images au fur et à mesure du scroll pour charger les pages plus rapidement.
C'est un service que propose gratuitement le service de Google Pages Speed.

Mais du coup le script de réflexion ne s'applique pas correctement...
En gros il faudrait appliquer l'effet reflexion non pas au chargement de la page mais au chargement de l'image...

Dernière modification par barbuslex (30-09-2013 18:05:59)

Hors ligne

Pied de page des forums