Reflekion

  • Hallo


    Kann man auf einer Seite nur ein Bild mit Reflekion anzeigen lassen ?


    Möchte gerne in News bereich 1x und auf den Artikelseite 2x ein refelkten anzeigen lassen


    gehat das den nicht ?


    Danke Euch


    Dany

  • Hallo Dany,


    Reflektion ist eigentlich ein Javaxript-Code. Bei ZP ist es so, dass der Reflektion-Artikel mit EINEM Bild verbunden ist. Du kannst aber natürlich mehrere Reflektion-Artikel untereinander anordnen. Es würde daher bei dir gehen: 1x Reflektion im News-Bereich und 2x im Artikelbereich untereinander.


    Theoretisch könntest du aber dir mittels dem Javascript Code auch eine eigene Anordnung "basteln":


    <script type="text/javascript">
    document.getElementsByClassName = 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) {
    if(p.parentElement.tagName == 'A') {
    var d = document.createElement('a');
    d.href = p.parentElement.href;
    }

    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.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) {
    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;
    if (navigator.appVersion.indexOf('WebKit') != -1) {
    context.fill();
    } else {
    context.fillRect(0, 0, reflectionWidth, reflectionHeight*2);
    }
    }
    }
    } 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.getElementsByClassName('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(); }
    </script>



    Gruß Robert

  • Hallo Zusammen


    Robert


    Also wenn ich das jetzt richtig verstanden habe gehts das Original beim Zeta nicht wenn ich verschiedene Bilder mit dem Reflektion haben möchte auf einer seite. Da müssteich eben was basteln mit dem Code.



    Rico


    Die Idee mit dem Spiegeln im Fotoshop habe ich versucht und es klapte besten dank für den Tip


    es ist natürlich mühsam wenn ich alle Bilder zuerst so bereitstellen muss aber ist eine Gute idee


    Danke Euch


    Dany

  • Hallo,


    natürlich kannst du verschiedene Bilder auf einer Seite als Reflektion darstellen. Aber du brauchst für jedes Bild einen Reflektion-Artikel - und die lassen sich nur untereinander anordnen. Reflektions nebeneinander lassen sich nur über Javascript erzeugen oder man wählt den einfacheren Weg über ein Bildbearbeitungsprogramm. Dann muss man aber jedes Bild händisch nachbearbeiten.


    Gruß Robert