Ich hab jetzt den Quelltext mit und ohne list-style-type: disc verglichen. Das komische ist, dass der Quelltext genau gleich aussieht.
Das sollte doch unterschiedlich sein oder
Die Erklärung ist, dass disc Default ist, d. h. wenn man nichts angibt, wird dieses eingestellt.
Am einfachsten wäre es, wenn man die Seite online sehen könnte, dann kann man die Entwicklerwerkzeuge verwenden und sich schnell einen Überblick über das HTML und das wirksame CSS verschaffen.
Ich habe es mal getestet und bei mir wird die Scheibe wie gewünscht vor der ersten Zeile angezeigt, egal ob ich den Zeilenumbruch mit <br> oder durch Begrenzung der Breite erzeuge.
1) ist es möglich via Code zu beeinflussen, dass pro Produktseite auf dem Handy zwei Spalten anstatt nur einer angezeigt werden ?
Ja, das ist kein Problem und wieder einmal ist Flexlayout die Lösung:
ul.Products {
clear: both;
padding-left: 0;
list-style-type: none;
display: flex;
flex-wrap: wrap;
}ul.Products li {
clear: both;
overflow: hidden;
margin: 0 0 6px;
padding-bottom: 6px;
display: flex;
flex-direction: column;
flex: 0 0 45%;
}Durch den Prozentwert bei flex kannst Du steuern, wie viele Elemente in einer Zeile angezeigt werden und ggf. mit Mediaqueries die Anzahl umschalten.
Am besten informierst Du dich grundlegend über Flexlayout, dann kannst Du solche Problem sebständig lösen und auf float verzichten:
In der mobilen Ansicht sind die Produktbilder einfach ultra klein und ich habe keine Ahnung wieso.
Hier:
http://mob-shop.de/epages/b2b_mob…TTBOARDS/Street
sind bei mir die Bilder auch im Desktop-Browser recht klein und das liegt daran, dass die Breite durch das CSS auf 50px begrenzt wird:
.Products .ProductSmallImage {
max-width: 50px;
height: auto;
float: left;
}Vergrößere das max-width und die Bilder werden größer.
In der Tat, da sind sie, ich muss blind gewesen sein.
Die Lösung ist dann einfach:
ul.Products li {
clear: both;
overflow: hidden;
margin: 0 0 6px;
padding-bottom: 6px;
display: flex;
flex-direction: column;
}Und dann kannst Du mit einer Mediaquery zwischen flex-direction: column; und flex-direction: row; umschalten.
Ich kann leider die Darstellung mit den Skateboards, wo der Text rechts ist, nicht finden. Beschreibe doch Mal, wie man dahin kommt oder poste einen direkten Link.
Dann müssen wir bei den Eventhandlern ansetzen, von denen oben die Rede war. Du hast ja in #2 das Wesentliche gepostet. Der Code ist gut kommentiert, so dass man nicht Zeile für Zeile analysieren muss.
D. h. Du musst das event "loaded" verwenden, denn das wird getriggert, wenn alle Bilder geladen sind. Also dein Ladebild über das Panorama- bzw. 3D-Bild legen und in der Funktion loaded unsichtbar machen:
<div id="peelwrapper">
<img src=" ... " hier alles was Du für Peel benötigst >
<img src="loadimg.gif" id="loadimg">
</div>CSS:
#peelwrapper {
position: relative;
}
#loadimg {
position: absolute;
left: 0;
top: 0;
}Und der Kern der Sache: In der Funktion loaded das Ladebild unsichtbar machen:
// `"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) });Wenn Du statt dessen die Opacity von 1 auf 0 änderst, kannst Du mit transition ein geschmeidiges Ausblenden des Bildes erreichen. Allerding musst Du es dann durch pointer-events: none; für die Mausaktionen durchlässig machen.
Du kannst ein Bild unsichtbar laden, so dass es im Cache ist, indem Du ein Image-Objekt anlegst:
var theimg = new Image();
theimg.src="dein-bild.jpg";Du kannst dabei auch auf das Laden lauschen und daran eine Aktion anschließen:
var theimg = new Image();
theimg.onload = function() {
// diese Funktion wird aufgerufen, wenn das Bild fertig geladen ist.
};
theimg.src="dein-bild.jpg";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
Wenn die anderen Bilder aus data-images sofort, d. h. nach einem ganz kurzen Moment, angezeigt werden, heißt das doch, dass sie auch ganz schnell geladen werden - Anzeige erst, wenn Ladevorgang beendet?
Habe das Plugin bereits erfolgreich eingerichtet und es funktioniert soweit.
Da bist Du besser als ich: Ich habe versucht, eine Testseite einzurichten und egal was ich mache, das gescrollte Bild ist immer riesengroß. ein background-image mit 6000px x 3000px.
Ich hatte jedoch den Eindruck, dass das Bild, was im src-Tag angegeben wird, sofort angezeigt wird und dann durch das Bild, das in data-image(s) angegeben wird, nach dem Laden ersetzt wird. Versuche doch mal, im src-Tag dein Ladebild anzugeben und im data-image(s) das richtige.
Bei Wikipedia ist es in einem Satz gut erklärt:
Das namengebende Beispiel ist die Anordnung der Wörter in einem Lexikon: Sie werden zunächst nach ihren Anfangsbuchstaben sortiert, dann die Wörter mit gleichen Anfangsbuchstaben nach dem jeweils zweiten Buchstaben usw.
In den Script ist eine if Abfrage die kontrollieren soll ob Zahl1 größer ist als Zahl2. Das Funktioniert größten Teils auch.
Gibt man aber oben zb 300 ein und unten zb 99 , sagt die if abfrage aber das 99 nicht kleiner als 300 ist.
Der Grund ist, dass beide Werte nicht numerisch sind, sondern Strings, da aus Eingabefeldern. Dann funktioniert der Vergleich etwas anders, nämlich lexikographisch, wie bei Wörtern in einem Lexikon:
https://stackoverflow.com/questions/1863…g-compare-logic
Wandle die String mit parseInt um und alles sollte gut sein.
Aber wie ich es nach PHP bekomme, weiß ich trotzdem nicht.
Ist doch in dem Link in #5 genau beschrieben. Woran fehlt es denn?
Das Skript scheint das Sortable von jQuery-UI zu benutzen? Habe ich selber gerade erst eingesetzt.
Wenn ich das nun nach PHP schicke
Ist mit Ajax kein Problem. Am besten kodierst Du das Array in JSON, dann kannst Du es leicht an das PHP-Skript schicken.
Edit: Ich sehe gerade, in deiner Demo benutzt Du toString(), das würde genauso gut gehen, um das Array zu übertragen.
Hab immer wieder was von Ajax gelesen. Aber eine gute Einführung in Ajax habe ich bisher auch noch nicht gefunden.
Diese finde ich ganz gut:
Sollte kein Problem sein, ich hatte dich so verstanden:
$test = 'Vielen Dank an @person1 und an @person22';
$testmod = preg_replace('/(@[^0-9]+)(\d+)/', '<a href="/user/$2">$0</a>', $test);Ganz so einfach ist es wohl doch nicht.
Informiere dich über die Funktion preg_replace():
http://php.net/manual/de/function.preg-replace.php
Beachte besonders dies:
replacementdarf Referenzen in der Form \\n oder $n enthalten, wobei Letztere vorzuziehen ist. Jede dieser Referenzen wird mit dem Text ersetzt, der vom n-ten eingeklammerten Suchmuster erfasst wurde.
Versuche dies:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
body {
height: 100vh;
margin: 0;
display: flex;
flex-direction: column;
}
#wrapper {
margin-top: auto;
text-align: center;
position: relative;
}
#outerimg {
height: auto;
width: 40%;
max-width: 400px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#centerimg {
height: auto;
width: 10%;
max-width: 100px;
}
</style>
</head>
<body>
<div id="wrapper">
<img id="centerimg" src="images/klein.svg">
<img id="outerimg" src="images/gross.svg">
</div>
</body>
</html>In horizontaler Richtung ändern sich die Kreise mit der Breite des Browserfensters.
Das Problem mit dem oben abgeschnittenen Kreis lässt sich leicht beheben, indem man overflow: hidden; nicht pauschal sondern nur für body setzt:
Ich schrieb ja oben:
Auf Anhieb wüsste ich keine Lösung mit CSS, wo die Bilder sowohl auf Breiten- als auch auf Höhenänderung reagieren und gleichzeitig das Seitenverhältnis beibehalten.
Wäre es denn ausreichend, wenn sich die Größe nur in der horizontalen anpasst, so wie bei dem großen Kreis in deiner Datei?