✔ Preloader gesucht...

tobm_knows_best · 24. April 2012

nu hab ich´s so gemacht und´s kommt immer noch die doofe schwarze Seite...

Die dann schlussendlich schwarz bleibt - ohne animation - nix... :/

SpiceLab · 24. April 2012

Blindflug beherrscht hier keiner. Link zum Demo bitte posten

tobm_knows_best · 24. April 2012

So... ich habe hier jetzt nocheinmal den Code:

Gleich zu beginn sind die entsprechenden Codeschnipsel eingefügt worden, welche auf dieser Seite hier gezeigt werden.

Ich habe mit entsprechenden Kommentaren gleich zu Beginn und ganz am Ende des Codes die wichtigen Bereiche versehen. (Alles was Preloader beinhaltet ist relevant...) Der Rest kann ignoriert werden - ich habe Ihn aber dennoch mit drin stehen lassen, weil mancher Inhalt meineserachtens mit Sicherheit davon abhänging ist, wie schlussendlich die Darstellung erfolgt... Bitte deshalb um Nachsicht... :/

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<!-- jQuery & Javascript Preloader -->
  <script type="text/javascript"
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
  <script type="text/javascript" src="js/queryLoader.js"></script>
<!-- jQuery & Javascript Preloader -->

 <link rel="shortcut icon" href="/favicon.ico" />
  <meta http-equiv="Content-Type"
 content="text/html; charset=UTF-8" />
  <title>Start</title>
  <style type="text/css">
@import url("css/xyz.css");
  </style>

<!-- (ein anderer jQuery Import, hier aber für eine Hover-Darstellung gedacht - Auskommentiert, da sonst 2 Verweise angegeben)
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> -->

<!-- CSS zum Preloader -->
<link rel="stylesheet" href="css/queryLoader.css" type="text/css" />
<!-- CSS zum Preloader -->

type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript" charset="utf-8">
var scrollSpeed = 70; // Speed in milliseconds
var step = 1; // How many pixels to move per step
var current = 0; // The current pixel row
var imageHeight = 5000; // Background image height
var headerHeight = 300; // How tall the header is.
//The pixel row where to start a new loop
var restartPosition = -(imageHeight - headerHeight);
function scrollBg(){
//Go to next pixel row.
current -= step;
//If at the end of the image, then go to the top.
if (current == restartPosition){
current = 0;
}
//Set the CSS of the header.
$('#header').css("background-position","0 "+current+"px");
}
//Calls the scrolling function repeatedly
var init = setInterval("scrollBg()", scrollSpeed);
  </script>
  <script src="SpryAssets/SpryTooltip.js"
 type="text/javascript"></script>
  <script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
  </script>
  <link href="SpryAssets/SpryTooltip.css" rel="stylesheet"
 type="text/css" />
  <style type="text/css" media="screen">
body{
background-color: #ccc;
}
/* Zentrierte-Ausrichtung des Headers */
#header_complete {
width: 960px;
margin:0 auto;
box-shadow: 0px -1px 5px black;
border-radius: 5px;
}
/* Hintergrundbild für Header */
#header{
width: 960px;
height: 199px;
background: #000 url("images/background_anim_header.jpg") repeat-y scroll left top;
text-align:center;
border-radius: 5px;
}
/* Makenüberlagerung */
#header div{
width: 960px;
height: 199px;
background: transparent url("images/overlay.png") no-repeat scroll left top;
border-radius: 5px;
}
/* Headertext-Positionierung und Formatierung*/
#header h1{
padding-top:75px;
text-shadow: 0px 0px 3px grey;
font-family: Verdana, Geneva, sans-serif;
color:white;
}
/*Schattenpositionierung*/
#header_plastics {
margin:0 auto;
width: 960px;
height: 38px;
background: url("images/Header_shadow.png")
}
  </style>
  <style>
h3 {
background: #e3e3e3;
background: -moz-linear-gradient(top, #e3e3e3, #666666);
background: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), to(#666666));
padding: 10px 40px;
margin-left: -40px;
margin-top: 0;
position: relative;
width: 25%;
font-family: Verdana, Geneva, sans-serif;
border-radius: 0 5px 5px 0;
-moz-box-shadow: 1px 1px 3px #292929;
-webkit-box-shadow: 1px 1px 3px #292929;
color: #454545;
text-shadow: 0 1px 0 white;
}
.arrow {
width: 0; height: 0;
line-height: 0;
border-left: 19px solid transparent;
border-top: 10px solid #555555;
top: 103%;
left: 0;
position: absolute;
}
  </style>
  <style type="text/css">
/* <![CDATA[ */
.image-wrapper {
border:3px solid #EEE;
position:relative;
float:left;
width:290px;
height:150px;
overflow:hidden;
}
.image-wrapper > img {
display:block;
}
.image-wrapper {
box-shadow:0px 0px 5px rgba(0, 0, 0, .7);
-moz-box-shadow:0px 0px 5px rgba(0, 0, 0, .7);
-webkit-box-shadow:0px 0px 5px rgba(0, 0, 0, .7);
}
.image-wrapper > .image-details {
margin:0;
position:absolute;
left:0px;
right:0px;
bottom:0px;
height:50px;
line-height:25px;
background:#000;
color:#fff;
opacity:.7;
padding-left: 10px;
}
/* ]]> */
  </style>
</head>
<body leftmargin="0" topmargin="0"
 onload="MM_preloadImages('images/lupe_over.png')"
 alink="#666666" link="#ffffff" marginheight="0"
 marginwidth="0">
<img src="images/background.jpg" alt=""
 class="hintergrundbild" id="background-img" content="" />
<div class="div_main" id="div_main">
<div class="div_logo" id="div_logo"></div>
<div class="div_navi" id="div_navi"><strong>
<ul id="blue">
  <li class="current"><a href="#" title="">Navi_1<span></span></a></li>
  <li><a href="ueber.html" title="">Navi_2<span></span></a></li>
  <li><a href="ausbildung.html" title="">Navi_3<span></span></a></li>
  <li><a href="leistungen.html" title="">Navi_4<span></span>
    </a> </li>
  <li><a href="kontakt.html" title="">Navi_5<span></span></a></li>
  <li><a href="impressum.html" title="">Navi_6<span></span></a></li>
</ul>
</strong></div>
<div class="div_header" id="div_header">
<!--[if lte IE 6]>
<style type="text/css" media="screen">
#header div{
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='overlay.png', sizingMethod='scale');
}
</style>
<![endif]-->
<div id="header_complete">
<div id="header"><!-- Dieses DIV ist für die Maskenüberlagerung -->
<div>
<h1>&nbsp;</h1>
</div>
</div>
</div>
<div id="header_plastics"><!-- Dieses DIV ist für die Schattierung --></div>
</div>
<div class="div_index_intro" id="div_header">
<div class="div_index_intro_left" id="div_intro_left">
<h1>Headline</h1>
<p>Inhalt<br />
<a href="leistungen.html" onmouseout="MM_swapImgRestore()"
 onmouseover="MM_swapImage('Lupe_Leistungen','','images/lupe_over.png',1)"><img
 src="images/Lupe_norm.png" name="Lupe_Leistungen"
 class="picture_index_lupe" id="Lupe_Leistungen"
 border="0" height="18" width="17" /></a></p>
</div>
<div class="div_index_intro_seperator"
 id="div_intro_seperator"></div>
<div class="div_index_intro_right" id="div_intro_right">
<h1>Headline</h1>
Inhalt <br />
<a href="ausbildung.html" onmouseout="MM_swapImgRestore()"
 onmouseover="MM_swapImage('Lupe_Ausbildung','','images/lupe_over.png',1)"><img
 src="images/Lupe_norm.png" name="Lupe_Ausbildung"
 class="picture_index_lupe" id="Lupe_Ausbildung"
 border="0" height="18" width="17" /></a></div>
</div>
<div class="div_index_content" id="div_content">
<!-- Headline START--><!--[if IE]>
<style>
.arrow { top: 100%; }
</style>
<![endif]-->
<h3> Headline<span class="arrow"></span> </h3>
<!--headline ENDE-->
<div class="div_index_column" id="div_index_column">
<p>Inhalt</p>
</div>
<br />
<div class="div_index_offer_complete" id="div_offer_all">
<div class="div_index_offer_1" id="div_index_offer_1">
<div class="image-wrapper"><img
 src="images/Fotolia_security.jpg" alt="" />
<p class="image-details">&raquo; Topic<br />
<a href="personenschutz.html">Erfahren sie mehr
dar&uuml;ber...</a>
</p>
</div>
<script type="text/javascript"
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
$(function() {
$('.image-details').css('bottom', '-25px').parent().hover(function() {
$(this).find('.image-details').animate({'bottom': '0px'}, 250);
}, function() {
$(this).find('.image-details').animate({'bottom': '-25px'}, 250);
});
});
/* ]]> */
</script></div>
<div class="div_index_offer_2" id="div_index_offer_2">
<div class="image-wrapper"><img
 src="images/Fotolia_cam.jpg" alt="" />
<p class="image-details">&raquo; Topic<br />
<a href="objektschutz.html">Erfahren sie mehr
dar&uuml;ber...</a>
</p>
</div>
<script type="text/javascript"
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
$(function() {
$('.image-details').css('bottom', '-25px').parent().hover(function() {
$(this).find('.image-details').animate({'bottom': '0px'}, 250);
}, function() {
$(this).find('.image-details').animate({'bottom': '-25px'}, 250);
});
});
/* ]]> */
</script></div>
<div class="div_index_offer_3" id="div_index_offer_3">
<div class="image-wrapper"><img
 src="images/Fotolia_driver.jpg" alt="" />
<p class="image-details">&raquo; Topic<br />
<a href="weitere.html">Erfahren sie mehr
dar&uuml;ber...</a>
</p>
</div>
<script type="text/javascript"
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
$(function() {
$('.image-details').css('bottom', '-25px').parent().hover(function() {
$(this).find('.image-details').animate({'bottom': '0px'}, 250);
}, function() {
$(this).find('.image-details').animate({'bottom': '-25px'}, 250);
});
});
/* ]]> */
</script></div>
</div>
<div class="cleaner_regular">&nbsp;</div>
</div>
<div class="div_footer" id="div_footer">
<div class="div_footer_ueberuns" id="div_footer_metanavi"><strong>Topic</strong>:<br />
<br />
&raquo;Text&laquo;</div>
<div class="div_footer_seperator" id="div_intro_seperator4"></div>
<div class="div_footer_metanavi" id="div_footer_metanavi2"><strong>In
K&uuml;rze</strong>:<br />
<br />
&raquo;&nbsp;<span style="text-decoration: underline;">Navi</span></div>
<div class="div_footer_seperator" id="div_intro_seperator2"></div>
<div class="div_footer_anschrift" id="div_footer_metanavi4"><strong>Hier
finden Sie uns:</strong><br />
<br />
</div>
<br />
<div class="div_footer_formular" id="div_footer_metanavi3"><strong>Ihre
Anfrage:</strong><br />
<br />
<form id="form1" name="form1" method="post"
 action="myFormMail.php">
  <table border="0" width="364">
    <tbody>
      <tr>
        <td width="67">Name*</td>
        <td colspan="2"><label for="Name"></label>
        <input name="Name" class="form_text" id="Name"
 value="Nachname, Vorname" size="30" type="text" /></td>
      </tr>
      <tr>
        <td width="67">E-Mail*</td>
        <td colspan="2"><label for="E-Mail"></label>
        <input name="E-Mail" class="form_text"
 id="E-Mail" value="@" size="30" type="text" /></td>
      </tr>
      <tr>
        <td valign="top" width="67">Nachricht*</td>
        <td colspan="2"><label for="Nachricht"></label>
        <textarea name="Nachricht" cols="35" rows="3"
 class="form_text" id="Nachricht">Ihre Mitteilung an
uns...</textarea></td>
      </tr>
      <tr>
        <td valign="top">&nbsp;</td>
        <td width="211"><input name="Senden"
 id="Senden" value="Senden" type="submit" /></td>
        <td width="72">*Pflichtfelder</td>
      </tr>
    </tbody>
  </table>
</form>
</div>
</div>
<div class="div_copyright" id="div_copyright">&copy;
2012&nbsp;</div>
</div>
<div class="tooltipContent" id="sprytooltip2">Content</div>
<div class="tooltipContent" id="sprytooltip1">Content</div>
<script type="text/javascript">
var sprytooltip1 = new Spry.Widget.Tooltip("sprytooltip1", "#sprytrigger1", {useEffect:"fade", followMouse:true, closeOnTooltipLeave:true});
var sprytooltip2 = new Spry.Widget.Tooltip("sprytooltip2", "#sprytrigger2", {useEffect:"fade", closeOnTooltipLeave:true, followMouse:true});
</script>

<!-- 2. Script zum Preloader -->
<script type='text/javascript'>
QueryLoader.init();
</script
<!-- 2.  Script zum Preloader -->


</body>
</html>

SpiceLab · 25. April 2012

Zum einen steckt hier in der letzten Codezeile ein Überbleibsel deines fehlerhaften Auskommentierens:

HTML:

<!-- (ein anderer jQuery Import, hier aber für eine Hover-Darstellung gedacht - Auskommentiert, da sonst 2 Verweise angegeben)
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> -->

<!-- CSS zum Preloader -->
<link rel="stylesheet" href="css/queryLoader.css" type="text/css" />
<!-- CSS zum Preloader -->

type="text/javascript" charset="utf-8"></script>

Zum anderen hast du meine gestrige vorletzte Antwort bzgl. der Bibliothekdatei nicht beachtet, da du im weiteren Verlauf des Quellcodes mehrmals "jquery.min.js" (1.7) ins Dokument lädst. Diese wird aber nur einmalig im Dokumentheader aufgerufen!

Und zu guter letzt enthält der </script>-Tag unmittelbar vor </body> einen Syntaxfehler.

Dies alles ist mir beim ersten Überflug ins Auge gestochen.

tobm_knows_best · 25. April 2012

spicelab hat gesagt.:
Zum einen steckt hier in der letzten Codezeile ein Überbleibsel deines fehlerhaften Auskommentierens:

HTML:

  <link rel="stylesheet" href="css/queryLoader.css" type="text/css" />  type="text/javascript" charset="utf-8"></script>

Zum anderen hast du meine gestrige vorletzte Antwort bzgl. der Bibliothekdatei nicht beachtet, da du im weiteren Verlauf des Quellcodes mehrmals "jquery.min.js" (1.7) ins Dokument lädst. Diese wird aber nur einmalig im Dokumentheader aufgerufen!

Und zu guter letzt enthält der </script>-Tag unmittelbar vor </body> einen Syntaxfehler.

Dies alles ist mir beim ersten Überflug ins Auge gestochen.

Ja - ich hab das eben auf Arbeit gemacht und mit dem Texteditor zusammengefriemelt... Ich werde mal versuchen das zu beachten

Denn gestern hats mich dann doch ziemlich aus´m Konzept gebracht...

Merci erst mal

tobm_knows_best · 26. April 2012

Also nu hab Ichs versucht...

Ich komm nich auf´n Trichter was falsch sein sollte.... Lt. dem Code dürfte er nur noch auf eine Bibliothek zurückgreifen - sämtliche nachfolgenden jQuery-Verweise wurden entfernt

Er zeigt jetzt zwar auch den weissen *Ladebalken* auf schwarzem Hintergrund, Aber stoppt bei knapp 88 % - und bleibt dann auch so... Hier der Auszug aus´m CSS im Header-Bereich:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" href="/favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XXX </title>
<style type="text/css">
@import url("css/XXX.css");
</style>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script>
<link rel="stylesheet" href="css/queryLoader.css" type="text/css" />
<script type='text/javascript' src='js/queryLoader.js'></script>
<script type="text/javascript" charset="utf-8">
var scrollSpeed = 70; 		// Speed in milliseconds
var step = 1; 				// How many pixels to move per step
var current = 0;			// The current pixel row
var imageHeight = 5000;		// Background image height
var headerHeight = 300;		// How tall the header is.
//The pixel row where to start a new loop
var restartPosition = -(imageHeight - headerHeight);
function scrollBg(){
//Go to next pixel row.
current -= step;
//If at the end of the image, then go to the top.
if (current == restartPosition){
current = 0;
}
//Set the CSS of the header.
$('#header').css("background-position","0 "+current+"px");
}
//Calls the scrolling function repeatedly
var init = setInterval("scrollBg()", scrollSpeed);
</script>
<script src="SpryAssets/SpryTooltip.js" type="text/javascript"></script>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>

und hier der Code vor dem Ende des Body-Tags:

HTML:

<script type='text/javascript'>
QueryLoader.init();
</script>

Da dürfte jetzt eigentlich auch kein Fehler sein denke ich. Hier mal´n Screenshot wie bei mir das Resultat aussieht, und wo´s hängt:

Bildschirmfoto 2012-04-27 um 09.45.20.png

SpiceLab · 27. April 2012

Wird evtl. in der Fehlerkonsole ein JavaScript-Fehler gemeldet?

Ansonsten gilt erneut die Bitte, einen Link zu posten, und diesen nicht wieder nach einem kurzen Zeitraum zu löschen

tobm_knows_best · 27. April 2012

Nein kein Fehler mehr

Habe es eben hinbekommen...

Wie du schon sagtest lag die Lösung zum Einen an den mehrfachen Bibliothekenverweise von jQuery.
Und zum anderen musste ich dann diesen Code...

HTML:

<script type='text/javascript'>
QueryLoader.init();
</script>

... nicht direkt vor dem Ende des Body-Tags setzen, sondern ich hab´s einfach mal so versucht, und hab Ihn direkt am Anfang des Body-Tags gesetzt

- Siehe da - es funktioniert

*kleiner Nachtrag
Ist es denn Sinn und Zweck des PreLoaders, dass er sich jedesmal beim Seitenaufruf der Index.html wieder erneut abspielt? Ich dachte eigentlich, dass sich der Preloader nur dann *einschaltet* wenn entsprechende Daten im Cache nicht vorhanden sind... Weil aktuell lädt dieser immer wieder wenn ich meine index.html aufrufe... Muss ich hierbei mit sog. Selektoren arbeiten... ?!

SpiceLab · 27. April 2012

tobm_knows_best hat gesagt.:
*kleiner Nachtrag
Ist es denn Sinn und Zweck des PreLoaders, dass er sich jedesmal beim Seitenaufruf der Index.html wieder erneut abspielt? Ich dachte eigentlich, dass sich der Preloader nur dann *einschaltet* wenn entsprechende Daten im Cache nicht vorhanden sind... Weil aktuell lädt dieser immer wieder wenn ich meine index.html aufrufe... Muss ich hierbei mit sog. Selektoren arbeiten... ?!

Ich bezweifle, dass das Script auf den Inhalt des Browsercache achtet, und sich entsprechend "abschaltet", wenn das Webdokument erneut geladen wird - das erledigt der Browser eigenständig ohne das hinzugefügte JavaScript. Vermutlich wird hier eher ein gefüllter Cache die initialisierte Ladeprozeß-Animation beschleunigen.

Lies hierzu auch in der Dokumentation aufmerksam den Abschnitt "Implementation des Preloaders" durch:

QueryLoader: Webseiten oder Elemente mit jQuery vorausladen hat gesagt.:
Implementation des Preloaders

[...]

Damit ist der Preloader auch schon in die Seite eingebunden. In dieser Grundkonfiguration wird der gesamte Inhalt der Webseite vorausgeladen. Es ist aber auch möglich, nur bestimmte Elemente einer Webseite vorauszuladen. Dies kann mit Hilfe eines Selektors definiert werden. Soll also zum Beispiel ein div-Container mit der id “bilder” vorausgeladen werden, so wird anstelle des obigen Codes eine leicht abgewandelte Version verwendet:

Code:

<script type='text/javascript'> QueryLoader.selectorPreload = "#bilder"; QueryLoader.init(); </script>

Aber selbst diese Methode wird nichts an dem Umstand ändern, dass die gewählten Seitenbereiche vorausgeladen werden bzw. das Webdokument animiert aufgezogen wird - je nach Cacheinhalt ein Ticken schneller oder langsamer...

✔ Preloader gesucht...

tobm_knows_best

Erfahrenes Mitglied

SpiceLab

ZENmechanic

tobm_knows_best

Erfahrenes Mitglied

SpiceLab

ZENmechanic

tobm_knows_best

Erfahrenes Mitglied

tobm_knows_best

Erfahrenes Mitglied

SpiceLab

ZENmechanic

tobm_knows_best

Erfahrenes Mitglied

SpiceLab

ZENmechanic

Neue Beiträge