Seite 6 von 7
Re: Vergrößern der Bilder
Verfasst: Sa 16. Jan 2016, 19:10
von Jasko
Das wichtigste für dieses Script braucht man zwei Bilder, ein kleines und ein großes.
wenn das hier ein kleines Bild ist das auf der Seite angezeigt wird
also
dann muss ein entsprechend größeres Bild im code oben zwischen <head> und </head>so angepasst werden.
$('#image1').addimagezoom({ // single image zoom
zoomrange: [3, 10],
magnifiersize: [300,300],
magnifierpos: 'right',
cursorshade: true,
largeimage: '1_groß.jpg' //<-- No comma after last option!
})
Ich sehe aber ein Problem bei dieser Methode für dich, du musst für jedes Bild diesen oberen teil einbauen, was sicherlich nicht so super ist bei deinen vielen Bildern
mann kann den oberen teil auch mit standard werten Starten wie bei
Demo 2
würde dan so aussehen
$('#image1').addimagezoom()
Re: Vergrößern der Bilder
Verfasst: Sa 16. Jan 2016, 19:33
von Jasko
Hier ein Code Beispiel wie man es mit diesem Skript einfach realisieren kann, dabei habe ich vier Bilder eingefühgt so wie es bei dir wäre, die Bilder müssen aber wenigstens eine Breite von 500px haben damit das gut aussieht.
Re: Vergrößern der Bilder
Verfasst: Sa 16. Jan 2016, 19:37
von moni
Guten Abend zusammen ..
habe in Internet einen simplen CSS3 Code gefunden und der ist ohne JS
http://simplegang.com/zoom-images-on-mo ... sing-css3/
auch gleich den getestet und sieht so aus
http://demo.homepagehelfer.net/001/001a/seite2.php
man kann auch ganz einfach die gewünschte Zoom Größe einstellen sowie auch Geschwindigkeit ...das gut auch ist es reicht nur eine Bild große dazu ..
.
Ob das was für dich wäre Karin
Re: Vergrößern der Bilder
Verfasst: Sa 16. Jan 2016, 19:42
von Jasko
Ich finde den COde super und ist viel weniger arbeit, als dieser hier
Re: Vergrößern der Bilder
Verfasst: Sa 16. Jan 2016, 19:52
von moni
Jasko hat geschrieben:Ich finde den COde super und ist viel weniger arbeit, als dieser hier
das finde ich auch ..habe auch zwei Bilder rein gesetzt und eignet sich auch dafür ... auch so wie aussieht auf mobil macht auch mit
hier kann man testen
http://quirktools.com/screenfly/
Re: Vergrößern der Bilder
Verfasst: Sa 16. Jan 2016, 20:03
von Butterblume
Hallo Ihr beiden,
zunächst erst einmal vielen vielen
für Deine Geduld mit mir Jasko, jetzt war ich zwar soweit dass ich es fast aber auch nur fast hinbekommen hätte aber dann kam Moni um die Ecke mit dem Code, ich kann echt nur sagen
Moni Du bist echt ein schatz.
Jetzt muss ich im Grunde doch nur den css code bei mir in die css eingeben und tja, es geht einfach nicht ohne Probleme bei mir
Code: Alles auswählen
.zoom_img img{
margin:50px;
height:100px;
width:100px;
-moz-transition:-moz-transform 0.5s ease-in;
-webkit-transition:-webkit-transform 0.5s ease-in;
-o-transition:-o-transform 0.5s ease-in;
}
.zoom_img img:hover{
-moz-transform:scale(2);
-webkit-transform:scale(2);
-o-transform:scale(2);
}
wo gebe ich diesen hier rein, es steht zwar html code, aber kommt das jetzt in den Haeder_metatags? Und ich muss doch da ggf. die Bild url reinsetzten oder?
Code: Alles auswählen
<div class="zoom_img" >
<img src="image.png" title="Magify image on mouse hover using CSS" />
</div>
gehe ich richtig in der Annahme, dass ich beim image.png die Adresse des Bildes eingeben muss. Müssen meine Bilder jetzt alle in png umbenannt werdenm, oder geht auch das gewöhnliche jpg?
Re: Vergrößern der Bilder
Verfasst: Sa 16. Jan 2016, 20:19
von Butterblume
Re: Vergrößern der Bilder
Verfasst: Sa 16. Jan 2016, 20:29
von moni
n
Schätzelein Karin
.. super freut mich das dir geholfen ist
sollten die Servietten doch etwa größer ausfallen da schau dir mein Code ein
habe den schon etwas perperiert ...
http://demo.homepagehelfer.net/001/001a/seite2.php
Vielen Dank für alle was hier fleißig mitgemacht haben
Re: Vergrößern der Bilder
Verfasst: Sa 16. Jan 2016, 22:07
von sansiro
Hurraaaaaaaaaaaaaa es ist vollbracht!
@moni
Prima script!
Re: Vergrößern der Bilder
Verfasst: Sa 16. Jan 2016, 22:21
von sansiro
<div class="zoom_img" >
<img src="image.png" title="
Magify image on mouse hover using CSS" />
</div>
Diesen Teil des Codes kannst Du gegen die Serviettenbezeichnung z.B. Sonnenblume, Krokus etc. austauschen!
Mache noch schnell mal die erste Seite fertig...
