Bilder vergrößern mit jQuery

Florians Forum � Webmaster � Ideen f�r Skripte und sonstige Quellcodes � Bilder vergrößern mit jQuery

Themen-Einstellungen

Thema drucken

Bereich wechseln

#1 | Bilder vergrößern mit jQuery datum

05.06.2015 17:25 (zuletzt bearbeitet: 05.06.2015 18:05)

Wolfgang

Informationen anzeigen

Beitr�ge:	278
Punkte:	1169
Registriert seit:	17.01.2008

Hallo Florian,
ich wollte eine einfache Bild-Vergrößerung zaubern, die folgende Funktion aufweist.

1. Ein Klick auf das Bild vergrößert es stufenweise.
2. Beim Mouseover erscheint ein kleiner Button im Bild
3. Ein Klick auf diesen Button bringt das Bild in den Originalzustand
4. Bei einer Vergrößerung soll das Bild sich über den Beitrag legen und sich nicht zwischen den Zeilen drücken
5. Das Script sollte für mehrere Bilder funktionieren

Ich habe da etwas ausprobiert und es funktioniert auch, bis auf Punkt 4. + 5.

Lässt sich Punkt 4. + 5. ohne großen Aufwand realisieren

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Bilder vergrößern mit einem Klick</title>
</head>
 
<body>
<!--<script type="text/javascript" src="http://img.homepagemodules.de/ds/static/jquery/min/jquery-1.7.1.min.js"></script>-->
<style>
.clickView {background-color:#eeeeee; border:1px solid #000000; border-radius:5px; cursor:pointer; width:100px;}
.startgroesse {position:absolute; border-radius:50px; margin:-9px; cursor:pointer; outline:none; visibility:hidden;}
.startgroesse:hover {background:#999999; visibility:visible !important;}
</style>
 
<script>
$(document).ready(function(){
 
$( ".clickView" ).click(function() {
$( ".clickView" ).animate({ "width": "+=200px"}, 500 );
})
 
.mouseover(function() {
$('.startgroesse').attr('style','visibility:visible')
.click(function(){
$(".clickView").removeAttr("style");
});
})
.mouseout(function(){
$('.startgroesse').attr('style','visibility:hidden;');
}); 
 
});
</script>
 
<br><br>
TEST
<button class="startgroesse">«</button>
<img class="clickView" src="http://www.bilder-hochladen.net/files/big/kr03-3g-4c56.jpg">
 

<!--<button class="startgroesse">«</button>
<img class="clickView" src="http://www.bilder-hochladen.net/files/big/kr03-3g-4c56.jpg">
Test<br><br>-->
 
</body>
</html>
 

im Voraus

Bis dann
Wolfgang

Forum: Der Treffpunkt für Hilfe, Tricks & Tipps

Antworten

#2 | RE: Bilder vergrößern mit jQuery datum

06.06.2015 20:12

florian-zier

Administrator

Informationen anzeigen

Beitr�ge:	837
Punkte:	1895
Registriert seit:	19.04.2007
Wohnort:	Oberkirch

Hallo Wolfgang,

probiere es mal damit:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
 
<!DOCTYPE html>
<html>
<head>
	<title>Bilder vergrößern mit einem Klick</title>
	<meta charset="utf-8" />
 
	<style>
		.clickview {
			display:  inline-block;
			position: relative;
			cursor:   pointer;
		}
 
		.clickview img {
			position:        absolute; /* aus Textfluss lösen */
			width:              100px;
			border-radius:        4px;
			border: 1px solid #000000;
			background-color: #eeeeee;
		}
		.clickview button {
			position:      absolute;
			left:          -9px;
			top:           -9px;
			border-radius: 50%;
			cursor:        pointer;
			visibility:    hidden;
			outline:       none;
		}
 
		/* aktuell vergrößerndes Bild in Vordergrund */
		.clickview:hover {
			z-index: 1000;
		}
		/* Button zum Zurücksetzen bei Hover anzegien */
		.clickview:hover button {
			background: #999999;
			visibility: visible !important;
		}
	</style>
 
	<script type="text/javascript" src="http://img.homepagemodules.de/ds/static/jquery/min/jquery-1.7.1.min.js"></script>
	<script>
		$(window).load(function(){
			'use strict';
 
			$('.clickview').each(function(e){
				var image = $(this).find('img');
				// Container auf Bildgröße setzen als Platzhalter
				// für Beibehaltung des Textfluss:
				$(this).css({
					width:  image.width(),
					height: image.height()
				});
				// Bild bei Klick vergrößern:
				image.click(function(e){
					$(this).stop().animate({
						width: '+=200px'
					}, 500);
				});
				// Button setzt Größe des vorangehenden Bildes zurück:
				$(this).find('button').click(function(e){
					$(this).prev().removeAttr('style');
				});
 
			});
		});
	</script>
</head>
<body>
 
	<br />
	<br />
	Test
 
	<div class="clickview">
		<img src="http://www.bilder-hochladen.net/files/big/kr03-3g-4c56.jpg" />
		<button>«</button>
	</div>
 
	Test
 
	<div class="clickview">
		<img src="http://www.bilder-hochladen.net/files/big/kr03-3g-4c56.jpg" />
		<button>«</button>
	</div>
 
	Test
	<br />
	<br />
	Test
 
</body>
</html>
 

Das sollte alle Punkte, auch den vierten und f�nften erf�llen. Das Kern-Problem ist es, das Bild aus dem Textfluss zu l�sen und dennoch den Platz aus der verkleinerten Version durchgehend zu belegen, damit der restliche Text nicht hinter den Bildern zusammenrutscht.

_________________
Florian Zier
Administrator
http://www.florian-zier.de

Antworten

#3 | RE: Bilder vergrößern mit jQuery datum

06.06.2015 20:57

Wow!!!! Wie machst Du das bloß?
Gibst Du auch Unterricht in JavaScript und jQuery???

So schnell hätte ich eine Lösung nicht erwartet.
Muss ich mir erstmal in Ruhe anschauen!!!

Bis dann und nochmal besten Dank
Wolfgang

Forum: Der Treffpunkt für Hilfe, Tricks & Tipps

Antworten

#4 | RE: Bilder vergrößern mit jQuery datum

06.06.2015 21:44 (zuletzt bearbeitet: 06.06.2015 21:55)

Habe das Script ausprobiert.
Schön, dass es so klein ist.
Eigentlich ist das Script schon fast perfekt und einsatzbereit.

Frage:
• Was passiert, wenn das Script nicht im "use strict-Modus" geladen wird? Im IE habe ich nichts festgestellt.
• Vergrößert man das linke Bild, scheint das rechte Bild durch. Schade!!!
• Vergrößert man das rechte Bild, bleibt es in Grundstellung immer im Vordergrund. Beim Mouseover auf Links kommt das Linke Bild in den Vordergrund.

• Lässt sich das Script so einrichten, dass immer das zuletzt vergrößerte Bild im Vordergrund steht? Mit statischem "z-index" geht es nicht. Mmh. .......

Grundstellung:

Linke Bild wird vergrößert:

Rechte Bild wird vergrößert:

Für die Turbo-Antwort:

PS:
Hatte ich schon im Support kundgetan (Im Script wird das Zeichen « nicht als Unicode « angezeigt).
Unicodes/HTML-Entity lassen sich nicht über [code]+[/code] darstellen

So wäre es richtig: <button>«</button>

Forum: Der Treffpunkt für Hilfe, Tricks & Tipps

Antworten

#5 | RE: Bilder vergrößern mit jQuery datum

07.06.2015 16:40

florian-zier

Administrator

Informationen anzeigen

Beitr�ge:	837
Punkte:	1895
Registriert seit:	19.04.2007
Wohnort:	Oberkirch

Zitat von Wolfgang im Beitrag #4
• Was passiert, wenn das Script nicht im "use strict-Modus" geladen wird? Im IE habe ich nichts festgestellt.

Der Strict-Modus sorgt eigentlich nur daf�r, dass der Code einen weitestgehend sauberen Aufbau einh�lt und fr�her stillschweigend akzeptierte Programmierfehler dann auch wirklich als Error ausgegeben werden. Ein Beispiel w�ren Variablen, welche nun explizit vorher angelegt werden m�ssen und nicht (bei bspw. einem Tippfehler) dann automatisch als globale Variable erstellt werden.

Die Syntax 'use strict'; ist so gew�hlt, dass die Browser, welche diesen Modus nicht kennen, diese Zeile einfach ignorieren, sie f�hren das Skript mit sauberem Aufbau jedoch genauso aus wie alle anderen. Wenn ich gerade dran denke und das Skript neu oder nicht so umfangreich ist verwende ich diesen Modus, um ein saubereres Skript zu erhalten.

Zitat von Wolfgang im Beitrag #4
• Vergr��ert man das linke Bild, scheint das rechte Bild durch. Schade!!!
• Vergr��ert man das rechte Bild, bleibt es in Grundstellung immer im Vordergrund. Beim Mouseover auf Links kommt das Linke Bild in den Vordergrund.

Ich wollte den Zugriff nach Vergr��erung eines Bildes nicht auf andere Bilder pauschal verhindern, daher habe ich die Notl�sung mit dem ver�nderten Z-Index beim Hovern verwendet, siehe Zeilen 31-34.

Zitat von Wolfgang im Beitrag #4
• L�sst sich das Script so einrichten, dass immer das zuletzt vergr��erte Bild im Vordergrund steht? Mit statischem "z-index" geht es nicht. Mmh. .......

Du k�nntest evtl. eine neue Klasse einf�hren, welche dem Bild beim Vergr��ern vergeben wird und dem einen gew�nschten Z-Index setzt.

Zuvor also innerhalb image.click erst bei allen anderen Bildern die Klasse ggf. entfernen lassen:

1
 
$('.clickview img').removeClass('active');

Dann ebenfalls dort dem gerade geklickten Element die Klasse explizit zuweisen:

1
 
$(this).addClass('active');

Und schlie�lich (statt dem Z-Index beim Hovern) einen CSS-Selektor schreiben, welcher nur Bildern bei gesetzter Klasse active einen neuen Z-Index vergibt:

1
2
3
 
.clickview img.active{
	z-index: 1000;
}
 

Zitat von Wolfgang im Beitrag #4
PS:
Hatte ich schon im Support kundgetan (Im Script wird das Zeichen � nicht als Unicode « angezeigt).
Unicodes/HTML-Entity lassen sich nicht �ber [code]+[/code] darstellen

Die sch�nen Codierungen und Ersetzungen.

Auf jeden Fall gut zu wissen, dass f�r die HTML-Entities in den Code-Feldern eine Ersetzung vorgenommen wird.

Es werden auch schon seit Ewigkeiten alle Seiten von Foren mit der Codierung iso-8859-1 bzw. windows-1252 ausgeliefert. Macht z.B. auch bei Ajax-Anfragen mit Formular-Feldern Probleme, welche generell nur als UTF-8 verschickt werden k�nnen, dann aber in der falschen Codierung vom Server ausgewertet werden. Wobei damit wahrscheinlich die wenigsten in Ber�hrung kommen.

_________________
Florian Zier
Administrator
http://www.florian-zier.de

Antworten

#6 | RE: Bilder vergrößern mit jQuery datum

07.06.2015 21:27

Hallo Florian,
erstmal besten Dank für die viele Ideen, Infos und der schnellen Antwort.
Schön das es eine Lösung gibt, die nicht so groß ausfällt. Das Script bleibt dann immer noch recht klein. Super!
Werde ich alles in Ruhe ausprobieren.

PS: Vielleicht kannst Du im Support auch nochmal etwas zu den "HTML-Entities" sagen.
Je mehr sich melden, desto mehr wird bewegt, denke ich!

Bis dann
Wolfgang

Forum: Der Treffpunkt für Hilfe, Tricks & Tipps

Antworten

#7 | RE: Bilder vergrößern mit jQuery datum

08.06.2015 22:20 (zuletzt bearbeitet: 08.06.2015 22:25)

Wolfgang

Informationen anzeigen

Beitr�ge:	278
Punkte:	1169
Registriert seit:	17.01.2008

Hallo Florian,
es ist jetzt so, wie ich mir es vorgestellt habe. Super!

Musste ein wenig anpassen. Hat sich erst im Test gezeigt.
1. ".clickview:hover {}" musste bestehen bleiben, damit beim "Mouseover" das Bild in den Vordergrund kommt.
2. ".clickview:hover button {}" musste ein z-index bekommen, damit der "Buttom" ebenfalls im Vordergrund bleibt.
Oder werden die beiden Zeilen (71-72) woanders eingebaut?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
 

<!DOCTYPE HTML>
<html>
<head>
	<title>Bilder vergrößern mit einem Klick</title>
	
 
	<style>
		.clickview {
			display:  inline-block;
			position: relative;
			cursor:   pointer;		
		}
 
		.clickview img {
			position:        absolute; /* aus Textfluss lösen */
			width:              100px;
			border-radius:        4px;
			border: 1px solid #000000;
			background-color: #eeeeee;
 
		}
		.clickview button {
			position:      absolute;
			left:          -9px;
			top:           -9px;
			border-radius: 50%;
			cursor:        pointer;
			visibility:    hidden;
			outline:       none;
		}
 
		/* Aktuelles Bild in den Vordergrund */
		.clickview:hover {
			z-index: 2000;
		}
		
		.clickview img.active{
			z-index: 1000;
		}
		
		/* Button zum Zurücksetzen bei Hover anzegien */
		.clickview:hover button {
			z-index: 2100;
			background: #999999;
			visibility: visible !important;
		}
	</style>
 
	<script type="text/javascript" src="http://img.homepagemodules.de/ds/static/jquery/min/jquery-1.7.1.min.js"></script>
	<script>
		$(window).load(function(){
			'use strict';
 
 
			$('.clickview').each(function(e){
				var image = $(this).find('img');
				// Container auf Bildgröße setzen als Platzhalter
				// für Beibehaltung des Textfluss:
				$(this).css({
					width:  image.width(),
					height: image.height()
							
				});
				// Bild bei Klick vergrößern:
				image.click(function(e){
					$(this).stop().animate({
						width: '+=200px'
					}, 500);
				// Aktuelles Bild wird aktiv geschaltet:
					$('.clickview img').removeClass('active');
					$(this).addClass('active');
				});
				// Button setzt Größe des vorangehenden Bildes zurück:
				$(this).find('button').click(function(e){
					$(this).prev().removeAttr('style');
				});
 
			});
		});
	</script>
</head>
<body>
 
	<br />
	<br />
 
	<div class="clickview">
		<img src="http://www.bilder-hochladen.net/files/big/kr03-3g-4c56.jpg" />
		<button>&laquo;</button>
	</div>
 	<div class="clickview">
		<img src="http://www.bilder-hochladen.net/files/big/kr03-3g-4c56.jpg" />
		<button>&laquo;</button>
	</div>
 
	<div class="clickview">
		<img src="http://www.bilder-hochladen.net/files/big/kr03-3g-4c56.jpg" />
		<button>&laquo;</button>
	</div>
		<div class="clickview">
		<img src="http://www.bilder-hochladen.net/files/big/kr03-3g-4c56.jpg" />
		<button>&laquo;</button>
	</div>
		</div>
		<div class="clickview">
		<img src="http://www.bilder-hochladen.net/files/big/kr03-3g-4c56.jpg" />
		<button>&laquo;</button>
	</div>
 
	Test
	<br />
	<br />
	Test
</body>
</html>
 
 

Habe zum Testen 5 Bilder nebeneinander gestellt.
• Das aktive Bild bleibt jetzt immer im Vordergrund

• Interessanter Weise werden die Bilder immer von rechts nach links überlappend dargestellt

So ist das Script schon echt super geworden!
Besten Dank!

Wolfgang

Forum: Der Treffpunkt für Hilfe, Tricks & Tipps

Antworten

#8 | RE: Bilder vergrößern mit jQuery datum

09.06.2015 21:41

Zitat von Wolfgang im Beitrag #7
Oder werden die beiden Zeilen (71-72) woanders eingebaut?

Ob vorne oder hinten in der Funkltion ist eigentlich egal, hauptsache es wird �berhaupt ausgef�hrt.

Zitat von Wolfgang im Beitrag #7
• Interessanter Weise werden die Bilder immer von rechts nach links �berlappend dargestellt

Auch bei zwei absolut positionierten Containern legt sich der letztere im Quellcode in der Regel vor die anderen. Es sei denn, der Z-Index wird explizit so vergeben, dass die vorher geladenen Elemente als weiter vorne deklariert werden.

_________________
Florian Zier
Administrator
http://www.florian-zier.de

Antworten

#9 | RE: Bilder vergrößern mit jQuery - Einbau ins Forum datum

30.06.2015 13:05 (zuletzt bearbeitet: 30.06.2015 13:19)

Wolfgang

Informationen anzeigen

Beitr�ge:	278
Punkte:	1169
Registriert seit:	17.01.2008

Hallo Florian,
hatte das Script im Forum eingebaut und mir ist folgendes aufgefallen.
• Das Script hat nur funktioniert, wenn die DIV-Container hinter dem Script lagen
• Beim Umbau ist die Stop-Funktion unangenehm aufgefallen. Die Klicks wurden gezählt und das Bild um die entsprechende Anzahl vergrößert

Habe das Script etwas verändert.
Kannst Du mal ein prüfendes Auge drauf werfen?

• $(window).load durch $(document).ready(function(){
• stop() entfernt, each-Funktion früher geschlossen
• Im Forum war noch folgendes notwendig: .clickview {vertical-align:bottom;} und .clickview img {left:0px;}
• Habe die Vergrößerung in % eingetragen
• Bilder werden animiert geschlossen (0,3 Sek)
• Mit Hilfe von z.B. <img style="width:200px" .... können verschieden Ausgangsgrößen eingestellt werden und dann im gleichen Verhältnis vergrößert werden!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
 

<!DOCTYPE HTML>
<html>
<head>
	<title>Bilder vergrößern mit einem Klick</title>
	
 
	<style>
		.clickview {
			display:  inline-block;
			position: relative;
			cursor:   pointer;	
			vertical-align:bottom;
		}
 
		.clickview img {
			position:        absolute; /* aus Textfluss lösen */
			width:              100%;
			border-radius:        4px;
			border: 1px solid #000000;
			background-color: #eeeeee;
			left:0px;
 
		}
		.clickview button {
			position:      absolute;
			left:          -9px;
			top:           -9px;
			border-radius: 50%;
			cursor:        pointer;
			visibility:    hidden;
			outline:       none;
		}
 
		/* aktuell vergrößerndes Bild in Vordergrund */
		.clickview:hover {
			z-index: 2000;
		}
		
		.clickview img.active{
			z-index: 1000;
		}
		
		/* Button zum Zurücksetzen bei Hover anzegien */
		.clickview:hover button {
			z-index: 2100;
			background: #999999;
			visibility: visible !important;
		}
 
	</style>
 
	<script type="text/javascript" src="http://img.homepagemodules.de/ds/static/jquery/min/jquery-1.7.1.min.js"></script>
	<script>
$(document).ready(function(){
			
			$('.clickview').each(function(e){
				var image = $(this).find('img');
				// Container auf Bildgröße setzen als Platzhalter
				// für Beibehaltung des Textfluss:
				$(this).css({
					width:  image.width(),
					height: image.height()		
				});
			});
 
				// Bild bei Klick vergrößern:
				$('.clickview img').click(function(e){
					$(this).animate({
						width: '+=150%'
					}, 500);
				// Aktuelles Bild wird aktiv geschaltet:
					$('.clickview img').removeClass('active');
					$(this).addClass('active');
				});
 
				// Button setzt Größe des vorangehenden Bildes zurück:
				$(this).find('button').click(function(e){
				      //$(this).prev().removeAttr('style');
				        $(this).prev().animate({
						width: '100%'
					}, 300);
			       });
});
	</script>
</head>
<body>
 
	<br />
	<br />
	Test
 
	<div class="clickview">
		<img style="width:200px" src="http://www.bilder-hochladen.net/files/big/kr03-3g-4c56.jpg" />
		<button>«</button>
	</div>Test
 	<div class="clickview">
		<img style="width:100px" src="http://www.bilder-hochladen.net/files/big/kr03-3g-4c56.jpg" />
		<button>«</button>
	</div>Test
 
	<div class="clickview">
		<img style="width:300px" src="http://www.bilder-hochladen.net/files/big/kr03-3g-4c56.jpg" />
		<button>«</button>
	</div>Test
		<div class="clickview">
		<img style="width:400px" src="http://www.bilder-hochladen.net/files/big/kr03-3g-4c56.jpg" />
		<button>«</button>
	</div>Test
		</div>
		<div class="clickview">
		<img style="width:100px" src="http://www.bilder-hochladen.net/files/big/kr03-3g-4c56.jpg" />
		<button>«</button>
	</div>Test
 
	<br />
	<br />
 
</body>
</html>
 

 

Forum: Der Treffpunkt für Hilfe, Tricks & Tipps

Antworten

#10 | RE: Bilder vergrößern mit jQuery - Einbau ins Forum datum

30.06.2015 23:48

florian-zier

Administrator

Informationen anzeigen

Beitr�ge:	837
Punkte:	1895
Registriert seit:	19.04.2007
Wohnort:	Oberkirch

Hallo Wolfgang!

Die Einbauposition des Skripts sollte eigentlich egal sein, weil es immer erst ausgef�hrt wird, wenn alles fertig geladen wurde. Ich kann es auch problemlos hinter die DIV-Container schieben. M�glicherweise hattest du einen Verschachtelungsfehler oder Probleme mit einem anderen Skript.
Die stop()-Funktion soll eigentlich die h�ufige Vergr��erung nach vielen Klicks verhindern. Sie bricht die anderen Effekte in der Warteschlange ab, wodurch nur noch der nachfolgende Effekt ausgef�hrt wird.
Ich w�rde weiterhin $(window).load verwenden. Das Problem bei $(document).ready k�nnte sein, dass zwar das img-Tag an sich eingelesen, das eigentliche Bild selbst jedoch noch nicht vollst�ndig geladen wurde. In solch einem Fall kann es glaube ich passieren, dass image.width()/.height() eine falsche Gr��e auslesen, worauf dann der umliegende Container eine falsche Platzhalter-Gr��e einnehmen k�nnte und der Textfluss nicht mehr wie gew�nscht stimmt.
Die CSS-Eigenschaften left und vertical-align brauchst du wohl wegen einer speziellen Standard-Belegung im Foren-Design. Bei sowas muss man dann einfach explizit seinen eigenen Style aufdr�cken.
Im fr�heren Schlie�en des .each() sehe ich aktuell keinen Vorteil. Vermutlich ist der erneute Aufruf von $('.clickview img') sogar langsamer, da die HTML-Elemente nochmals aus dem DOM herausgesucht werden m�ssen (jsperf.com zum Testen ist aktuell leider offline). Da in der Schleife sowieso auf jedes einzelne Bild zugegriffen werden muss (Setzen der Platzhaltergr��e des zugeh�rigen Containers), habe ich danach auch direkt noch das Klick-Event mitangeh�ngt.
Da die Buttons vorher nicht zwingend im .each() herausgesucht werden, k�nnte da das Herausnehmen aus der Schleife schon eher was bringen. Wobei ich finde, dass es darin schon ganz gut eingeordnet werden kann.
Falls du es dennoch au�erhalb stehen haben m�chtest, dann w�re es wohl besser, noch $('.clickview button') statt $(this) zu verwenden, da es au�erhalb eine andere G�ltigkeit bekommt.
Statt dem Style-Attribut f�r Breite und H�he w�rde ich bei Bildern ausnahmsweise die richtigen Attribute width und height verwenden, da diese den Browser schon beim Laden des img-Tags darauf hinweisen, wieviel Platz sp�ter mal eingenommen wird und dadurch st�ndiges Neuzeichnen der Oberfl�che reduziert wird. Eine Breite im CSS-Selektor .clickview img wird dadurch dann auch �berfl�ssig.
Ich habe auch die Z-Indizes n�her zusammengelegt, sehe keine Notwendigkeit diese sehr weit auseinanderzulegen, vor allem weil das alles auch irgendwie zusammengeh�rt. Bei mehreren Plugins artet dass dann sonst auch meist in immens hohe Werte aus, die mir nicht wirklich sinnvoll erscheinen. Viel bringt nicht immer viel.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
 
<!DOCTYPE html>
<html>
<head>
	<title>Bilder vergrößern mit einem Klick</title>
	<meta charset="utf-8" />
 
	<style>
		.clickview {
			display:        inline-block;
			position:       relative;
			cursor:         pointer;
			vertical-align: bottom;
		}
 
		.clickview img {
			position:        absolute; /* aus Textfluss lösen */
			left:                 0px;
			/* width:              100px; */ /* überschreibt HTML-Attribute width/height */
			border-radius:        4px;
			border: 1px solid #000000;
			background-color: #eeeeee;
		}
		.clickview button {
			position:      absolute;
			left:          -9px;
			top:           -9px;
			border-radius: 50%;
			cursor:        pointer;
			visibility:    hidden;
			outline:       none;
		}
 
		/* aktuell vergrößerndes Bild in Vordergrund */
		.clickview:hover {
			z-index: 2001;
		}
		.clickview img.active {
			z-index: 2000;
		}
		/* Button zum Zurücksetzen bei Hover anzegien */
		.clickview:hover button {
			z-index:    2002;
			background: #999999;
			visibility: visible !important;
		}
	</style>
 
	<script type="text/javascript" src="http://img.homepagemodules.de/ds/static/jquery/min/jquery-1.7.1.min.js"></script>
	<script>
		// Bei ready evtl. nicht alle Bilder vollständig geladen,
		// wodurch image.width()/.height() falsche Werte zurückgeben.
		$(window).load(function(){
			'use strict';
 
			$('.clickview').each(function(e){
				var image = $(this).find('img');
				// Container auf Bildgröße setzen als Platzhalter
				// für Beibehaltung des Textfluss:
				$(this).css({
					width:  image.width(),
					height: image.height()
				});
 
				// Bild bei Klick vergrößern:
				image.click(function(e){
					$(this).stop().animate({
						width: '+=150%'
					}, 500);
					// Aktuelles Bild wird aktiv geschaltet:
					$('.clickview img').removeClass('active'); // zuerst bei allen entfernen
					$(this).addClass('active');
				});
 
				// Button setzt Größe des vorangehenden Bildes zurück:
				$(this).find('button').click(function(e){
					//$(this).prev().removeAttr('style');
					$(this).prev().animate({
						width: '100%'
					}, 300);
				});
 
			});
		});
	</script>
</head>
<body>
 
	<br />
	<br />
	Test
 
	<div class="clickview">
		<img src="http://www.bilder-hochladen.net/files/big/kr03-3g-4c56.jpg" width="100" />
		<button>«</button>
	</div>
 
	Test
 
	<div class="clickview">
		<img src="http://www.bilder-hochladen.net/files/big/kr03-3g-4c56.jpg" width="300" />
		<button>«</button>
	</div>
 
	Test
	<br />
	<br />
	Test
 
</body>
</html>
 

_________________
Florian Zier
Administrator
http://www.florian-zier.de

Antworten

Start/Stop für Laufschriften � � News Ticker

�hnliche Themen

Antworten

Letzter Beitrag

Bild vergrößern mit einem Klick
Erstellt im Forum Ideen f�r Skripte und sonstige Quellcodes von Wolfgang 4 06.01.2015 18:08
florian-zier • Zugriffe: 572
Bilder verkleinern und Verlinken auf Vollbild
Erstellt im Forum Funktionen & Template von toggodamian 1 12.03.2014 20:35
florian-zier • Zugriffe: 521
Scrollen mit jQuery
Erstellt im Forum Funktionen & Template von Wolfgang 5 10.07.2013 00:15
Wolfgang • Zugriffe: 649
Super Zoom für Bilder - Mit Klick
Erstellt im Forum Ideen f�r Skripte und sonstige Quellcodes von Wolfgang 6 01.04.2013 17:59
Wolfgang • Zugriffe: 1730
spoiler, bilder, aufzählungszeichen
Erstellt im Forum Ideen f�r Skripte und sonstige Quellcodes von Movert 6 22.04.2012 20:00
florian-zier • Zugriffe: 841
Verzögertes Laden der Startseite durch schlechten Bilder-Server
Erstellt im Forum Funktionen & Template von Wolfgang 1 24.05.2009 19:39
florian-zier • Zugriffe: 536
Bilder Upload
Erstellt im Forum Sonstiges von Emanuel 2 09.12.2008 00:05
Emanuel • Zugriffe: 645
Cookies für bewegbares Bild
Erstellt im Forum Ideen f�r Skripte und sonstige Quellcodes von Luna42 2 09.11.2008 18:00
Luna42 • Zugriffe: 570

Bitte geben Sie einen Grund f�r die Verwarnung an