Anscheinend hast Du mein Posting nicht richtig gelesen:
"eine Lösung könnte sein, die Bilder in einen Container zu legen und diesen mit Inline-HTML anzuzeigen. Dann kannst Du die Größe mit CSS ändern."
Dies sollte mit Colorbox möglich sein. Ist jedenfalls in den Beispielen von Colorbox so angegeben.
Beiträge von Sempervivum
-
-
Kenne Colorbox nicht und bin auch nicht so tief eingestiegen, aber eine Lösung könnte sein, die Bilder in einen Container zu legen und diesen mit Inline-HTML anzuzeigen. Dann kannst Du die Größe mit CSS ändern. Ist u. U. einfacher, als in den Code von Colorbox einzugreifen.
Du bist dir schon bewusst, dass die Qualität bei einer Verdopplung der Größe leidet? -
Ich habe mal eine kleine Demo mit jCanvas angefertigt:
HTML
Alles anzeigen<!DOCTYPE html><html> <head> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="js/jcanvas.min.js"></script> </head> <body> <canvas width="600" height="400"></canvas> <script> var iBullet = 0; function createBullet() { $('canvas').drawArc({ layer: true, name: "bullet" + iBullet, strokeStyle: '#000', strokeWidth: 2, x: 50, y: 50, radius: 20, // start and end angles in degrees start: 0, end: 360 }).animateLayer('bullet' + iBullet, { x: 400, y: 300 }, 2000, 'linear', function (idx) { return function () { $('canvas').removeLayer('bullet' + idx).drawLayers(); } } (iBullet) ); iBullet++; } window.setInterval(createBullet, 500); </script> </body> </html>Du siehst, mit jCanvas wird es sehr kompakt und einfach. Das müsste im wesentlichen das sein, was Du brauchst. Das mit dem iBullet gefällt mir nicht so, aber anscheinend ist es bei jCanvas nicht möglich, die Elemente in Variablen abzulegen.
-
"mit Canvas wärs mir sowieso am liebsten, weil das Schema auch mit Canvas gezeichnet wurde" Das ist natürlich ein entscheidender Grund, Canvas zu verwenden.
Bei Animationen kann man sich die Arbeit sehr erleichtern, wenn man ein Framework verwendet, jQuery bei normalen Animationen und jCanvas bei Animationen in Canvas. (Gibt natürlich noch mehr für Canvas.) Dort kannst Du Beginn und Ende der Animation angeben, so dass sich deine Frage wg. "nur wenn Wert XY > xy" u. U. erübrigt. -
PS: Wegen requestAnimationFrame() hatte ich an Canvas gedacht, aber anscheinend benutzt Du dieses gar nicht.
-
"da das ganze mit CSS sehr sehr unstabil läuf" Das wundert mich, denn ich hatte es ausprobiert und es hatte einwandfrei und flüssig funktioniert:
HTML
Alles anzeigen<!DOCTYPE html><html> <head> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script> function startbullet() { var bullet = $('<div class="bullet"></div>'); $("#wrapper").append(bullet); bullet.animate().addClass("animate"); } setInterval(startbullet, 2000); </script> <style> #wrapper { height: 400px; position: relative; } .bullet { position: absolute; top: 10px; left: 10px; width: 20px; height: 20px; background-color: #0ff; border-radius: 10px; transition-duration: 5s; transition-timing-function: linear; } .bullet.animate { top: 150px; left: 400px; } </style> </head> <body> <div id="wrapper"> </div> <!-- end wrapper --> </body> </html>Canvas ist aber sicher auch eine gute Lösung. Ich werde mir deins mal ansehen.
-
Zitat
Also diese Fläche mit den Zahlen die nach links gedreht wird
Kann ich nicht finden auf der Seite, die Du verlinkt hast.
-
Den Kreis mit den einzelnen Sektionen kannst Du vorteilhaft mit HTML5-Canvas aufbauen. Ich empfehle dabei, ein Framework wie jCanvas zu benutzen, da das die Handhabung sehr vereinfacht. Unterstützt Mouse- und Touch-Events und die Ermittlung der Mausposition. Die Daten kannst Du dann mit Ajax an den Server schicken und mit einem PHP-Skript in die Datenbank eintragen.
http://projects.calebevans.me/jcanvas/docs/arcs/ -
Das ist meine Homepage. Die Danksagung ist leider veraltet, inzwischen verwende ich zwei Karussells, und zwar dieses:
http://codecanyon.net/item/codingjacks-3d-carousel/2958101und dieses:
http://codecanyon.net/item/ultimate-3d-carousel/6651900Zwei deswegen, weil das von Coding Jack nicht mit dem IE kompatibel ist.
Und das Skript, wo die Feder "Willkommen!" schreibt, habe ich selbst geschrieben. Es funktioniert mit Javascript und HTML5-Canvas. Ich hatte so etwa manchmal als animiertes GIF gesehen, konnte aber keinen Generator finden, mit dem man ein GIF mit eigenem Text erzeugen kann. Da habe ich dieses Skript geschrieben. Es entspricht nicht mehr dem neuesten Stand der Erkenntnis, weil ich inzwischen gelernt habe, dass man für Animationen Animationframe verwenden sollte, aber ich konnte mich nicht entschließen, alles zu überarbeiten.
Die Bilder kann man leicht austauschen, so dass man einen anderen Text, eine andere Feder und ein anderes Tintenfass verwenden kann. -
Zitat
kann ich irgendwo im w3c oder so nachlesen, welche Elemente ich nicht wo reinpacken darf?
Hilfreich ist auch ein Editor, der solche Fehler gleich im Quelltext einschl. Erläuterung anzeigt. Ich benutze daher MS Webmatrix, der dieses Feature besitzt. Das erspart ständiges Nachlesen.
-
Da fallen mir zwei Dinge auf:
1. Dein HTML hat Validierungsfehler. So ist es richtig:HTML<ul class="entry" style="background-color:#57f6d6;width:160px;height:460px;left:90px;top:1630px"> <li>2008/09 - 2010/07<br /> <b>Schulische Ausbildung</b><br /><br /> Elektrotechniker - Fachrichtung: Betriebs- und Automatisierungstechnik<br /> <u>Abschluss</u>: <b>Fachhochschulreife </b><br /><br /></li> <li><a target="_blank" href="http://www.berufsschule1ab.de/index.html">Städtische Fachschule für Elektrotechnik in Aschaffenburg</a> </li> </ul>
2. Dein hoverCSS#navi ul li:hover > ul {sagt, dass Du ein Kindelement ul ändern möchtest. Ein solches ul-Element gibt es aber nicht im HTML. Was hast Du hier denn eigentlich vor?
-
Wenn es um das Layout geht, wäre es besser, das generierte HTML zu sehen an Stelle des PHP. Wenn die Seite online ist, dann poste doch Mal die URL.
-
Probiere mal dieses:
PHP
Alles anzeigen<?php $textarray = array( array("from"=>"2016-01-01", "to"=>"2016-01-16", "text"=>"dein Text 1"), array("from"=>"2016-01-17", "text"=>"dein Text 2"), array("from"=>"2016-01-18", "to"=>"2016-01-25", "text"=>"dein Text 3"), array("from"=>"2016-06-01", "to"=>"2016-06-25", "text"=>"dein Text 4") // usw. ); $now = strtotime("now"); //var_dump(date("d m", $now)); for ($i = 0, $found = FALSE; $i < count($textarray) && !$found; $i++) { $from = strtotime($textarray[$i]["from"]); if (array_key_exists("to", $textarray[$i])) $to = strtotime($textarray[$i]["to"]); else $to = $from; $to = strtotime("+1 day", $to); //var_dump(date("d m", $from), date("d m", $to)); if ($now >= $from && $now < $to) $found = TRUE; } if ($found) echo($textarray[$i - 1]["text"]);?>In eine Datei, z. B. oeffnungszeit.php schreiben und mit <?php include("oeffnungszeit.php"); ?> dort wo die Öffnungszeit angezeigt werden soll, einziehen. Wie man das in Wordpress macht, kann ich dir leider nicht erklären.
-
Freut mich, dass es jetzt geht.
-
Ja, den Code habe ich mir schon in der Quelltextansicht meines Browsers angesehen. Wie schon gesagt, such mal in den Einstellungen des Builders, ob Du etwas findest, womit man das clear:float weg bekommt. Und wenn nicht, probiere das CSS, das ich gepostet habe.
-
Vermutlich ist das Problem, dass Du die Juicebox initialisierst, bevor der betr. Container definiert wird. Schreibe den Javascript-Code mal ganz ans Ende des Body, direkt vor dem </body>.
Edit: Anscheinend ist das nicht die Ursache, denn die Galerie wird erzeugt. Ich empfehle dennoch, dass Javascript ans Ende des Body zu stellen.
Edit2: Entfernt man in .jcbx-glry-classic das clear:both wird die Galerie richtig angezeigt. Leider weiß ich nicht, wie man das bei dieser Galerie sauber lösen kann. Hast Du den Builder verwendet, um die Galerie zu erzeugen? Dann müsstest Du mal in den Einstellungen suchen, ob man es ändern kann. Wenn nicht, versuche dies in deine Seite einzufügen:CSS<style>.jcbx-glry-classic {clear:none}</style> -
Selber benutze ich die Copy&Show Gallery:
http://vysions.de/cas-gallery/Diese besteht aus einer einzigen PHP-Datei und hat den Vorteil, dass sie die Bilder automatisch ausliest und das HTML generiert, so dass man neue Bilder nur hochladen muss, um sie zur Galerie hinzu zu fügen.
Man kann auch Unterseiten anlegen.
Leider ist diese nicht responsiv und ich habe sie daher entsprechend geändert. Sieht dann so aus:
http://www.ulrichbangert.de/wildblumen/index.phpExif-Informationen kann man ausschalten. Leider reichten meine Kenntnisse nicht aus, um das Konzept von einer einzigen Datei aufrecht zu erhalten.
-
Eine Möglichkeit könnte sein, die Kreissegmente mit jCanvas zu zeichnen (was einfacher und übersichtlicher sein dürfte als CSS) und die Mousevents zu verwenden:
http://projects.calebevans.me/jcanvas/docs/mouseEvents/Oder Google Charts und das select-Event zu verwenden:
http://stackoverflow.com/questions/6648…tion-line-chart -
Deine Links führen nach bilder.php, deine PHP-Seite heißt jedoch index.php. Du musst
- entweder die Links ändern
- oder den Dateinamen auf bilder.php ändern
dann wird es funktionieren.
https://funky99.lima-city.de/index.php?seite=2 beispielsweise wird angezeigt. -
Poste doch mal die Adresse deiner Seite, damit man es sich ansehen kann.