[FRAGE] Bildwechsel mit zoom kombinieren

- Anna - · 08. Dez. 2014

Hallo Liebes Forum,

leider habe ich nur sehr bescheidene Grundkenntnisse in javascript. Unter folgender Adresse habe ich bereits einen sehr schönen zoom gefunden:
jQuery Zoom
Ich möchte das Beispiel mit dem Dackel verwenden. Nun hätte ich gerne, dass bei klick auf einen Button oder kleines Vorschaubild sich das Dackelbild verändert. Also dass dann genau an der selben Position des Dackelbildes Bild2 oder Bild3 erscheint und ich das dann auch noch zoomen kann.

Getrennt voneinander kriege ich Bildwechsel und zoom hin, nur leider schaffe ich es nicht beides zu kombinieren.
Ich hoffe mir kann jemand helfen, vielen Dank!

VG

HTML:

<!DOCTYPE html>
<html>
<head>
	<meta charset='utf-8'/>
	<title>jQuery Zoom Demo</title>
	<style>
		/* styles unrelated to zoom */
		* { border:0; margin:0; padding:0; }
		p { position:absolute; top:3px; right:28px; color:#555; font:bold 13px/1 sans-serif;}

		/* these styles are for the demo, but are not required for the plugin */
		.zoom {
			display:inline-block;
			position: relative;
		}
		
		/* magnifying glass icon */
		.zoom:after {
			content:'';
			display:block; 
			width:33px; 
			height:33px; 
			position:absolute; 
			top:0;
			right:0;
			background:url(icon.png);
		}

		.zoom img {
			display: block;
		}

		.zoom img::selection { background-color: transparent; }

		#ex2 img:hover { cursor: url(grab.cur), default; }
		#ex2 img:active { cursor: url(grabbed.cur), default; }
	</style>
	<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
	<script src='jquery.zoom.js'></script>
	<script>
		$(document).ready(function(){
			$('#ex1').zoom();
			$('#ex2').zoom({ on:'grab' });
		});
	</script>
</head>
<body>
	<span class='zoom' id='ex1'>
		<img src='daisy.jpg' width='555' height='320' alt='Daisy on the Ohoopee'/>
		<p>Hover</p>
	</span>
	<span class='zoom' id='ex2'>
		<img src='roxy.jpg' width='290' height='320' alt='Roxy on the Ohoopee'/>
		<p>Grab</p>
	</span>
</body>
</html>

SteelWheel · 08. Dez. 2014

Hallo Anna, willkommen hier in diesem Teil des Internets.

Das ist eigentlich ganz einfach - hierzu schaust mal in Deinen Code, und zwar ...

$(document).ready(function(){ besagt diese Zeile, dass das, was zwischen den geschweiften Klammern steht, ausgeführt wird, wenn Deine Seite Bereitschaft meldet. Darin wird Dein gefundenes Zoom-Plugin initialisiert. Und zwar für die IDs ex1 und ex2.

Wenn Du nun ex1 oder ex2 tauschst (Bild wechseln), müsstest Du genau den gleichen Vorgang wiederholen. Hier gibt es zwei Möglichkeiten:

1. Das Plugin bietet von Haus aus eine "re-Init" Funktion an.
2. Nachdem Du das Bild getauscht hast, rufst Du selbst nochmal die exakt gleichen Zeilen auf (hier schreit es schon direkt nach einer Funktion).

Soviel zur Theorie ... alles klar?

Viel Erfolg.

- Anna - · 08. Dez. 2014

Hallo SteelWheel, vielen Dank erstmal für die Antwort!
Leider verstehe ich das nicht ganz...ich weiß nicht wie ich deine Lösung da einbauen sollte, bzw. ich verstehe nicht wie ich es schaffe, dass Bild1 bei klick auf Button2 zu Bild2 wird

Hier der Code wie ich ihn bis jetzt habe (bin noch nicht weit gekommen):

HTML:

<!DOCTYPE html>
<html>
<head>
	<meta charset='utf-8'/>
	<title>jQuery Zoom Demo</title>
	<style>
		/* styles unrelated to zoom */
		* { border:0; margin:0; padding:0; }
		p { position:absolute; top:3px; right:28px; color:#555; font:bold 13px/1 sans-serif;}

		/* these styles are for the demo, but are not required for the plugin */
		.zoom {
			display:inline-block;
			position: relative;
		}
		
		/* magnifying glass icon */
		.zoom:after {
			content:'';
			display:block; 
			width:33px; 
			height:33px; 
			position:absolute; 
			top:0;
			right:0;
			background:url(icon.png);
		}

		.zoom img {
			display: block;
		}

		.zoom img::selection { background-color: transparent; }
	</style>
	<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
	<script src='jquery.zoom.js'></script>
	<script>
		$(document).ready(function(){
			$('#ex1').zoom();
		});
	</script>
</head>
<body>
	<span class='zoom' id='ex1'>
		<img src='bild1.jpg' width='555' height='320' alt='Hat nicht funktioniert'/><!-- Bei klick auf Button 2 soll hier Bild 2 erscheinen  -->
		<p>Hover</p>
	</span>
	
	<img src='bild1.jpg' width='60' height='45' alt='Button1'/>  	<!-- Minibild soll als Button1 für Bild1 verwendet werden -->
	<img src='bild2.jpg' width='60' height='45' alt='Button2'/>		<!-- Minibild soll als Button2 für Bild2 verwendet wedren -->
	
</body>
</html>

Sempervivum · 08. Dez. 2014

Hallo Anna,
Du musst dem Zoombild eine ID geben, dann kannst Du es mit getElementById ansprechen und das src-Attribut austauschen. Anschließend musst Du den Zoom zunächst entfernen (beschrieben unter "Removing Zoom") und neu initialisieren. Das ganze in eine Funktion packen und bei den Button-Bildern ein onclick einrichten, der diese Funktion mit dem Dateinamen des Bildes aufruft.
Viel Erfolg und viele Grüße - Ulrich

- Anna - · 08. Dez. 2014

Hallo Ulrich,

auch dir vielen Dank für die Antwort!

Ich bin der Sache jetzt näher gekommen. Es funktioniert der Bildwechsel

, aber wenn ich dann mit dem Mauszeiger über das gerade angezeigte Bild fahre, welches gezoomt werden soll, wird immer nur Bild1 gezoomt.

Diesen Code habe ich jetzt:

HTML:

<br><br><!DOCTYPE html>
<html>
<head>
	<meta charset='utf-8'/>
	<title>jQuery Zoom Demo</title>
	<style>
		/* styles unrelated to zoom */
		* { border:0; margin:0; padding:0; }
		p { position:absolute; top:3px; right:28px; color:#555; font:bold 13px/1 sans-serif;}
		/* these styles are for the demo, but are not required for the plugin */
		.zoom {
			display:inline-block;
			position: relative;
		}
		/* magnifying glass icon */
		.zoom:after {
			content:'';
			display:block; 
			width:33px; 
			height:33px; 
			position:absolute; 
			top:0;
			right:0;
			background:url(icon.png);
		}
		.zoom img {
			display: block;
		}
		.zoom img::selection { background-color: transparent; }
	</style>
	<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
	<script src='jquery.zoom.js'></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$('#ex1').zoom();
		});	
		
		function bildwechsel(obj) {
		document.getElementById("bigimg").src = obj.href;
		}
	</script>
</head>
<body>
<br><br>
	<span class='zoom' id='ex1'>
		<img id="bigimg" src="bild_1.jpg" width='150' height='100' alt='Hat nicht funktioniert'/><!-- Bei klick auf den jeweiligen Button erscheint hier das dazugehörige Bild-->
		<p>Hover</p>
	</span>	
	
	<br><br>
	<a href="bild_1.jpg" onclick="bildwechsel(this);return false;"><img src='bild_1.jpg' width='60' height='45' alt='Button1'/></a><br/>
	<a href="bild_2.jpg" onclick="bildwechsel(this);return false;"><img src='bild_2.jpg' width='60' height='45' alt='Button2'/></a><br/>
	<a href="bild_3.jpg" onclick="bildwechsel(this);return false;"><img src='bild_3.jpg' width='60' height='45' alt='Button3'/></a><br/>
	<br><br>
	
</body>
</html>

Bitte nicht denken ich hätte nicht gelesen was ihr geschrieben habt, ich kann es nur leider wegen meiner sehr eingeschränkten Kenntnisse nicht richtig umsetzten..

Also vermutlich muss ich an dieser Stelle im code:

HTML:

<img id="bigimg" src="bild_1.jpg" width='150' height='100' alt='Hat nicht funktioniert'/>

irgendwie sagen, dass nicht immer bild_1.jpg sondern das zuletzt angeklickte Bild gezoomt werden soll..nur wie?

(Hab schon ewig gesucht ob/wie man eine Variable im img tag verwenden kann, aber nichts passendes gefunden)

Sempervivum · 08. Dez. 2014

Schrieb ich doch, Du musst den Zoom neu initialisieren:

Code:

		function bildwechsel(obj) {
		    document.getElementById("bigimg").src = obj.href;
                    $('#ex1').trigger('zoom.destroy'); 
                    $('#ex1').zoom();
		}

- Anna - · 08. Dez. 2014

Jetzt hab ich's verstanden!
Vielen vielen Dank nochmal!!!!
Es funktioniert

[FRAGE] Bildwechsel mit zoom kombinieren

- Anna -

New member

SteelWheel

New member

- Anna -

New member

Sempervivum

Banned

- Anna -

New member

Sempervivum

Banned

- Anna -

New member