360 Produktbilder bei Zeta einbinden...

MarcoFuerte · 22. Juni 2018

Hallo zusammen,

ich bin am verzweifeln ... ich möchte gerne einen 360 Grad Produkt player bei Zeta einbinden, allerdings nicht als IFRAME ...

der Original Code (html standalone) sieht so aus ....

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">

<head>
<title>ultra</title>



<link type="text/css" rel="stylesheet" href="imagerotator/html/css/basic.css"/>
<script type="text/javascript" src="imagerotator/html/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="imagerotator/html/js/imagerotator.js"></script>


<style type= "text/css">
    
html, body
{
    padding: 0;
    margin: 0;
}



#content
{
    width: 821px;
    height: 450px;
    /* border: 1px dotted #cecfd2; */
}

</style>

</head>


<body>


    <div id="content">

        <div id="wr360PlayerId" class="wr360_player" style="background-color:#FFFFFF;">
        </div>

        <script language="javascript" type="text/javascript">

            var rotator = WR360.ImageRotator.Create('wr360PlayerId');

            rotator.licenseFileURL = 'license.lic';
            rotator.settings.configFileURL = '360_assets/ultra/ultra.xml';
            rotator.settings.graphicsPath = 'imagerotator/html/img/basic';
            rotator.settings.googleEventTracking = false;
            rotator.settings.responsiveBaseWidth = 0;
            rotator.settings.responsiveMinHeight = 0;

            rotator.runImageRotator();

        </script>

    </div>


</body>

</html>

Alles anzeigen

als standalone HTML läuft das auch ..

allerdings bekomme ich die Einbindung in Zeta einfach nicht hin ...

was ich überhaupt nicht verstehe ist wie ich den imagerotator.js

in Zeta einbinden kann ...

Kann und will mir da jemand helfen ...

Danke Marco

Steffen T. · 22. Juni 2018

Hallo,

die Quelldaten des 360 Grad Produkt Players am besten manuell via FTP (z.B. mit FileZilla) auf den Webserver kopieren.

Die benötigten CSS- und Script-Verweise können mit Hilfe des Attributs "additional_meta" eingefügt werden. Siehe: https://docs.zeta-producer.com/attribute.html. Hier also die Zeilen <link type="text/css" rel="stylesheet" href="imagerotator/html/css/basic.css"/> und <script type="text/javascript" src="imagerotator/html/js/imagerotator.js"></script> einfügen. Die Pfade bei href und scr müssen natürlich entsprechend angepasst werden. Die Zeile mit jquery-1.12.4.min.js wird nicht benötigt, da jQuery bereits in allen Zeta-Producer-Layouts geladen wird.

Für den Scriptcode im Inhalt einfach das Widget "Quelltext" verwenden und dort den Code einfügen. Auch hier müssen die Pfade bei rotator.settings.configFileURL und rotator.settings.graphicsPath entsprechend angepasst werden.

Code

<div id="wr360PlayerId" class="wr360_player" style="background-color:#FFFFFF;">
</div>
<script language="javascript" type="text/javascript">
    var rotator = WR360.ImageRotator.Create('wr360PlayerId');
    rotator.licenseFileURL = 'license.lic';
    rotator.settings.configFileURL = '360_assets/ultra/ultra.xml';
    rotator.settings.graphicsPath = 'imagerotator/html/img/basic';
    rotator.settings.googleEventTracking = false;
    rotator.settings.responsiveBaseWidth = 0;
    rotator.settings.responsiveMinHeight = 0;
    rotator.runImageRotator();
</script>

Alles anzeigen

MarcoFuerte · 22. Juni 2018

Vielen Dank für die schnelle Antwort

leider kein Erfolg ..

meine Vorgehensweise ...

1. Webrotate360 - ins Hauptverzeichniss geladen ( darin enthalten die 360_assets imagerotator und js dateien )

2. additional_meta ( für nur diese Seite 360-pics.html angepasst )

3. Quellcodewidget auf Seite 360-pics eingefügt und per copy and paste eingefügt .

in additional meta und im Quellcodewidget die verzeichnisse angepasst ( relative pfade und auch http://**** pfade -> zum versuchen)

Zetaproducer zeigt mir folgenden Fehler an "WR360 ist undefiniert"

erkennst du was ich falsch gemacht habe ?

Danke Marco

Stefan S · 22. Juni 2018

Wenn relative URLs zu den Skripten verwendet werden, kann es lokal ja nicht funktionieren, also weder in der internen Vorschau, noch mit F5. Das kann dann nur in der veröffentlichten Version der Seite auf dem Webserver funktionieren. Ggf. noch den Pfad zu LicenseFileUrl anpassen.

MarcoFuerte · 23. Juni 2018

Hallo Stefan S.

Zitat

in additional meta und im Quellcodewidget die verzeichnisse angepasst ( relative pfade und auch http://**** pfade -> zum versuchen)

das habe ich auch gemacht ... also die relativen eingefügt -> hochgeladen -> und online versucht - kein Erfolg...

danach die Adresse komplett eingetragen ... -> offline getestet und online gestestet - kein Erfolg.

-----------------------------------------------------------------------------------------------------------------------------------------------

Habe es auch mal mit reel http://jquery.vostrel.cz/reel ..... versucht..

Denke es müsste ja ähnlich laufen ...

Script-Verweise des Attributs "additional_meta" eingefügt

Code

1.<script type="text/javascript" src="www.meinserver.com/1/reel.js"></script>

2. ZETASEITE -> Quellcodewidget

Code

<img src="http://test.vostrel.net/jquery.reel/example/object-movie-camera-sequence/fish/DSCN0691.JPG" width="210" height="186"

class="reel.js"

id="image"

data-images="http://test.vostrel.net/jquery.reel/example/object-movie-camera-sequence/fish/DSCN####.JPG|691..702">

Bilder werden geladen .... -- sowohl in Vorschau als auch LIVE ... allerdings keine Drehfunktion ... also nur ein Bild und sonst nix..

Zetaproducer zeigt mir auch keinen Fehler an ...

als reine HTML gehts ohne Probleme nur innerhalb vom Template geht nichts ... habe deshalb eine leere Seite mit Zeta erstellt .... geht auch nicht ...

BIn halt kein Programmierer ... deshalb habe ich mir auch den Zeta geholt ... muss mich eben auf die vorgefertigten Module beschränken ..

Danke Marco ...

P.S. sollte sich wirklich jemand die Mühe machen eine LÖSUNG zu finden würde es mich sehr freuen ..

Stefan S · 23. Juni 2018

Bei absoluten Adressn in den Links zu Skripten etc. fehlt teilweise das Protokoll, also http:// bzw. https://

Alles nochmal genau kontrollieren und veröffentlichen, dann können wir uns am Montag mal die Seite ansehen, wenn Sie uns die URL nennen.

MarcoFuerte · 24. Juni 2018

Veruscht aber leider auch kein Erfolg --

Danke trotzdem

Marco

MarcoFuerte · 24. Juni 2018

Hallo zusammen ...

Habs geschafft !!

hier meine Vorgehensweise ..

1. Quellcode als jquery.reel-edge-bundle.js gespeichert ( im Anhang ´)

2. Auf den Server hochgeladen . // (z.b. www.sowieso/reel/jquery.reel-edge-bundle.js

3. KEIN Attributs "additional_meta" eintrag vorgenommen !!!!! in keiner Ebene !

4. Quellcodewidget geöffnert und code eingegeben ( VERZEICHNISS zu jquery.reel-edge-bundle.js ) angepasst

Code

<script charset="utf-8" src="http://www.sowieso/reel/jquery.reel-edge-bundle.js" type="text/javascript"></script> 

<-Hier die Verzeichnisse der Bilder angeben -  (startbild und bilder die geladen werden> 

<img src="http://www.sowieso/reel/webrotate360/360_assets/ultra/images/1.jpg" width="100%" height="100%" class="reel" id="image" 
data-images="www.sowieso/reel/webrotate360/360_assets/ultra/images/#.jpg|1..24">

Meine Bilder liegen im /reel/webrotate360/360_assets/ultra/images/ verzeichniss

src="http://www.sowieso/reel/webrotate360/360_assets/ultra/images/1.jpg ( STARTBILD)

data-images="www.sowieso/reel/webrotate360/360_assets/ultra/images/#.jpg|1..24"> (#.jpg 1..24 = Habe 24 jpg Bilder mit 01.jpg 02.jpg ..... nummeriert.

Läuft .....

Aktuell möchte ich meine Webseite noch nicht veröffentlichen deshalb nur die INFO ....

LG Marco

INFO zu REEL :

Code

Copyright (c) 2009 John Resig, http://jquery.com/

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Alles anzeigen

Wollen Sie eine professionelle Website erstellen?