Vorschaubilder in der Kategorie

Foren-Übersicht -> Anleitungen und Workshops
Neues Thema eröffnen   Neue Antwort erstellen   

Hat Ihnen dieser Artikel geholfen?
Ja
100%
 100%  [ 3 ]
Nein
0%
 0%  [ 0 ]
Stimmen insgesamt : 3

Adrian: BeitragVorschaubilder in der Kategorie
19.11.2008, 12:47
Hallo,

ich will in diesem Beitrag vorstellen, wie man mit wenig Aufwand große Vorschaugrafiken zu den kleinen Kategoriebildern anzeigen lassen kann.

Benötigte Scripte:
- MooTools 1.2

1. Den Body-Tag folgendermaßen anpassen:

vorher
Code:
<body>


nachher
Code:
<body id="body">


2. CSS-Klasse für die Grafiken vergeben:

Nun muss das Template für die Kategorien geöffnet werden. In welchem Verzeichnis das Template liegt ist davon abhängig welches Theme ihr benutzt.

Dort sucht ihr nach dem <img> Tag für die Produktgrafik und erweitert diesen um folgenden Code:

Code:
class="mt-preview-img"


So könnte der fertige HTML Tag aussehen:

Code:
<img src="{$aProd.aImg.CAT.sPath}" class="mt-preview-img" />


3. JavaScript

Nun muss nur noch das passende JavaScript eingebunden werden, in dem Ihr folgendes in (beispielsweise) die shape_new.tpl schreibt:

Code:
<script type="text/javascript">
{literal}
   $$('.mt-preview-img').each(function(el) {
      el.addEvent('mouseenter', function(e) {
         var el = new Element('img', {
            'src': this.getProperty('src')
         }).setStyles({
            'position': 'absolute',
            'top': (e.page.y + 15),
            'left': (e.page.x + 35)
         }).addClass('mt-preview-image-visible').injectInside($('body'));

         this.addEvent('mousemove', function(e) {
            $$('.mt-preview-image-visible').each(function(el) {
               el.setStyles({
                  'top': (e.page.y + 15),
                  'left': (e.page.x + 35)
               });
            });
         });
      });

      el.addEvent('mouseleave', function(e) {
         this.removeEvent('mousemove', function() {});

         $$('.mt-preview-image-visible').each(function(el) {
            el.destroy();
         });
      });
   });
{/literal}
</script>


Dieser JavaScript-Code kann ebenso gut in einer externen Datei ausgelagert werden. Dann müssen aber die <script> Elemente und Smarty Tags (bsp.: {literal}) entfernt werden.

Anschließend sollten beim Überfahren der kleinen Grafiken etwas größere Grafiken angezeigt werden. Dies ist nur ein Weg zum Ziel, es wird immer davon abhängen welches Theme/Template ihr benutzt. Dementsprechend kann es vorkommen, dass ein Teil des Codes evtl. angepasst werden muss.

Gruß,
Adrian


_________________
FWP Systems GmbH
Website dieses Benutzers besuchen

Foren-Übersicht -> Anleitungen und Workshops

Seite 1 von 1

Neues Thema eröffnen   Neue Antwort erstellen   

Ähnliche Beiträge zu Vorschaubilder in der Kategorie

Beitrag Forum Antworten
Kategorie
(Erstellt von GrandThinker am 11.12.2008, 17:38)		 Installation und Einrichtung 2
Kategorie URL ändern
(Erstellt von r am 29.10.2008, 12:00)		 Individuelle Erweiterungen 1
Link auf Vater-Kategorie
(Erstellt von Dibbler am 28.09.2008, 11:20)		 Design-Anpassungen 0
*gelöst* Kategorie ändern und löschen
(Erstellt von newBeginner am 05.08.2008, 18:46)		 Allgemeine Fragen 7