FULLSCREEN. ShoPWArE VollBIlD-PluGIn. handbuch

FULLSCREEN ShoPWArE VollBIlD-PluGIn handbuch

FULLSCREEN ShoPWArE PluGIn

Inhaltsverzeichnis Bildgröße für Vollbildansicht konfigurieren 04 Variante 1: Thumbnail in der Shopware Medienverwaltung anlegen 04 Empfohlen für neue Shops ohne Artikelbilder Variante 2: Thumbnail durch Fullscreen Plugin erstellen 07 Empfohlen für bestehende Shops mit vielen Bildern Variante 3: Thumbnail in der Datenbank anlegen 11 Empfohlen für Agenturen und Entwickler Bilder neu berechnen 12 Allg. Plugin Konfiguration 14 Ansicht im Artikel 15 Shopware-Template Standardfarben 16 Fullscreen für Agenturen und Template-Entwickler 17 Anhang A Javascript Template 18 Anhang B Frontend Template 19 webweit 2013 3

BildgröSSe für Vollbildansicht konfigurieren Variante 1: Thumbnail in der Shopware Medienverwaltung anlegen Hinweis: Diese Variante empfehlen wir für neue Shops ohne Artikelbilder. Die gewünschte Bildgröße zur Verwendung in der Vollbild-Ansicht kann frei bestimmt werden. Hierzu kann das Artikel-Album um die entsprechende Größe erweitert werden. Wählen Sie im Menü Inhalte den Menüpunkt Medienverwaltung. Wählen Sie im Medienmanager das Album Artikel webweit 2013 4

BildgröSSe für Vollbildansicht konfigurieren Variante 1: Thumbnail in der Shopware Medienverwaltung anlegen Klicken Sie mit der rechten Maustaste auf das Album und wählen Sie Eigenschaften Geben Sie im Feld Thumbnail-Größe die von Ihnen gewünschte Bildgröße für die Vollbild-Ansicht ein (wir empfehlen 1920x1080) und klicken Sie Thumbnail erstellen Klicken Sie danach auf Einstellungen speichern webweit 2013 5

BIlDGröSSE Für VollBIlDAnSIchT KonFIGurIErEn Variante 1: Thumbnail in der Shopware Medienverwaltung anlegen Merken Sie Sich die ziffer, die im Quadrat oberhalb Ihrer neu erstellten Thumbnail-Größe angezeigt wird. (Standardmäßig 6) Wichtiger Hinweis: Beim Speichern der neuen Einstellungen kann folgende (oder eine ähnliche) Fehlermeldung angezeigt werden: In diesem Falle konnte Shopware die Bilder nicht vollständig berechnen, in einigen Fällen wird auch die Thumbnail-Einstellung im Album nicht gespeichert. (um dies zu prüfen, schließen Sie bitte die Medienverwaltung, öffnen Sie erneut und prüfen unter den Eigenschaften des Artikel-Albums, ob die von Ihnen gewählte Größe angezeigt wird). Als lösung bietet das Plugin sowohl eine Funktion zur Erstellung der gewünschten Thumbnail- Größe (Siehe Variante 2 in diesem Abschnitt), als auch eine eigene Funktion zur Berechnung der Bilder, diese finden Sie im handbuch im Abschnitt Bilder neu berechnen. WEBWEIT 2013 6

BildgröSSe für Vollbildansicht konfigurieren Variante 2: Thumbnail durch Fullscreen Plugin erstellen Hinweis: Diese Variante empfehlen wir für bestehende Shops mit vielen Bildern. Wählen Sie im Menü Inhalte den Menüpunkt Medienverwaltung. Wählen Sie im Medienmanager das Album Artikel webweit 2013 7

BildgröSSe für Vollbildansicht konfigurieren Variante 2: Thumbnail durch Fullscreen Plugin erstellen Klicken Sie mit der rechten Maustaste auf das Album und wählen Sie Eigenschaften Merken Sie Sich die höchste Nummer, als Thumbnail-Größe hinterlegt ist (im gezeigten Beispiel 5 ). Schließen Sie die Einstellungen und die Medienverwaltung. webweit 2013 8

BildgröSSe für Vollbildansicht konfigurieren Variante 2: Thumbnail durch Fullscreen Plugin erstellen Wählen Sie im Menü Einstellungen den Menüpunkt Plugin-Manager. Wählen Sie im Abschnitt Meine Erweiterungen den Menüpunkt Community Erweiterungen. Suchen Sie das Plugin Fullscreen in der Liste und klicken auf den Stift in der Spalte Aktionen. Setzen Sie den Wert der Option Thumbnail Index für Bilder in Vollbild-Ansicht auf die Zahl, die Sie Sich weiter oben gemerkt haben + 1 (in unserem Beispiel "5+1" = "6" ). Setzen Sie die Werte der Optionen Bildbreite Vollbild und Bildhöhe Vollbild auf die von Ihnen gewünschten Größen für die Vollbild-Ansicht (wir empfehlen 1920x1080). Speichern Sie die Eingaben mit Klick auf Plugin-Einstellungen speichern und schließen Sie den Plugin-Manager. webweit 2013 9

BildgröSSe für Vollbildansicht konfigurieren Variante 2: Thumbnail durch Fullscreen Plugin erstellen Rufen Sie in Ihrem Browser die URL http://ihre-shop-url/backend/webfullscreen auf, Klicken Sie auf Erstellen, um die gewünschte Thumbnail-Größe im Artikel-Album anzulegen. Klicken Sie Zurück zur Übersicht, um die Bildberechnung durchzuführen, weitere Informationen finden Sie im Abschnitt Bilder neu berechnen. webweit 2013 10

BildgröSSe für Vollbildansicht konfigurieren Variante 3: Thumbnail in der Datenbank anlegen Hinweis: Diese Variante empfehlen wir Agenturen und Entwicklern Öffnen Sie das von Ihnen bevorzugte Tool Administration der Shopware-Datenbank (zur Erklärung verwenden wir hier phpmyadmin) Suchen Sie in der Tabellen-Liste die Tabelle s_media_album_settings Wählen Sie den Eintrag mit albumid = -1 (Das Artikel-Album) und Klicken Sie auf Bearbeiten Ergänzen sie im Feld thumbnail_size die gewünschte Größe, abgetrennt durch ein ; (hier ;1920x1080 ). Klicken Sie auf OK um die Änderung zu speichern. Alternativ können Sie auch direkt folgendes SQL-Kommando eingeben: UPDATE `s_media_album_settings` SET `thumbnail_size` = CONCAT(`thumbnail_size`, ';1920x1080'); Wobei ;1920x1080 durch die gewünschte Größe ersetzt werden muss. webweit 2013 11

Bilder NEU BERECHNEN Die Funktion zum neu Berechnen der Bilder kann, während Sie im Shopware Backend angemeldet sind, über die URL http://ihre-shop-url/backend/webfullscreen aufgerufen werden. Es stehen zweit unterschiedliche Typen von Bildern zur Berechnung zur Auswahl: Bilder aus Artikel-Album: Alle Bilder, die im dem Artikel-Album zur Verfügung stehen Nicht-Album-Bilder: Bilder, die noch mit Artikeln verknüpft sind, aber nicht im Album vorhanden sind (gelöscht, falsch importiert, etc.). Klicken Sie auf den entsprechenden Link, um die Berechnung zu starten. webweit 2013 12

Bilder NEU BERECHNEN Der Bildschirm aktualisiert sich automatisch, bis alle Bilder korrekt erstellt wurden. Sobald der nachfolgende Hinweis angezeigt wird, können Sie das Fenster sicher schließen oder zur Übersicht zurückkehren, um zu prüfen ob alle Bilder vollständig berechnet wurden. Hinweis: Die Neu-Berechnung von Bildern ist nur einmalig bei der Installation des Plugins notwendig. Später hinzugefügte Artikelbilder werden automatisch in der richtigen Größe durch Shopware bereitgestellt. webweit 2013 13

Allg. Plugin Konfiguration Die allgemeine Plugin-Konfiguration bietet folgende Einstellungen: Ein eigenes Shop-Logo für die Vollbild-Ansicht mit Anpassung der Abstände zur Toolbar Den Thumbnail-Index für Bilder in Vollbild-Ansicht (den Sie im Abschnitt Bildgröße für Vollbildansicht konfigurieren erstellt haben, oder durch das Plugin erstellen wollen) Die Hintergrundfarbe der Toolbar Die Farbe der Icons für Vollbild-Ansicht schließen und Bild-weiter / -zurück Die Rahmenfarbe der Thumbnails in der Toolbar Die Zeit in Sekunden, bis die Kontrollen und Toolbar ausgeblendet werden Die Thumbnail-Grafik für Vollbild starten Den Thumbnail-Index für Vorschaubilder in Vollbild-Ansicht Die gewünschte Bildgröße, wenn das Thumbnail im Artikelalbum durch das Plugin erstellt werden soll Die Anzahl in einem Schritt neu zu berechnender Bilder (kann je nach Server-Performance hochgesetzt werden) Entwickleroptionen zur Deaktivierung Javascript/Template (siehe Abschnitt Fullscreen für Agenturen und Template-Entwickler ) webweit 2013 14

Ansicht im Artikel webweit 2013 15

SHOPWARE-TEMPLATE STANDARDFARBEN Farbwerte der Shopware Standart-Templates Hinweis: Wenn Sie die Standardfarbwerte Ihres Shopware-Templates für die Icons der Fullscreen-Navigation verwenden möchten, können Sie den genauen Farbwert in der Allgemeinen Plugin-Konfiguration unter dem Punkt Icon-Farbe zuweisen. webweit 2013 16

Fullscreen für Agenturen und Template- Entwickler Die allgemeine Plugin-Konfiguration bietet folgende Einstellungen: Je nachdem in welchem Umfang Änderungen notwendig sind, können Sie selektiv die Javascript- Bibliothek für die Vollbild-Funktionen und das Standard-Template für die Anzeige deaktivieren und durch eigene Templates ersetzen. Den Code für die von Fullscreen standardmäßig verwendeten Templates befindet Sich im Anhang dieses Dokuments, dort können die verwendeten Variablen für eigene Templates entnommen werden. webweit 2013 17

Anhang A Javascript Template {block name= frontend_index_header_javascript append <script type= text/javascript > //<![CDATA[ {literal (function() { var fullscreenapi = { supportsfullscreen: false, isfullscreen: function() { return false;, requestfullscreen: function() {, cancelfullscreen: function() {, fullscreeneventname:, prefix:, browserprefixes = webkit moz o ms khtml.split( ); // check for native support if (typeof document.cancelfullscreen!= undefined ) { fullscreenapi.supportsfullscreen = true; else { // check for fullscreen support by vendor prefix for (var i = 0, il = browserprefixes.length; i < il; i++ ) { fullscreenapi.prefix = browserprefixes[i]; if (typeof document[fullscreenapi.prefix + CancelFullScreen ]!= undefined ) { fullscreenapi.supportsfullscreen = true; break; // update methods to do something useful if (fullscreenapi.supportsfullscreen) { fullscreenapi.fullscreeneventname = fullscreenapi.prefix + fullscreenchange ; fullscreenapi.isfullscreen = function() { switch (this.prefix) { case : return document.fullscreen; case webkit : return document.webkitisfullscreen; default: return document[this.prefix + FullScreen ]; fullscreenapi.requestfullscreen = function(el) { return (this.prefix === )? el.requestfullscreen() : el[this.prefix + RequestFullScreen ](); fullscreenapi.cancelfullscreen = function(el) { return (this.prefix === )? document.cancelfullscreen() : document[this.prefix + CancelFullScreen ](); // jquery plugin if (typeof jquery!= undefined ) { jquery.fn.requestfullscreen = function() { return this.each(function() { var el = jquery(this); if (fullscreenapi.supportsfullscreen) { fullscreenapi.requestfullscreen(el); ); ; // export api window.fullscreenapi = fullscreenapi; )(); function webfullscreenmaxbrowserwindow() { window.moveto(0,0); if (document.all) { top.window.resizeto(screen.availwidth,screen.availheight); else if (document.layers document.getelementbyid) { if (top.window.outerheight<screen.availheight top.window.outerwidth<screen.availwidth) { top.window.outerheight = screen.availheight; top.window.outerwidth = screen.availwidth; function webfullscreenrestorebrowserwindow() { if (document.all) { top.window.resizeto(web_fullscreen_outer_width, web_fullscreen_outer_height); else if (document.layers document.getelementbyid) { top.window.outerheight = web_fullscreen_outer_height; top.window.outerwidth = web_fullscreen_outer_width; window.moveto(web_fullscreen_x_position, web_fullscreen_y_position); function webfullscreenclick(e) { webfullscreenrestarttimeout(); webfullscreenshowcontrols(); function webfullscreenkeyup(e) { if(e.keycode == 27) { webfullscreenclose(); else if(e.keycode == 37) { webfullscreenpreviousimage() else if(e.keycode == 39) { webfullscreennextimage(); else { webfullscreenrestarttimeout(); webfullscreenshowcontrols(); function webfullscreenclose() { $( body ).css( overflow, auto ); $( #web_fullscreen_overlay ).remove(); $(document).unbind( keyup, webfullscreenkeyup); $(document).unbind( click, webfullscreenclick); cleartimeout(web_fullscreen_mousemove_timeout); if (!window.fullscreenapi.supportsfullscreen) { webfullscreenrestorebrowserwindow() function webfullscreennextimage() { web_fullscreen_currentindex++; if (web_fullscreen_currentindex == web_fullscreen_imagelist.length) { web_fullscreen_currentindex = 0; webfullscreenactivateimage(web_fullscreen_currentindex); function webfullscreenpreviousimage() { web_fullscreen_currentindex--; if (web_fullscreen_currentindex < 0) { web_fullscreen_currentindex = web_fullscreen_imagelist.length - 1; webfullscreenactivateimage(web_fullscreen_currentindex); function webfullscreenselectimage(index) { webfullscreenrestarttimeout(); web_fullscreen_currentindex = index; webfullscreenactivateimage(index); function webfullscreenactivateimage(index) { var imgsrc = web_fullscreen_imagelist[index]; $( #web_fullscreen_image ).attr( src, imgsrc); $( #web_fullscreen_overlay.thumb_box a ).removeclass( active ); $($( #web_fullscreen_overlay.thumb_box a ).get(index)).addclass( active ); function webfullscreenhidecontrols() { $(.web_fullscreen_close,.web_fullscreen_next,.web_fullscreen_prev,.web_fullscreen_toolbar ).fadeout(300); $( #web_fullscreen_overlay.web_fullscreen_toolbar_hint ).show(); function webfullscreenshowcontrols() { $(.web_fullscreen_close,.web_fullscreen_next,.web_fullscreen_prev,.web_fullscreen_toolbar ).show(); $( #web_fullscreen_overlay.web_fullscreen_toolbar_hint ).hide(); function webfullscreenrestarttimeout() { if (web_fullscreen_timeout > 0) { cleartimeout(web_fullscreen_mousemove_timeout); web_fullscreen_mousemove_timeout = settimeout(webfullscreenhidecontrols, web_fullscreen_timeout); function webfullscreenstart() { web_fullscreen_currentindex = -1; var element = $( <div id= web_fullscreen_overlay ><div class= web_fullscreen_image_wrapper ><img id= web_fullscreen_image src= /></div><div class= web_fullscreen_close onclick= webfullscreenclose(); ></div><div class= web_fullscreen_prev onclick= webfullscreenpreviousimage(); ></div><div class= web_fullscreen_next onclick= webfullscreennextimage(); ></div><div class= web_fullscreen_toolbar ><div class= web_fullscreen_toolbar_logo > + logo_snippet + </div><div class= web_fullscreen_thumb_wrapper ><div class= thumb_box ></div></div></div><div class= web_fullscreen_toolbar_hint ></div></div> ); $( body ).append(element); $( body ).css( overflow, hidden ); if (web_fullscreen_thumblist.length == 1) { $(.web_fullscreen_next,.web_fullscreen_prev ).remove(); $.each(web_fullscreen_thumblist, function(index, element) { $( #web_fullscreen_overlay.thumb_box ).append( <a href= # onclick= webfullscreenselectimage( + index + ); style= background-repeat: no-repeat; background-position: center center; background-color:#fff; background-image: url( + web_fullscreen_thumblist[index] + ); class= web_fullscreen_ thumbnail ></a> ); ); $( #web_fullscreen_overlay.web_fullscreen_thumb_wrapper ).width(web_fullscreen_thumblist.length * 75); $(.web_fullscreen_next,.web_fullscreen_prev ).css( top, $(window).height() / 2); webfullscreennextimage(); $(document).bind( keyup, webfullscreenkeyup); $(document).bind( click, webfullscreenclick); if (web_fullscreen_timeout > 0) { element.mousemove(function() { webfullscreenrestarttimeout(); webfullscreenshowcontrols(); ); var fs_element = document.getelementbyid( web_fullscreen_overlay ); var images = new Array() // preload images; for (i = 1; i < web_fullscreen_imagelist.length; i++) { images[i] = new Image() images[i].src = web_fullscreen_imagelist[i] // switch to fullscreen if supported, otherwise try to maximize window if (window.fullscreenapi.supportsfullscreen) { window.fullscreenapi.requestfullscreen(fs_element); fs_element.addeventlistener(window.fullscreenapi.fullscreeneventname, function() { if (window.fullscreenapi.isfullscreen()) { else { webfullscreenclose();, true); else { webfullscreenmaxbrowserwindow(); {/literal //]]> </script> {/block webweit 2013 18

Anhang B Frontend Template {block name= frontend_index_header_css_screen append <style> {literal #web_fullscreen_overlay { position: fixed; left: 0; top: 0; background: #FFFFFF; z-index: 1000000; width: 100%; height: 100%; #web_fullscreen_overlay.web_fullscreen_image_wrapper { margin: 0 auto; text-align: center; width: 90%; height: 90%; #web_fullscreen_overlay.web_fullscreen_close { background: url( /{/literal{$image_path{literal/sprite-control.png ) no-repeat scroll left bottom black; position: absolute; top: 20px; right: 20px; width: 20px; height: 20px; cursor: pointer; #web_fullscreen_overlay.web_fullscreen_prev { background: url( /{/literal{$image_path{literal/sprite-control.png ) no-repeat scroll left -116px black; cursor: pointer; position: absolute; width: 27px; height: 118px; left: 20px; #web_fullscreen_overlay.web_fullscreen_prev:hover { background-position: -27px -116px; #web_fullscreen_overlay.web_fullscreen_next { background: url( /{/literal{$image_path{literal/sprite-control.png ) no-repeat scroll left top black; cursor: pointer; position: absolute; width: 27px; height: 118px; right: 20px; #web_fullscreen_overlay.web_fullscreen_next:hover { background-position: -27px top; #web_fullscreen_overlay.web_fullscreen_toolbar { background: url( /{/literal{$image_path{literal/bg_header_shadow.png ) no-repeat scroll center top #e9ebed; border-top: 1px solid #d3d3d3; position: absolute; left: 0px; bottom: 0px; width: 100%; height: 90px; #web_fullscreen_overlay.web_fullscreen_toolbar_hint { background: url( /{/literal{$image_path{literal/sprite-control.png ) no-repeat scroll left -233px black; height: 28px; margin: 60px auto; position: relative; width: 54px; display: none; #web_fullscreen_overlay.web_fullscreen_toolbar_logo { position: absolute; left: 30px; top: 20px; #web_fullscreen_overlay.web_fullscreen_thumb_wrapper { height: 80px; margin-left: auto; margin-right: auto; margin-top: 15px; position: relative; text-align: center; top: 0; width: 300px; #web_fullscreen_overlay.web_fullscreen_thumbnail { display: block; float:left; border: 1px solid #DFDFDF; border-radius: 3px 3px 3px 3px; height: 49px; margin: 0 10px 10px 0; padding: 5px; width: 49px; #web_fullscreen_overlay #web_fullscreen_image { max-width: 100%; max-height: 100%; #web_fullscreen_overlay #header { background: none!important; #web_fullscreen_overlay #header #logo a { margin: 0!important; {/literal #web_fullscreen_overlay.web_fullscreen_toolbar { background-color: {$toolbar_color; #web_fullscreen_overlay.web_fullscreen_close { background-color: {$icon_color; #web_fullscreen_overlay.web_fullscreen_prev { background-color: {$icon_color; #web_fullscreen_overlay.web_fullscreen_thumb_wrapper a.active, #web_fullscreen_overlay.web_fullscreen_thumb_wrapper a:hover { border-color: {$thumbnail_border_color; #web_fullscreen_overlay.web_fullscreen_next { background-color: {$icon_color; #web_fullscreen_overlay.web_fullscreen_toolbar_hint { background-color: {$icon_color; </style> {/block {block name= frontend_detail_image_thumbs append <script type= text/javascript > //<![CDATA[ var logo_snippet = {if $use_default_logo == true <div id= header ><div id= logo ><a href= # >Demoshop</a></div></div> {else <img src= {$logo_path /> {/if; var thumbnail_path = {$fullscreen_thumbnail_path ; var web_fullscreen_outer_height = top.window.outerheight; var web_fullscreen_outer_width = top.window.outerwidth; var web_fullscreen_y_position = (screen.availheight - top.window.outerheight) / 2; var web_fullscreen_x_position = (screen.availwidth - top.window.outerwidth) / 2; var web_fullscreen_mousemove_timeout = null; var web_fullscreen_timeout = {$timeout_hidetoolbar; var web_fullscreen_currentindex = -1; var web_fullscreen_imagelist = [ {$sarticle.image.src.$thumbnail_index ]; {foreach from=$sarticle.images item=sarticleimage web_fullscreen_imagelist[web_fullscreen_imagelist.length] = {$sarticleimage.src.$thumbnail_index ; {/foreach var web_fullscreen_thumblist = [ {$sarticle.image.src.1 ]; {foreach from=$sarticle.images item=sarticleimage web_fullscreen_thumblist[web_fullscreen_thumblist.length] = {$sarticleimage.src.1 ; {/foreach $(document).ready(function() { var markup = <a class= cloud-zoom-gallery onclick= webfullscreenstart() style= cursor: pointer; background-repeat: no-repeat; background-position: center; background-image: url( + thumbnail_path + ); title= In Vollbild anzeigen ></a> ; if ($( #img.thumb_box ).length == 0) { $( #img.wrapper ).append( <div class= thumb_box ></div><div class= clear > </div> ); </script> {/block $( #img.thumb_box ).prepend(markup); ); //]]> webweit 2013 19

Vielen Dank, dass Sie sich für unser Plugin entschieden haben! Sollten Sie weitere Informationen oder individuelle Weiterentwicklungen benötigen oder Fragen zu Fullscreen haben, wenden Sie sich an shopware@webweit.net Gerne nehmen wir auch Ideen oder Verbesserungsvorschläge entgegen. webweit 2013 20

FULLSCREEN ShoPWArE VollBIlD-PluGIn shopware@webweit.net