Mit diesem Tutorial können Sie mittels dem Media Manager, einen Slider erstellen für Ihren Shop
1. Laden Sie sich CarouselFred runter unter http://caroufredsel.dev7studios.com/ und gegebenenfalls die aktuelle Jquery
(WIchtig: beim Austausch der vorhandenen Jquery mit der aktuellen, funktioniert die Thickbox nicht, dazu haben wir aber ein zusätzliches TUtorial erstellt:
http://www.pixeleyes.de/de/Thickbox-ersetzen-mit-Colorbox.html?faq_id=3&item_id=28
2. Kopieren Sie die Datei jquery.carouFredSel-4.5.2.js in den javascript Ordner Ihres Templates (xt_default/javascript/)
3. Fügen Sie nach den EIntrag "....jquery.js" folgende Passage in die Datei xt_Default/javascript/js.php
4. fügen Sie folgenden CSS COde in xt_default/css/Stylesheets.css am Ende ein:
/* CAROUSEL */ .caroufredsel_wrapper { overflow: hidden !important; } #Slidertopinner { float: left !important; overflow: hidden; } .Slidertop1000 { height: 458px; overflow: hidden; padding: 0; position: relative; } .Slidertop1000 img { display: block; float: left; margin: 0; padding: 0; vertical-align: middle; } .Slidertop1000 a.prev, a.next { background: url("../images/miscellaneous_sprite.png") no-repeat scroll 0 0 transparent; display: block; height: 40px; position: absolute; top: 85px; width: 45px; } .Slidertop1000 a.prev { background-position: 0 -20px; left: -20px; top: 204px; } .Slidertop1000 a.prev:hover { background-position: 0 -20px; } .Slidertop1000 a.next { background-position: -9px -65px; right: -20px; top: 204px; } .Slidertop1000 a.next:hover { background-position: -9px -65px; } .Slidertop1000 a.prev span, a.next span { display: none; } .Slidertop1000 .clearfix { clear: both; float: none; } .Slidertop1000 div.pagination { bottom: 10px; height: 15px; padding: 10px 40px 0 0; position: absolute; text-align: center; width: 100%; z-index: 1000; } .Slidertop1000 div.pagination a { background: url("../images/miscellaneous_sprite.png") no-repeat scroll -12px -217px transparent; display: inline-block; height: 15px; margin: 0 5px 0 0; width: 15px; } .Slidertop1000 div.pagination a.selected { background-position: -37px -217px; cursor: default; } .Slidertop1000 div.pagination a span { display: none; }
5. Erstellen SIe ein neues template z.b. "Box_Slider" im Ordner plugins/pix_media_manager/templates/ mit folgenden COde:
{if $media!=''}{literal} {/literal}
{if $item_data.item_link != '#'}{/if} {if $item_data.item_description}{$item_data.item_description}{/if}{/if}
6. Erstellen Sie eine Neue Media Gruppe z.b. Slider , wählen Sie das erstellte Template aus und setzen Sie einen Haken bei "Auf Startseite anzeigen"
7. Erstellen Sie zur Gruppe, dann Items und laden SIe die Bilder hoch (1000 x 300 )
8. Fügen Sie in ihrer index.html ihres Templates folgendes ein und ersetzen SIe "IHRE ERSTELLTE GRUPPENID" mit der ID ihrer erstellten Gruppen ID (Punkt 6) :
{show_media startseite="1" type="item" id="IHRE ERSTELLTE GRUPPENID" show="all"}