Joomla – jQuery Bild Effekt von Schwarz-Weiß bei Mouse Over in Farbe

Für eine Webseite mit dem aktuellen Joomla 3.5.x habe ich einen Bildeffekt programmiert, der für ein klein wenig Abwechslung auf der Seite sorgen soll.

Bild Effekt S/W in Farbe

Bild Effekt S/W in Farbe

Funktionsweise

Das Bild wird über den Artikel oder ein Modul als ganz normal hinterlegtes schwarz/weiß Bild geladen. Es bekommt eine CSS Klasse für den Effekt, hier „imagechanger“ als Zuweisung. Geht man nun mit der Maus über das Bild, wird es von schwarz/weiß in das passende Farbbild getauscht. Verlässt man mit der Maus das Bild, wird wieder das schwarz/weiß Bild geladen.

Voraussetzungen

  • beide Dateien sind auf dem Server im selben Verzeichnis abgelegt
  • beide Dateien haben die selbe Höhe und Breite
  • das S/W Bild hat vor der Dateiendung „-sw“ im Namen
  • das farbige Bild hat den gleichen Namen wie das S/W Bild jedoch ohne „-sw“ im Namen

Nachfolgend für mich quick und dirty die Notizen dazu:

Joomla Template /template/dein-template/index.php

// Add JavaScript Frameworks
JHtml::_(‚bootstrap.framework‘);
$doc->addScript($this->baseurl . ‚/templates/‘ . $this->template . ‚/js/template.js‘);
$doc->addScript(‚templates/‘ .$this->template. ‚/js/imagechanger.js‘); //hinzufügen

Joomla Template /template/dein-template/js/imagechanger.js Verzeichnis

jQuery(document).ready(function(){
jQuery(„.imagechanger“).hover(function () {
var fullpath    = this.src;
var new_path    = fullpath.replace(„-sw“,““)
this.src= new_path;
},
function () {
var fullpath    = this.src;
var index         = fullpath.lastIndexOf(„/“) + 1;
var index2         = fullpath.lastIndexOf(„.“);
var filename     = fullpath.substr(index);
var path        = fullpath.substr(0, index2);
var extension     = filename.replace(/^.*\./, “);
var new_path    = path+‘-sw.’+extension;
this.src= new_path;
});
})

Das funktioniert soweit super, ist aber zugegebenermaßen ausbaufähig, wie die Prüfung auf die existierende Datei 🙂

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.