Forum
13.09.2007, 16:59

3D-Artikel-Karussell

Sehr geehrte Kunden,

sie möchten sich in Richtung Weihnachtsgeschäft wieder von der Konkurrenz weiter abheben? POWERGAP hilft Ihnen dabei mit einer schönen neuen Funktion, die wir wieder quasi als erstes System integriert anbieten.

3D-Artikel-Karussell

Mit dieser Flashanimation kann man seine Artikel mit einem Flash-Karussell auf allen Startseiten im Shop präsentieren.

Auf dem u.a. Screenshot sieht man ein solches Karussell und mit Klick auf diesen Screenshot gelangt man in unseren Demo-Shop, auf dessen Startseite der Artikelgruppe "Musik-CDs" ein solches Flash-Karussell aktiviert ist.

Mit einem Klick auf das dort angezeigte Element aktiviert man diese Flashfunktion so, dass man die Grafiken mit der Maus auch selbst hin und her bewegen kann. Dabei lässt sich auch der horizontale Blickwinkel ändern, was eine sehr schöne Tiefenwirkung hat. Probieren Sie es einfach mal selbst aus!



Damit diese Animation dargestellt werden kann, ist die Installation des Adobe Flashplayers nötig, welcher in 95% aller Fälle bereits im Browser vorinstalliert und aktiviert ist oder aber über den folgenden Link herunterladen werden kann.



Wir mussten aber leider feststellen, dass dies bisher nicht immer in allen Browsern tadellos funktioniert hat. So stellt der IE 6 die Animation auf Anhieb sofort dar, im IE 7 mussten wir seltsamerweise mehrfach die Seite aktualisieren, bis die Animation dargestellt wurde. Auch beim Firefox klappten nicht alle Tests auf anhieb.

Zur Aktivierung der Funktion ist im Prinzip nur eine Kleinigkeit nötig:

Über "Layout" > "Startseite" > Infogruppen (Startseite) muss lediglich in einem Feld eines der "3d Karusselle" aktiviert werden.



Mit einem anschließenden Klick auf den verlinkten Text (z.B.) "3D-Karussell 01" gelangt man in die Pflegemaske dieses Infotyps.

Diese ist vom Aufbau dem Standard bis auf einige Einstellungsmöglichkeiten sehr ähnlich:

Neu sind die Felder "XML", "CSS" und "Picture".




Feld XML:
<background>0xFFFFFF</background>

<interaction>
        <rotation>mouse</rotation>
        <speed>100</speed>
        <view_point>mouse</view_point>
        <console>onClick</console>
</interaction>

<far_photos>
        <size>50</size>
        <amount>25</amount>
        <transparency>true</transparency>
</far_photos>

<reflection>
        <amout>200</amout>
        <blur>5</blur>
        <distance>10</distance>
        <alpha>50</alpha>
</reflection>


Feld CSS:
width: 100%;height: 300px;align:center;border:0px solid #CCCCCC;





Über das XML-Feld lässt sich die Animation konfigurieren.

background: z.B. 0xFFFFFF
Farbeinstellung des Artikel-Bild-Hintergrundes inkl. Spiegelung

interaction:

rotation: auto, mouse, keyboard
Rotation der Artikelbilder automatisch, per Mauszeiger oder mit den Pfeiltasten der Tastatur

speed: -360,360
Geschwindigkeit der Rotation
-360 = sehr schnell gg. den Uhrzeigersinn
360 = sehr schnell mit dem Uhrzeigersinn
0 = keine Rotation
(Vorzeichen macht nur Sinn bei Einstellung "auto")

console: show, hide, onClick
Keine nennenswerte Bedeutung

far_photos:

size: 0,100
Prozentuale Größe des hintersten Bildes abhängig vom vordersten Bild

amount: 0,100
Breite des Karussells
0 = keine Verzerrung
100 = starke Verzerrung

transparency: true, false
Transparenz der Bilder im Hintergrund an / aus

reflection:

amout: 0,1000
Höhe des Spiegelung
0 = sehr niedrig
1000 = sehr hoch

blur: 0,100
Verzerrung der Spiegelung

distance: -1000,1000
Abstand zwischen Original und Spiegelung

alpha: 0,100
Itensität der Spiegelung
0 = sehr niedrig bzw. aus
100 = hoch




Über das CSS-Feld können weitere Einstellungen vorgenommen werden.

width: 100%; = Breite der Gesamtanimation im Verhältnis zum Infotypen
height: 300px; = Höhe der Gesamtanimation
align:center; = Ausrichtung der Gesamtanimation
border:0px solid #CCCCCC; = Möglicher Rahmen um die Gesamtanimation




Über das Picture-Feld lässt sich bestimmen, welche Bilder für die Animation verwendet werden sollen.
0 = Thumb (Vorschaubild, 123t.jpg)
1 = Pic (Artikeldetailbild, 123p.jpg)




Über die Felder Artikel-Nr., Anzahl, Artikelgruppe, etc. lassen sich wie bei den anderen Infotypen auch feste Artikelnummern (mit je Semikola getrennt), Artikelanzahl oder Artikelgruppen, etc. zuordnen. Dabei gilt entweder feste Artikelnummern, oder x Zufallsartikel nach den durch die Dropdowsn eingegrenzten Kriterien.

Texte in Textfeld 1 bzw. 2 erscheinen über bzw. unter der Animation.

Beachten Sie bitte, dass zu viele Animationen auf einer Seite auch die Usability eher stören können. Beispielsweise oben im Demo-Shop ist auf der Seite gleichzeitig noch ein Ticker aktiviert. Das erscheint eigentlich schon zu gestresst.

Bitte beachten Sie, dass die Nutzung dieses Features eigentlich nur für private Webseiten kostenlos ist. Siehe Lizenzbedingungen ganz unten unter www.dsi.uniroma1.it/~caminiti/slideshows/. Das Flash Modul ist also nicht von uns programmiert, sondern wir bieten Ihnen nur eine schnelle Möglichkeit den dafür nötigen Quellcode in Ihrem Shop zu integrieren.

Seien Sie so fair und kommen Sie der Aufforderung nach per Paypal an den Entwickler eine kleine Spende zu überweisen.


Forum-Archiv

Alle Beiträge aus:

2026, 2025, 2024, 2023, 2022, 2021, 2020, 2019, 2018, 2017, 2016, 2015, 2014, 2013, 2012, 2011, 2010, 2009, 2008, 2007, 2006, 2005, 2004, 2003, 2002,