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.

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 🙂

JARVIS

Interessiert in verschiedenste IT Themen, schreibe ich in diesem Blog über Software, Hardware, Smart Home, Games und vieles mehr. Ich berichte z.B. über die Installation und Konfiguration von Software als auch von Problemen mit dieser. News sind ebenso spannend, sodass ich auch über Updates, Releases und Neuigkeiten aus der IT berichte. Letztendlich nutze ich Taste-of-IT als eigene Dokumentation und Anlaufstelle bei wiederkehrenden Themen. Ich hoffe ich kann dich ebenso informieren und bei Problemen eine schnelle Lösung anbieten. Wer meinen Aufwand unterstützen möchte, kann gerne eine Tasse oder Pod Kaffe per PayPal spenden – vielen Dank.