Guten Morgen, ich habe eine Content Seite erstellt, auf der Infos und Bilder über unseren Laden zu finden sein sollen. Nun wil ich die Bilder nicht in Originalgröße einfügen, sonder etwas kleiner. Wenn man auf das Bild klickt, soll sich as vergrößern. Es soll sich auf jeden Fall KEIN neues Fenster, oder Tab öffnen. Das finde ich ganz schrecklich. Eine Box (heißt das Lightbox?) wäre auch ok, aber ich glaube, das ist ein wenig komplizierter umzusetzen, oder? Nach langer Suche habe ich eine Lösung gefunden, für die nur CSS bzw. HTML gebraucht wird. Aber irgendwie klappt das bei mir nicht. Könnte vielleicht mal jemand schauen, ob der Code denn so richtig wäre. Oder kennt jemand eine Lösung wie ich es einfach lösen kann? Vielen Dank schonmal Simone HTML: <div id="minigalerie"> <a href="#b1"><img src="bild1.png" id="b1" width="100" height="50" /></a> <a href="#b2"><img src="bild2.png" id="b2" width="100" height="50" /></a> <a href="#b3"><img src="bild3.png" id="b3" width="100" height="50" /></a> </div> Code: #minigalerie { display: table; border-spacing: 10px; } #minigalerie a { display: table-cell; vertical-align: middle; } #minigalerie img { transition: 1s; -moz-transition: 1s; -o-transition: 1s; -webkit-transition: 1s; } #minigalerie img:target { width: 300px; height: 150px; } #minigalerie img { background-color: #ffffff; padding: 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 0 0 7px rgba(100, 100, 100, 1); -moz-box-shadow: 0 0 7px rgba(100, 100, 100, 1); -webkit-box-shadow: 0 0 7px rgba(100, 100, 100, 1); }
Ups... Gar nicht drüber nachgedacht. Aber eigentlich habe ich auch keine wirklich Lösung gefunden, eher einen Kompromiss. Habe es nun erstmal so gemacht, wie ich es ja eigentlich nicht wollte, eben dass sich ein neues kleines Fenster öffnet. Ist aber nur als Übergangslösung gedacht. Werde später eine 360 Grad Aufnahme einbinden. So das der Kunde sich quasi in unserem Laden umschauen kann.
Schau Dir mal den Gambio-Testshop 2 an, da werden die bilder größer, wenn man mit er Maus drüber geht. Wie Gambio das gemacht hat, kannst Du Dir da im Admin -> Content-Manager ansehen (Quellcode) Vielleicht wäre das ja noch eine Alternative.
Danke Barbara. Das hatte ich auch hinbekommen, dass die bilder beim drüberfahren größer werden, aber find das irgendwie auchnicht so richtig gut. Vor allem, weil es dann ja am Handy/Tablett irgendwie blöd wird. Habe mich jetzt auch irgendwie auf die 360 Grad Aufnahme eingeschossen. Irgendwann mal... Wenn ich alle anderen Problem gelöst, oder verzweifelt aufgegeben habe. ;-)
Gerade eben mit Wilken wegen selbem Thema gechattet. Er meint lieber auf Lightboxen verzichten für die Mobile Frindly. Wollte das bei uns auch machen bei den Shirt-Farben in einem Tab. (Link nur für registrierte Nutzer sichtbar.)
Hallo Dennis, ja, so wie das bei euch ist wenn man auf das Bild klickt hatte ich mir das gedacht. Aber wie gesagt, habe mich inzwischen von der Idee verabschiedet und träume von ner 'Rund-um-Ansicht'...
Beim Artikelbild ist das ja Shopstandard - Beim Tab-Farben haben wir Bilder von jedem Shirtfarbe. Die wollt ich eigentlich auch klickbar machen, aber habs dann gelassen.
Am einfachsten kann man das mit Javascript/jQuery lösen... In dem mein bei "hover" oder "klick", die Bild-URL verändert.... Und einfach z.B. statt das Bild aus ".../info_images/..." das aus ".../popup_images/..." lädt. Dürfte nicht mehr als ein 10-Zeiler werden.
Guten Morgen, also ich bin schon sehr stolz auf mich, dass ich so einiges mit CSS / HTML hinbekommen habe. Ich habe eigentlich keine Ahnung von der Materie und viel durch ausprobieren rausgefunden. Über google habe ich auch gefunden, das es mit Javascript ganz einfach geht, aber ehrlich gesagt habe ich mich da nicht rangetraut. Wie gesagt, jetzt erstmal die anderen Baustellen, die so aufgetreten sind, beheben und dann mal weiter schauen.
Ich woillte eigenes JS vermeiden und daher gerne das vorhandene von Gambio nutzen. Aber wie gesagt, da immer mehr mobile sind, hab ich drauf verzichtet auf Wilkens Rat hin.
funktionieren - ja klar, gibts ja auch genug responsive Lightboxen da draussen. Frage ist nur braucht man das auch? Und ist es Mobile Frindly?
Hallo zusamen, hat jemand mittlerweile eine Lösung dafür gefunden? Ich möchte auf der Startseite einen ganz einfachen Hovereffekt für ein Bild einbauen d.h. Bild ändert sich wenn man mit der Maus drüber geht, allerdings scheint dies im Shop gar nicht so einfach zu sein. Über <div class="bildwechsel"></div> und folgendem css .bildwechsel {width:100px; height:100px; background:url("images/img1.jpg") top right;} .bildwechsel:hover {background:url("images/img2jpg") bottom right;} konnte ich das zumindest nicht ansteuern. Hat jemand eine Idee?
Hallo, schau mal auf der Seite: http://james-star.com/answers/de/css3-effekte-transformationen-animationen-uebergaenge/ Da werden verschiedene Effekt gezeigt und auch der CSS Code angegeben. damit habe ich es dann auch geschafft, dass sich das Bild bei drüber fahren ändert. VG Simone