Hi Semper,
erstmal danke für deine Hartnäckigkeit!!! 
werde jetzt erstmal versuchen dein funktionierendes Beispiel von oben bei mir zum laufen zu bekommen und dann auf mein Projekt versuchen umzusetzen....
Danke nochmal für all deine Geduld und das austesten!
VG Christian
habe jetzt nochmal die verschiedensten Varianten ausgetestet mit der Korrekten zuordnung des Ladebildes.
Mit folgendem Ergebnis:
Füge ich :
<div id="peelwrapper">
<img src=" ... "> <!-- Dies ist das eigentliche Bild, das Reel anzeigen soll -->
<img src="loadimg.gif" id="loadimg"> <!-- Dies ist das Ladebild, das das eigentliche Bild
waehrend des Ladens verdecken soll -->
</div>überhalb des Reel Players Codes auf meiner HTML Seite ein...liegt das Bild hinter dem Player. Setze ich den Code unter den Reel Player wird das Bild einfach nur unterhalb des Players dauerhaft angezeigt...
hilft das weiter?
VG Christian
Hi zusammen,
habe Sempers Tipp versucht umzusetzen...ohne Erfolg. Deshalb brauche ich leider erneut eure Hilfe....da ich denke, dass ich einen Denkfehler bei der Umsetzung habe....
bisher habe ich folgendes gemacht:
<div id="peelwrapper">
<img src=" ... " hier alles was Du für Peel benötigst >
<img src="loadimg.gif" id="loadimg">
</div>diesen Code habe ich in den <Body> Tag meiner Webseite eingefügt, auf welcher das 3D Bild/Panorama angezeigt wird. Bei Img Src = "... " hier alles was du für Peel benötigst ---> habe ich die Bildadresse zum Ladebild, was den Player überlagern soll eingegeben.
#peelwrapper {
position: relative;
}
#loadimg {
position: absolute;
left: 0;
top: 0;
}Diesen CSS Code habe ich so wie er ist als extra <style> Tag in den <head></head> Abschnitt eingefügt.
und zu guter letzt:
// `"loaded"` Event is the one announcing when the instance is "locked and loaded".
// At this time, all is prepared, preloaded and configured for user interaction
// or animation.
//
loaded: function(e){
document.getElementById("loadimg").style.display = "none";
get(_images_).length > 1 || t.css({ backgroundImage: url(reel.substitute(opt.path+get(_image_), get)) }).attr({ src: cdn(transparent) });in der original Javascript Datei (jquery.reel.js) mit diesem Code von Semper ausgetauscht.
Habe ich hier einen Denkfehler begangen? Was könnte das Problem sein, das es nicht funktioniert?
Zum besseren Verständnis hier noch einmal kurz der Code, den ich für die HTML Seite benutze, auf welcher der Player angezeigt wird:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homepagetitel</title>
<style>
* { cursor: url(maus.cur), default; }
</style>
<style>
#peelwrapper {
position: relative;
}
#loadimg {
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="peelwrapper">
<img src="Ladebild.gif" hier alles was Du für Peel benötigst >
<img src="loadimg.gif" id="loadimg">
</div>
<script src="jquery-3.3.1.js"></script>
<script src='jquery.reel.js' type='text/javascript'></script>
<img src="DSC_0200.gif" width="632" height="421"
class="reel"
id="image"
data-cursor="url(maus.cur), default;"
data-break="0.03"
data-images="DSC_####.jpg|0200..0271"
data-delay="900"
data-frame="1"
data-frames="72"
data-speed="0.1"
data-opening="900"
data-alziness="900"
data-duration="900"
data-tempo="900"
data-preloader="30"
}
>
</body>
</html>Viele Grüße und schönes Wochenede!
Christian
Hi Semper,
vielen Dank für den Tipp und die ausführliche Erklärung! habe mich sehr gefreut mal wirklich gute Infos zu bekommen.
Denke mal es hat "klick" bei mir gemacht 
werde berichten ob es funktioniert....
VG Christian
Hi Semper,
das kommt ganz auf die Bildgröße an. Habe Sie momentan recht klein gehalten, damit sie (bzw. das 3D Objekt im gesamten) schnell laden. Wenn die Auflösung oder die Gesamtanzahl der Quellbilder größer wird (z.b. bei mehreren Reihen und Zeilen in einem 3D Objekt) dauert es erheblich länger.
Das Problem ist jedoch nicht, dass die Bilder schnell oder langsam geladen werden, sondern eher, dass der Nutzer nur eine unvollständige, abbrechende bzw. stockende 360° Grad Rotation des Objektes angeboten bekommt, wenn noch nicht alle Bilder komplett geladen wurden.
Diese möchte ich halt gerne irgendwie umgehen, so dass das fertige 3D Objekt erst angezeigt wird, wenn es wirklich zu 100% vollständig geladen wurde. Vorher soll halt so lange ein Preloading Bild gezeigt werden...
hättest du eine Idee für eine Umsetzung?
VG und schönes WE!
Christian
Hi Semper,
diese Idee hatte ich bereits ebenfalls... habe als image-src bereits ein Loading Gif erstellt und eingefügt. Auch bei mir wird es nur kurz dargestellt und sofort durch die anderen (Quell) Bilder aus den data-images ersetzt, welche ja die Einzelbilder/einzelnen Winkelschritte für die Rotation sind.
Dachte auch, dass wenn ich das Img-src Bild als Gif Bild mit einer Abspieldauer von 10 sek erstelle... es zumindest erst einmal 10 sek gezeigt wird (also bis die Animation beendet ist) und erst dann wechselt... leider nicht der fall...blinkt kurz auf und verschwindet wieder sofort.
Denke mal das das Src Image vor allem bei der Benutzung eines sog. Sprite Sheets (also einem großen Einzelbild, in welchem alle Quellbilder vereint sind) sinn macht, aber nicht, wenn man die Quellbilder eh alle einzeln lädt...
trotzdem vielen Dank für deine Idee! 
VG Christian
Hi Arne,
genau da liegt mein Problem.... der Code ist zwar sehr gut und ausführlich erklärt, ich verstehe Ihn aber mit meinen einfachen Java-Grundkenntnissen leider nur zur hälfte, bzw gar nicht richtig. 
Könntest du bzw. ein anderer netter User aus dem Forum mir mal die einzelnen Zeilen und deren Funktion im Script etwas genauer, bzw. in einfachen Worten erklären, damit sich mir ich die Logik dahinter etwas besser erschließt? würde echt gerne mal ein bisschen mehr über das Script im Detail lernen wollen...
wo wäre es denn deiner Meinung nach am einfachsten ein Bild einzubauen? wenn ich es richtig verstehe...ist das preloaded event doch lediglich dazu da einen sich kontinuierlich aufbauenden Fortschrittsbalken zu generieren, da dieser bei jedem geladenen Quellbild immer +1 triggert und der Fortschrittsbalken so bis 100% fortschreitet....
VG und ein schönes Wochenende an alle!
Christian
Nochmal hi zusammen,
da es bisher auch von euch noch leider keine Ideen/Vorschläge gab, habe ich einmal den Autor des Plugins angesprochen, welcher mir folgendes geantwortet und diese Tipps gegeben hat:
Hi Chriss,
this is be very easy when you bind to the right events. Reel is
triggering a `preload` event when it starts the frame preloading
process (here is where you show your preloader image) and when it
finishes it triggers `loaded` event (this is when you hide it). It
also triggers `preloaded` event after every image it successfully
preloads so that you can adjust the percentage of a progress bar for
example.
Good luck!
Petr
mit diesen Hinweisen habe ich anschließend im Quellcode des Plugins (siehe hier: Quellcode Jquery Reel) gestöbert und den beschrieben Abschnitt gefunden (ab Zeile 1245):
// ### `preload` Event ######
// `Event`, since 1.1
//
// Reel keeps a cache of all images it needs for its operation. Either a sprite or all
// sequence images. It first determines the order of requesting the images and then
// asynchronously loads all of them.
//
// - It preloads all frames and sprites.
//
preload: function(e){
var
$overlay= t.parent(),
images= get(_images_),
is_sprite= !images.length,
order= reel.preload[opt.preload] || reel.preload[reel.def.preload],
preload= is_sprite ? [get(_image_)] : order(images.slice(0), opt, get),
to_load= preload.length,
preloaded= set(_preloaded_, is_sprite ? 0.5 : 0),
simultaneous= 0,
$cache= get(_cache_).empty(),
uris= []
$overlay.addClass(loading_klass);
// It also finalizes the instance stylesheet and prepends it to the head.
set(_style_, get(_style_) || $('<'+_style_+' type="text/css">'+css.rules.join('\n')+'</'+_style_+'>').prependTo(_head_));
set(_loading_, true);
t.trigger('stop');
opt.responsive && gauge();
t.trigger('resize', true);
while(preload.length){
var
uri= reel.substitute(opt.path+preload.shift(), get),
$img= $(tag(_img_)).data(_src_, uri).appendTo($cache)
// Each image, which finishes the load triggers `"preloaded"` Event.
$img.bind('load error abort', function(e){
e.type != 'load' && t.trigger(e.type);
return !detached($overlay) && t.trigger('preloaded') && load() && false;
});
uris.push(uri);
}
setTimeout(function(){ while (++simultaneous < reel.concurrent_requests) load(); }, 0);
set(_cached_, uris);
set(_shy_, false);
function load(){
var
$img= $cache.children(':not([src]):first')
return $img.attr(_src_, $img.data(_src_))
}
},
// ### `preloaded` Event ######
// `Event`, since 1.1
//
// This event is fired by every preloaded image and adjusts the preloader indicator's
// target position. Once all images are preloaded, `"loaded"` Event is triggered.
//
preloaded: function(e){
var
images= get(_images_).length || 1,
preloaded= set(_preloaded_, min(get(_preloaded_) + 1, images))
if (preloaded === 1) var
frame= t.trigger('frameChange', [undefined, get(_frame_)])
if (preloaded === images){
t.parent().removeClass(loading_klass);
t.trigger('loaded');
}
},
// ### `loaded` Event ######
// `Event`, since 1.1
//
// `"loaded"` Event is the one announcing when the instance is "locked and loaded".
// At this time, all is prepared, preloaded and configured for user interaction
// or animation.
//
loaded: function(e){
get(_images_).length > 1 || t.css({ backgroundImage: url(reel.substitute(opt.path+get(_image_), get)) }).attr({ src: cdn(transparent) });
get(_stitched_) && t.attr({ src: cdn(transparent) });
get(_reeled_) || set(_velocity_, opt.velocity || 0);
set(_loading_, false);
loaded= true;
},
// ### `prepare` Event ######
// [NEW] `Event`, since 1.3
//
// In case of `shy` activation, `"prepare"` event is called instead of the full `"setup"`.
// It lefts the target image untouched waiting to be clicked to actually setup.
//
prepare: function(e){
t.css('display', _block_).parent().one(_click_, shy_setup);
},trotzdem verstehe ich bisher nur einen kleinen Teil des Codes und weiß nicht wie, bzw. wo ich am besten das Preloading-Bild einfüge/einbinde, so dass es immer angezeigt wird bis der Player komplett geladen hat 
habt ihr vllt eine Idee? bzw. könnt Licht ins dunkel bringen?
Viele Grüße
Christian
Hallo zusammen,
nachdem ich versucht habe mit zahlreichen "Walkarounds" das Problem selbst zu lösen, aber kläglich gescheitert bin, hoffe ich hier bei euch im Forum Hilfe zu finden.
Das Problem:
Ich benutze ein OpenSource Javascript/bzw. Jquery basiertes Plugin namens -->Jquery Reel. Dieses Plugin ermöglicht es mir eine Bildsequenz aus mehreren Einzelbildern zu laden und eine 360° Grad Rotation zu erzeugen.
Beispiel des Plugin: http://test.vostrel.net/jquery.reel/ex…amera-sequence/
Homepage des Plugins: http://jquery.vostrel.cz/reel
Habe das Plugin bereits erfolgreich eingerichtet und es funktioniert soweit. Was mich allerdings noch etwas stört ist der Preloader. Bei größeren Bildern mit längerer Ladezeit (ca.6-10 Sekunden) läuft momentan ein kleiner Fortschrittsbalken am unteren Bildrand.
Dies würde ich gerne wie folgt ändern: anstatt des sich aufbauenden Ladebalkens, soll einfach so lange ein Bild/bzw. animiertes .Gif zu sehen sein, bis der Player vollständig alle Bilder geladen hat.
--> Habe bereits einen Webseiten Preloader (wie hier:
Hättet ihr eine Idee, wie man dies umsetzen könnte?
Vielen Dank für Eure Hilfe!
Christian
PS: es gab bereits eine Anfrage dies Umzusetzen (sieher hier: https://github.com/pisi/Reel/issues/52 ) , welches aber vom Entwickler des Scripts ziemlich schnell und herzlos abgeschmettert wurde....
ich würde mal in den Grundeinstellungen des Browsers, bzw von Javascript schauen ob dort überhaupt die benötigten Berechtigungen gesetzt sind, damit diese die Webcam ansprechen dürfen...
hi basti, irgendwie kann ich dir nicht ganz folgen... die scripte auf deiner homepage sind doch komplett anders oder?
die seite kamera2.html funktioniert bei mir überhaupt nicht
und kamera.html scheint eher eine Art Timelapse bzw. Zeitraffersteuerung für eine Kamera zu sein....
Hallo Basti, welche Kamera benutzt du denn? diese Photobooth ist für die Nutzung mit einem Raspberry Pi und DSLR Kameras konzipiert, welche über eine App auf dem Raspberry (Gphoto2) ausgelöst wird....
Fokussiert die Kamera denn? Falls ja könnte es sein, dass sie Fokussiert aber nicht schnell genug ein Objekt scharf gestellt bekommt bevor sie auslöst....dann aber schon das Foto ausgelöst hat... hier kannst du mal vorher etwas normal anfokussieren und dann den AF aus stellen...und schauen ob das Problem der unscharfen Fotos erneut auftritt....
Vllt kann ich dir hier ja ein wenig hilfestellung geben PS: Das der Datei-Name mehrere male in der seperaten Datei auftaucht ist der Gallery und der Software für die Kameraauslösung (Gphoto2) geschuldet....
VG Winni
Die habt ihr mir heute Abend defintiv wieder zurück gegeben! nochmals vielen Dank an euch zwei!
VG und angenehme Restwoche!
Winni
Super! hat funktioniert.... vielen vielen Dank euch beiden! da sieht man mal wieder wie schnell erfahrene Programmierer ein Problem lösen können...
ich zwei Tage und Ihr zwei Minuten.....
kann man euch bzw. das Forum in irgendeiner Art unterstützen für die Hilfe?
cool, das klingt gut, diesen Code muss ich in Core.js einbinden...oder in der html Webseite auf welcher der Button ist?
Hallo Basti1012,
vielen Dank für deine Antwort! habe schon versucht, ähnliche Vorlagen wie deine obige in die Seite einzubinden, leider ohne Erfolg.
diese Vorlagen schaffen es zwar alle z.b. einen Alarm auszulösen oder ein neues Fenster zu öffnen, aber nicht einen Klick auf den "Foto machen" Button zu simulieren, bzw. diesen Button auszulösen.... oder sehe ich das falsch?
habe unter anderem versucht in der Datei Core.js (sozusagen das Herzstück) folgenden Code einzufügen:
$('.takePic, .newpic').on('keyup', function(e){
if(e.keyCode == 66)
})dieser soll die etwas Modifizierte Variante des originalen/normalen Foto erstellen Buttons sein...und auf Tastendruck genau das gleiche auslösen wie beim Klicken des Buttons...
kurz zur Erläuterung meines obigen Codes:
beim durchstöbern des "Haupt"-Scripts (Core.js) habe ich den Code ausfindig gemacht, welcher einen Klick auf den Button erkennt und das Event auslöst....dieser lautet im Original:
// Take Picture Button
$('.takePic, .newpic').click(function (e) {
e.preventDefault();
var target = $(e.target);
if (target.hasClass('gallery')) {
public.openGallery(target);
} else {
if (!processing) {
public.reset();
loader.slideDown('slow', 'easeOutBounce', function () {
public.countdown(countDown, $('#counter'));
});
}
}
});habe ich das richtig erkannt? oder ist das bereits ein Fehler von mir?
nun dachte ich halt, wenn ich genau diesen Code 1:1 in Core.js dupliziere und mit einem Eventlistener für die Taste 66 versehe, sollte es funktionieren...tat es nur nicht
muss leider zugeben, dass ich mit Javascript auch nur wenig Erfahrung habe, weshalb ich auch nur die hälfte Verstehe, was der Code bewirkt....
hoffe sehr du/Ihr könnt mir weiterhelfen!
VG Winni
Hallo zusammen,
habe nach einigen vergeblichen Versuchen mein Problem selbst zu lösen dieses Forum gefunden und hoffe Ihr könnt mir bei der Lösung meines Problemes helfen...
dabei geht es im wesentlichen um folgendes:
Habe mir eine Fotobox gebaut, welche über eine Internetseite in einem geöffneten Browser gesteuert wird. Dies funktioniert auch alles wunderbar.
Hier ein Beispiel wie die Seite aussieht: http://photobooth.andrerinas.de/
(der zugehörige Quellcode und Scriptbefehle seht ihr hier: https://github.com/andreknieriem/photobooth)
auf dieser Seite befindet sich der Button "Foto machen" welcher den Countdown für das Bild startet, sobald man diesen anklickt.
Nun möchte ich gerne aber erreichen, dass man anstatt den Button anzuklicken auch einen bestimmten Buchstaben (z.b. B) drücken kann um die Funktion des Buttons auszulösen.... sozusagen, dass beim Tastendruck ein virtueller Klick auf den Button "Foto erstellen" erfolgt...
Habt ihr eine Idee, bzw, konkreten Vorschlag wie ich das umsetzen kann? bzw. welchen Code ich wo einfügen muss?
Hoffe ihr könnt mir weiterhelfen...
VG und einen guten Start ins neue Jahr!
Euer Winni86
PS: die OnclickAktion des Buttons findet ihr hier (https://github.com/andreknieriem/…rces/js/core.js) in Zeile 200