Thumbnails Grayscale

DaBe

Hallo

Gibt es eine Möglichkeit die Thumbnails Schwarz/Weiss anzuzeigen und bei Mouseover farbig.

mit dem: Filter: gray
geht es, aber nur im IE. Gibt es da eine möglichkeit die auch im Firefox anzuzeigen. die anderen browser sind mir egal, da ihc denke, dass sind von 100 besuchern gerade mal 2 oder so.

eventuell mit jquery oder sowas?
weiss nicht nach was ich bei google suchen muss..hab schon mehrere seiten angeschaut aber nie war das richtige dabei.

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

telekommander

Hier: http://www.pixastic.com/lib/

DaBe

hmm..danke. blicke da abr nicht ganz durch.

kannst du mir das einwenig erklären bitte?

danke

telekommander

Nein, das würde hier Seiten füllen. Orientiere dich bitte an der Doku.

Zunächst würde ich nur das runterladen was wirklich benötigt wird, Core-files und den entsprechenden Effekt den du willst, in deinem Fall wäre das Desaturate.

Wie es eingebunden wird steht hier. Da der gleiche Effekt schon als Demo gezeigt wird, lohnt sich ein Blick in den Quellcode der Seite um schlauer zu werden.

DaBe

Hallo

Ok. Ich habe nun folgendes gemacht. Die pixastic.custom.js habe ich heruntergeladen.

nun habe ich folgende zeile in den header meiner seite eingefügt:
<script type='text/javascript' src='http://www.domain.ch/pixastic.custom.js'></script>
<script type="text/javascript">
function desaturate(img) {
var img2 = Pixastic.process(img, "desaturate");
img2.onmouseout = function() {
Pixastic.revert(this);
}
}
</script>

anschliessend habe ich folgende test gemacht:

in der index eingefügt.

das bild test.jpg wird farbig angezeigt..aber ich es ändert sich,...

eine andere frage...kann man dies auch umdrehen, dass greyscale am anfang ist und es dann farbig wird.

telekommander

Wäre 'ne Möglichkeit:

HTML

<script type="text/javascript">


	function desaturate(img) {
		var img2 = Pixastic.process(img, "desaturate");
		img2.onmouseover = function() {
			Pixastic.revert(this);
		}
		img2.onmouseout = function() {
			desaturate(this);
		}
	}
	
</script>


<p>
<img src="http://www.pixastic.com/sample/Flower.jpg" onload="desaturate(this);" alt=""/>
</p>

Alles anzeigen

DaBe

Ich habe jetzt was gefunden was mit js arbeitet. wenn ich eine testseite einrichte funktionierts..wenn ich aber das ganze mit dem postthumb plugin mache geht es nicht..weshalb?

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">


<head>


<meta http-equiv="Content-Language" content="en-us">


<title>Have some fun :)</title>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<script language="javascript">
function prepareMouseOverImage(image, originalURL)
{
    image.mouseOverImage=originalURL;
    image.onload=function(){return true;};
    image.normalImage=grayscale(image, false);
    
    image.onmouseover=function()
    {
    //alert("a");
        this.src=this.mouseOverImage;
    }
    
    image.onmouseout=function()
    {
//    alert(this.normalImage.src);
        this.src=this.normalImage;
    }
    image.src=image.normalImage;    
}




function grayscale(image, bPlaceImage)
{
  var myCanvas=document.createElement("canvas");
  var myCanvasContext=myCanvas.getContext("2d");


  var imgWidth=image.width;
  var imgHeight=image.height;
  // You'll get some string error if you fail to specify the dimensions
  myCanvas.width= imgWidth;
  myCanvas.height=imgHeight;
//  alert(imgWidth);
  myCanvasContext.drawImage(image,0,0);
  // this function cannot be called if the image is not rom the same domain.  You'll get security error
  var imageData=myCanvasContext.getImageData(0,0, imgWidth, imgHeight);
  for (i=0; i<imageData.height; i++)
  {
    for (j=0; j<imageData.width; j++)
    {
      var index=(i*4)*imageData.width+(j*4);
      var red=imageData.data[index];     
      var green=imageData.data[index+1];
      var blue=imageData.data[index+2];     
      var alpha=imageData.data[index+3];    
      var average=(red+green+blue)/3;      
        imageData.data[index]=average;     
        imageData.data[index+1]=average;
        imageData.data[index+2]=average;
        imageData.data[index+3]=alpha;           
    }
  }
  myCanvasContext.putImageData(imageData,0,0,0,0, imageData.width, imageData.height);
// myCanvasContext.drawIMage(imageData,0,0);//,0,0, imageData.width, imageData.height); 
 
  if (bPlaceImage)
  { 
      var myDiv=document.createElement("div"); 
      myDiv.appendChild(myCanvas);
      image.parentNode.appendChild(myCanvas);//, image);
  }
  return myCanvas.toDataURL();
}


</script>


</head>
<body id="body">


<div class="contentShadow">


<div class="content">






<img src="http://www.domain.ch/test.jpg" width="250" height="250" id="myImage" onload="javascript:prepareMouseOverImage(this, 'http://www.domain.ch/test.jpg
');"></img>






</body>


</html>

Alles anzeigen

So sieht die Testseite aus, welche funktioniert.

WEnn ich nun den JS teil in meinen wp header einfüge und dann die post thumb ausgabe so anpasse:

Code

// Starts output using no javascript library
        else {
            if ($this->showpost || !$this->has_image)
                $this->html = $this->n.'<a href="'.$this->post_url.'"';
            elseif ($this->showlink)
                $this->html = $this->n.'<a href="'.$this->default_link.'"';
                    else
                $this->html = $this->n.'<a href="'.$this->the_image.'"';


                    $this->html .= ' title="'.htmlspecialchars($this->title).'"';
            if ($this->myclasshref !='') $this->html .= ' class="'.$this->myclasshref.'"';
            $this->html .= '>';


            $this->html .= $this->nt.'<img src="'.$this->thumb_url.'" alt="'.htmlspecialchars($this->alt_text).'"
 id="myImage" onload="javascript:prepareMouseOverImage(this, "'.$this->thumb_url.'");"';


                $this->html .= $this->myclassimg;
                $this->html .= $this->align;
                    $this->html .= ' </img>'.$this->n.'</a>';
        }


        if ($this->show_title != '') $this->get_add_html();
        
        return $this->html;


    }

Alles anzeigen

geht es nicht.

Die Ausgabe im Quellcode von der Testseite:

Code

<img src="http://www.domain.ch/test[URL="http://forum.wordpress-deutschland.org/view-source:http://54art.ch/bild12.jpg"].jpg[/URL]"  id="myImage" onload="javascript:prepareMouseOverImage(this, 'http://www.domain.ch/test[URL="http://forum.wordpress-deutschland.org/view-source:http://54art.ch/bild12.jpg"].jpg[/URL]');"></img>

Die Ausgabe im Quellcode vom Post Thumb plugin:

Code

<img src="http://www.domain.ch/test[URL="http://forum.wordpress-deutschland.org/view-source:http://54art.ch/bild12.jpg"].jpg[/URL]" alt="" id="myImage" onload="javascript:prepareMouseOverImage(this, "http://www.54art.ch/wp-content/uploads/pth/thumb_10025.jpg");" ></img>

Wo liegt der Fehler?

telekommander

Die Ausgabe der Bild-Url, bzw. die Anführungszeichen

Code

( ... ) onload="javascript:prepareMouseOverImage(this, [COLOR="Red"]"[/COLOR]http://www.54art.ch/wp-content/uploads/pth/thumb_10025.jpg[COLOR="Red"]"[/COLOR]);" >

So besser ?

Code

( ... ) onload="javascript:prepareMouseOverImage(this, [COLOR="Red"]\'[/COLOR].$this->thumb_url.[COLOR="Red"]\'[/COLOR]);"'; ( ... )

DaBe

GEIL DANKE

und sorry für die umstände.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Thumbnails Grayscale

Jetzt mitmachen!