Florians Forum » Webmaster » Ideen für Skripte und sonstige Quellcodes » Bild vergrößern mit einem Klick
Hallo Florian,
das Bild soll mit einem Klick vergrößert werden.
Hier habe ich ein Script mit jQuery, will aber nicht funktionieren.
Wo ist da der Fehler? Groß-Kleinschreibung?
Klammern, Häkchen oder Doppel-Häkchen?
Kannst Du mir da helfen?
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style type="text/css">
.clickimage{width:200px;border:0;cursor:pointer;}
</style>
<script type="text/javascript">
$('#bilderzoom').click(function() {
if($(this).hasClass('clickimage')) {
$(this).animate({'width: 200px'}, 'slow');
$(this).removeClass('clickimage');
} else {
$(this).animate({'width: 800px'}, 'slow');
$(this).addClass('clickimage');
}
});
</script>
<img id="bilderzoom" class="clickimage" src="http://www.bilder-hochladen.net/files/big/kr03-3f-da4f.jpeg">
Wolfgang
Hallo Florian,
Mario 4370 hat eine Lösung gefunden. Habe ich ein wenig umgestellt. Zudem ist das Script super kurz!
Es lassen sich jetzt alle Bilder mit class="bilderzoom" vergrößern!
Interessant währe es allerdings trotzdem, wo der Fehler im anderen Script liegt!
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style>
.bilderzoom{width:200px;border:0;cursor:pointer;}
</style>
1. Bild <img class="bilderzoom" src="http://www.bilder-hochladen.net/files/big/kr03-3f-da4f.jpeg">
2. Bild <img class="bilderzoom" src="http://www.bilder-hochladen.net/files/big/kr03-3f-da4f.jpeg">
<script>
$(function(){
$('.bilderzoom').toggle(
function() { $(this).animate({width: "800px"}, 'slow')},
function() { $(this).animate({width: "200px"}, 'slow')}
);
});
</script>
Gruß
Wolfgang
Hallo Wolfgang, dann brauche ich die Testseite ja doch noch nicht wegwerfen. 
Die Fehler-Konsole im Browser meldete "SyntaxError: missing : after property id". Das kommt daher, dass du vorher Eigenschaft:Wert nicht jeweils in eigene, sondern gemeinsame Hochkommatas gesetzt hattest.
So wäre es richtig:
{'width': '200px'}
Zudem wird das Skript direkt bereits beim Einlesen der Seite interpretiert, bevor die Elemente mit ID #bilderzoom geladen wurden. Daher fehlte da noch eine Verzögerung, welche die Events erst zuweist, wenn alle HTML-Tags geladen wurden.
2
3
$(document).ready(function(){
[…]
});
Und wie ich sehe, hast du in deinem letzten Skript bereits die ID zu einer Klasse geändert. Ist bei mehreren zu beeinflussenden Elementen sinnvoll, da IDs nur einmal auf der Seite vorkommen dürfen.
Erstmal besten Dank!
Zum ersten Script:
Hat das größere Script einen Vorteil?
Mit ist aufgefallen, dass das Script erst nach einem zweiten Klick (IE) aktiviert wird. 
Aber dann funktioniert es ganz normal.
Bis dann
Wolfgang
Sehe keinen Vorteil im größeren Skript. Damit wird die Bildgröße letztlich auch auf zwei feste Werte eingeschränkt.
Es wird erst durch einen zweiten Klick sichtbar verändert, da der CSS-Style das Bild anfangs auf 200px Breite setzt. Daher bemerkt man die erste Verkleinerung auf die exakt gleiche Größe nicht.