3D Image Slider

3D Image Slider

CU3ER ist ein 3D Image Slider von Stefan Kovac. Dieser Slider basiert auf Flash und stellt interessante Effekte zur Verfügung. Ohne große Programmierkenntnisse kann der Anwender eine auf die Website angepasste Reihenfolge der Bildershow festlegen.

Neben horizontalen und vertikalen Übergängen ist auch eine Autoplay-, Preloader-Funktion einbaubar. Selbstverständlich können die Bilder auch mit Beschreibungstexten versehen werden.

CU3ER ist für nicht-kommerzielle Websites kostenlos nutzbar. Für kommerzielle Seiten wird eine Gebühr erhoben. Näheres ist auf der Website von CU3ER beschrieben. Dort ist auch das Package downloadbar...

Die Bilderslideshow basiert auf Flash, lässt sich jedoch über eine XML-Datei sehr einfach steuern und nach Belieben anpassen.

Ich habe hierzu eine Demoseite angelegt und möchte anschließend den Einbau in die eigene Seite anhand dieses Beispiels erläutern.

Vorbereitung

Die Dateien aus dem Cu3er-Package habe ich wie folgt aufbereitet.

In das Verzeichnis /images lege ich die zugehörigen Bilder für die 3D-Slideshow ab. In meinem Beispiel habe ich die Bilder bild_1.jpg bis bild_6.jpg benannt. Die 6 Bilder haben eine Größe von 780 x 350 Pixeln.

Im Verzeichnis /js/swfobject sind zwei Dateien von cu3er abgelegt. Im Hauptverzeichnis liegt die cu3er.swf und XML-Konfigurationsdatei config.xml.

Einbau in die eigene Seite

In die HTML-Datei unserer Seite setzen wir in den Headbereich folgenden Code ein.

<script type="text/javascript" src="/js/swfobject/swfobject.js"></script>
 
<script type="text/javascript">
        var flashvars = {};
        flashvars.xml = "config.xml";
        flashvars.font = "font.swf";
        var attributes = {};
        attributes.wmode = "transparent";
        attributes.id = "slider";
        swfobject.embedSWF("cu3er.swf", "cu3er-container", "960", "350", "9", "expressInstall.swf", flashvars, attributes);
</script>
 


Beachten wir hier, das bei swfobject.embedSWF in der Klammer der Verweis auf den cu3er Container und die Abmaße von 960 x 350 Pixeln für die Bilder stehen. Die eigentlichen Bilder sind zwar nur 780 Pixel breit, es wird aber noch mehr Platz für die Vor- und Zurück-Buttons benötigt. Daher die gewählten 960.

Cu3er Container ergänzen

Der folgende Code-Teil kommt innerhalb des <body> Tags an die entsprechende Stelle wo die Bilder Slideshow erscheinen soll.
 

<div id="cu3er-container">
        <a href="http://www.adobe.com/go/getflashplayer">
        <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
        </a>
     </div>

 

Die XML-Konfigurationsdatei

Nun gilt es noch die config.xml auf die Bedürfnisse der Slideshow anzupassen.

<?xml version="1.0" encoding="utf-8" ?>
<cu3er>
     
    <settings>
    <general 
    slide_panel_width="780"
    slide_panel_height="350"
    slide_panel_horizontal_align="center"
    slide_panel_vertical_align="center"
   
      ui_visibility_time="6"
    />
        <auto_play>
            <defaults symbol="circular" time="7" />
                <tweenIn x="840" y="30" width="35" height="35" tint="0xFFFFFF" />
        </auto_play>
        <prev_button>
            <defaults round_corners="5,5,5,5"/>
            <tweenOver tint="0x14a7ff" scaleX="1.1" scaleY="1.1"/>
            <tweenOut tint="0x000000" />
        </prev_button>
         
        <prev_symbol>
        <defaults type="3"/>
            <tweenOver tint="0x000000" />             
        </prev_symbol>
         
        <next_button>
            <defaults round_corners="5,5,5,5"/>             
            <tweenOver tint="0x14a7ff"  scaleX="1.1" scaleY="1.1"/>
            <tweenOut tint="0x000000" />
        </next_button>
         
        <next_symbol>
        <defaults type="3"/>
            <tweenOver tint="0x000000" />
        </next_symbol>     
         
        <description>
            <defaults
            round_corners="0, 0, 0, 0"
 
            heading_font="Verdana"
            heading_text_size="22"
            heading_text_color="0xFFFFFF"          
            heading_text_margin="10, 0, 0,10"  
 
            paragraph_font="Verdana"
            paragraph_text_size="13"
            paragraph_text_color="0xFFFFFF"
            paragraph_text_margin="10, 0, 0, 10"       
            />
            <tweenIn tint="0x000000"  x="100" y="250" alpha="0.7" width="500" height="80" />
            <tweenOut time=".5" />
            <tweenOver tint="0x000000" alpha="1.0" />
        </description>
    </settings>    
 
    <slides>
     
        <slide>
            <url>images/bild_1.jpg</url>
    </slide>
    <!-- changing transition between first & second slide -->
        <transition num="3" slicing="vertical" direction="down" shader="flat"/>
        <slide>
               <url>images/bild_2.jpg</url>
            <description>
            <heading>Magic Moments</heading>
        <paragraph>Horizontale und vertikale Überblendungen</paragraph>
        </description>
        </slide>         
    <!-- changing transition between second & third slide -->
        <transition num="4" direction="right" shader="flat" />
    <slide>
            <url>images/bild_3.jpg</url>
        </slide>
        <!-- transitions properties defined in transitions template -->
    <transition num="2" direction="left" shader="flat" />
    <slide>
               <url>images/bild_4.jpg</url>
            <description>
            <heading>Leicht konfigurierbar</heading>
        <paragraph>Über eine XML Datei sind die Slides einstellbar</paragraph>
        </description>
        </slide>
    <transition num="6" slicing="vertical" direction="up" shader="flat" delay="0.05" z_multiplier="4" />
        <slide>
               <url>images/bild_5.jpg</url>
        </slide>
    <transition num="3" slicing="vertical" direction="down" shader="flat"/>
        <slide>
               <url>images/bild_6.jpg</url>
            <link target="_self">index.html</link>        
        <description>
            <link target="_self">index.html</link>    
        <heading>Zum Workshop</heading>
        <paragraph>Grafiken und Titel sind verlinkbar - klick mich ...</paragraph>
        </description>
        </slide>
                 
    </slides>
</cu3er>

Denken wir daran, das hier auch die Bildmaße 780 x 350 Pixel hinterlegt sind. Mit <auto_play> wird die Slideshow automatisch gestartet. Über <defaults symbol="circular" time="7" /> bleibt jedes Bild 7 Sekunden sichtbar bevor es horizontal oder vertikal umgeklappt wird. Innerhalb der <slide> Anweisung verweise ich auf das zuladende Bild. Mit <transition .../> lege ich die Art des Umklappens fest.

Das war es schon. Hier mein Beispiel nochmal als Demoseite ...

 
Diese Website benutzt Cookies. Wenn du die Website weiter nutzt, gehen wir von deinem Einverständnis aus. Mehr Information findest du in unserer Datenschutzerklärung.
OK