Benutzername: Passwort:  
Das Shop Forum für die Onlineshop Software Lösungen. Die kostenlosen Shoplösungen bieten Ihnen enorme Möglichkeiten für Ihren eigenen Online Shop. Vergleichen Sie die Shop Systeme und überzeugen Sie sich von den Leistungen der Shops. Einen Onlineshop erstellen ohne Vorkenntnisse in Programmiersprachen.

Wir bieten Ihnen Hilfe bei der Installation und Einrichtung und der Design Anpassung der Templates, sowie Marketing und SEO Tips.

Support
Forum-Übersicht -> FAQ
Neues Thema eröffnen    Neue Antwort erstellen   


Vorschaubilder in der Kategorie


Hat Ihnen dieser Artikel geholfen?
Ja
80%
 80%  [ 4 ]
Nein
20%
 20%  [ 1 ]
Stimmen insgesamt : 5

Adrian: BeitragVorschaubilder in der Kategorie (19.11.2008, 13:47)
  • FWP Mitarbeiter
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

Forum-Übersicht -> FAQ

Seite 1 von 1

Neues Thema eröffnen   Neue Antwort erstellen   

Ähnliche Beiträge zu Vorschaubilder in der Kategorie

Beitrag Forum Antworten
Bekomme keine Kategorie angelegt
(Erstellt von Haschi am 15.02.2012, 21:40)		 Installation und Einrichtung 0
Kategorie anlegen im Medienpool
(Erstellt von Jonas [FWP] am 30.06.2011, 7:56)		 Installation und Einrichtung 1
Kategorie anzeige
(Erstellt von luckas am 10.02.2011, 10:38)		 Funktionsfragen 1
Kategorie anlegen
(Erstellt von Gelbseidenraupe am 11.01.2011, 10:31)		 Installation und Einrichtung 8
Kategorie und Produkte
(Erstellt von johanness am 07.12.2010, 16:01)		 Funktionsfragen 5