Panorama Software
lima-city → Forum → Heim-PC → Software
anmerkung
applet
auslese
beispiel
bild
code
ereignis
grafik
http
index
kopieren
lade
markieren
panorama
point
position
software
test
url
webseite
-
Hallo LC,
war lange nicht mehr hier^^
Ich suche eine Software mit der ich ein 360 Panorama auf meiner Website darstellen kann.
Man soll sich quasi umschauen können -> aber seitlich reicht nach oben und unten brauch ich noch nicht unbedingt.
HTML5 oder SWF wäre mir egal. (is SWF hier erlaubt? wenn nicht lade ich es woanders hoch)
LG
Christian
Beitrag zuletzt geändert: 24.9.2015 2:38:59 von christian1603 -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Bezüglich der möglichen Software kann ich Dir leider nicht weiterhelfen, da ich keine kenne.
Betreffend Dateiformate:
https://www.lima-city.de/hilfe/welche-dateiformate-sind-auf-dem-webspace-verboten
Ausdrücklich erlaubt sind sind natürlich *.png, *.gif, *.jpg, *.jpeg, *.ico, *.swf, *.pdf, *.doc, *.docx, *.odt, *.xls, *.xlsx, *.ods, *.ppt, *.pptx und *.odp Dateien.
-
Flash (swf) wie z.B. hier
http://www.paris-26-gigapixels.com/index-fr.html
eingesetzt, ist wegen der unsicheren Zukunft bzw. schon jetzt fehlenden Unterstützung auf manchen Geräten nicht zu empfehlen.
Dieses jQuery-Plugin
http://codecanyon.net/item/360-panoramic-viewer-jquery-plugin/2684810
kostet $8 -
Ich denke, das kann man leicht selbst programmieren. Ich teste es mal heute Abend, sobald ich Zeit habe.
So, nun habe ich doch noch eine kleine Pause nutzen können und ein funktionierendes Ergebnis bekommen:
test42test.lima-city.de/index.php
Den Code kann man von der Internetseite kopieren, aber ich schreibe ihn hier auch nochmals auf:
<div id="Panorama"> <div id="PBildA"><img id='IPBildA' src="Lab_nat.png" height="100" width="500"></div> <div id="PBildB"><img id='IPBildB' src="Lab_nat.png" height="100" width="500"></div> </div> <div id="Schutz"></div> <div id="Debug"> <input type="button" onClick="wechsel();" value="Grafik wechseln"><br> Status:<br><input type="text" id="S" style="width:100%"><br> X:<input type="text" id="X"><br> DX:<input type="text" id="DX"> </div>
#Panorama{ width:200px; height:110px; background-color:black; position:absolute; left:50px; top:50px; overflow: hidden; z-index: 0; } #Schutz{ width:100%; height:100%; position:fixed; left:0px; top:0px; overflow: hidden; z-index: 1; } #Debug{ background-color:lightgrey; position:absolute; left:50px; top:200px; overflow: hidden; z-index: 2; } #PBildA{ width:500px; height:100px; position:absolute; left: -400px; top:0px; z-index: 0; } #PBildB{ width:500px; height:100px; position:absolute; left: 100px; top:0px; z-index: 0; }
PosX=0; PosAX=-400; SPosAX=-400; PosBX=100; SPosBX=100; SXBild=500; SXP=200; drag=false; bild=true; function Mausd (Ereignis) { document.getElementById('S').value="Maustaste gedrückt"; PosX=Ereignis.clientX; drag=true; } function Mausu (Ereignis) { document.getElementById('S').value="Maustaste losgelassen"; drag=false; SPosAX=PosAX; SPosBX=PosBX; } function Mausm (Ereignis) { document.getElementById('X').value=Ereignis.clientX; if (drag==true){ DX=Ereignis.clientX-PosX; document.getElementById('DX').value=DX; PosAX=SPosAX+DX; PosBX=SPosBX+DX; if(PosAX<-1*SXBild){ PosAX=PosBX+SXBild; } if(PosBX<-1*SXBild){ PosBX=PosAX+SXBild; } if(PosAX>SXP){ PosAX=PosBX-SXBild; } if(PosBX>SXP){ PosBX=PosAX-SXBild; } document.getElementById('PBildA').style.left=PosAX; document.getElementById('PBildB').style.left=PosBX;; } } function wechsel(){ if(bild){ document.getElementById('IPBildA').src="Test.png"; document.getElementById('IPBildB').src="Test.png"; bild=!bild; }else{ document.getElementById('IPBildA').src="Lab_nat.png"; document.getElementById('IPBildB').src="Lab_nat.png"; bild=!bild; } } document.onmousedown = Mausd; document.onmouseup = Mausu; document.onmousemove=Mausm;
Zum Testen habe ich zwei Grafiken erstellt. Die Standardgrafik ist Natlos, d.h. wenn ihr den Anfang gefunden habt, stimmt etwas mit dem Script nicht.
Damit aber jeder sehen kann, wo die Grafiken sich befinden, ist die zweite Grafik nicht Natlos und so gestaltet, dass das Ende leicht zu erkenne ist.
Beitrag zuletzt geändert: 24.9.2015 15:44:20 von test42test -
Oh, und was ich nicht drin habe:
Die Größe der Bilder und der DIVs kann man auch auslesen. Damit braucht man keine Größenangaben mehr im JS-Code machen und das ganze geht anpassungsfrei mit verschiedenen Bildern. Man könnte sich auch vorstellen, dass die Größe des tatsächlich angezeigten Panoramas frei veränderbar ist (z.B: ganze Seitenbreite).
Ausbaufähig ist es schon noch. -
Hallo Christian,
schau mal auf meine neue Webseite "thorenzie.lima-city.de" Willkommenseite da habe ich eine Panoramatour (Paristour) erstellt.
Meinst Du so etwas in der Art? Ich bin erst seit einigen Tagen bei lima-city. Hast du schon die Bilder fürs Panrama erstellt?
Brauchst Du eine Software Panorama-Viewer oder für ein bis 360°-Stitching-Programm (der die Bilder zu einen Panorama zusammen setzt).
Gruß thorenzie
Beitrag zuletzt geändert: 29.9.2015 9:31:03 von thorenzie -
Also wenn ein Java-Applet okay wäre: Panorado Applet wäre eine Lösung. Auf der Webseite gibt es auch Beispiele, wie das dann aussieht.
Noch besser finde ich ansonsten Pannellum. Es basiert nur auf HTML5, CSS und Javascript, läuft also auf jedem Betriebssystem, und ist Open Source.
Unter dem Link ist auch direkt ein Beispiel sichtbar. Du kannst sogar im Bild Anmerkungen einfügen und Point of Interest markieren.
MfG Georg -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
