Vergrößern der Bilder

Beitrag von **Jasko** » Sa 16. Jan 2016, 19:10

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
Bild

also

<img id="image1" src="http://www.servietten-flohmarkt.de/images/einzelstueck/blumen/1.jpg" >

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()

Beitrag von **Jasko** » Sa 16. Jan 2016, 19:33

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.

<!Doctype html>
<html>
<head>
<title>Zoom Test</title>
<link rel="stylesheet" href="bildzoom/multizoom.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jq ... "></script>
<script type="text/javascript" src="bildzoom/multizoom.js">
// Featured Image Zoomer (w/ optional multizoom and adjustable power)- By Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
// Multi-Zoom code (c)2012 John Davenport Scheuer
// as first seen in http://www.dynamicdrive.com/forums/
// username: jscheuer1 - This Notice Must Remain for Legal Use
// Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
</script>
<script type="text/javascript">
jQuery(document).ready(function($){

$('#zoom1').addimagezoom()
$('#zoom2').addimagezoom()
$('#zoom3').addimagezoom()
$('#zoom4').addimagezoom()

})
</script>
</head>
<body>
<h3>Demo 2:</h3>
<img id="zoom1" border="0" src="http://www.servietten-flohmarkt.de/imag ... umen/1.jpg" style="width:114px;height:110px"><br>
<img id="zoom2" border="0" src="http://www.servietten-flohmarkt.de/imag ... umen/2.jpg" style="width:114px;height:110px"><br>
<img id="zoom3" border="0" src="http://www.servietten-flohmarkt.de/imag ... umen/3.jpg" style="width:114px;height:110px"><br>
<img id="zoom4" border="0" src="http://www.servietten-flohmarkt.de/imag ... umen/4.jpg" style="width:114px;height:110px"><br>
</body>
</html>

Beitrag von **moni** » Sa 16. Jan 2016, 19:37

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

Beitrag von **Jasko** » Sa 16. Jan 2016, 19:42

Ich finde den COde super und ist viel weniger arbeit, als dieser hier

Beitrag von **moni** » Sa 16. Jan 2016, 19:52

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/

Beitrag von **Butterblume** » Sa 16. Jan 2016, 20:03

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?

Beitrag von **Butterblume** » Sa 16. Jan 2016, 20:19

Schätzelein ich habs Bild

Mache noch schnell mal die erste Seite fertig...

Blumen

nach gefühlten 100000000000000000 Versuchen kann dieser Beitrag jetzt wohl geschlossen werden!

Beitrag von **moni** » Sa 16. Jan 2016, 20:29

Butterblume hat geschrieben:Schätzelein ich habs Mache noch schnell mal die erste Seite fertig...

Blumen

nach gefühlten 100000000000000000 Versuchen kann dieser Beitrag jetzt wohl geschlossen werden!

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

Beitrag von **sansiro** » Sa 16. Jan 2016, 22:07

Hurraaaaaaaaaaaaaa es ist vollbracht!
@moni
Prima script!

Beitrag von **sansiro** » Sa 16. Jan 2016, 22:21

<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!

HomepageHelfer.org

Vergrößern der Bilder

Re: Vergrößern der Bilder

Re: Vergrößern der Bilder

Re: Vergrößern der Bilder

Re: Vergrößern der Bilder

Re: Vergrößern der Bilder

Re: Vergrößern der Bilder

Re: Vergrößern der Bilder

Re: Vergrößern der Bilder

Re: Vergrößern der Bilder

Re: Vergrößern der Bilder

Wer ist online?