Autor |
Nachricht |
Kash
Threadersteller
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Fr 04.09.2009 14:56
Titel [jQuery] - Werte addieren |
|
|
Hallo zusammen,
ich bastel mir grad ne kleine Bildergallery.
Es ist so das wenn ein Vorschaubild angeklickt wird, dieses im bekannten Lightboxverfahren geöffnet wird.
Unter dem vergrößerten Bild hat es dann 2 Links (vor/zurück) mittels denen man die restlichen Bilder durchschalten kann.
Jetzt ist es so das egal welches Vorschaubild man anklickt (#1 oder #5) und auf vor klickt, er den Wert falsch berechnet.
D.h. aus #1 + 1 wird #11 oder aus #5 + 1 wird #51.
Wenn man zuerst auf zurück klickt rechnet er die Werte richtig. Auch wenn man danach wieder auf vor klickt. Kann mir das gerade nicht erklären. Irgendeine kleinigkeit übersehe ich.
jQuery
Code: |
$(document).ready(function() {
$('img').mouseover(function(){
$(this).css('cursor','pointer');
});
$('.small').click(function(){
var $id = $(this).attr("id");
$('.lightBox').fadeIn('slow').css('display','block');
$('#' + $id + 'b').fadeIn('slow').css('display','block');
$('.zurueck').click(function(){
$image = $id + 'b';
$idPrev = $id - 1;
$imagePrev = $idPrev + 'b';
$('#' + $image).fadeOut('slow');
$('#' + $imagePrev).fadeIn('slow');
$id = $idPrev;
alert($imagePrev);
if($id <= 1){
$(this).css('display','none');
$('.z').css('display','none');
}
});
$('.vor').click(function(){
$image = $id + 'b';
$idNext = $id + 1;
$imageNext = $idNext + 'b';
$('#' + $image).fadeOut('slow');
$('#' + $imageNext).fadeIn('slow');
$id = $idNext;
alert($imageNext);
if($id >= 1){
$('.zurueck').css('display','inline-block');
$('.z').css('display','inline-block');
}
});
});
});
|
MarkUp
Code: |
<div>
<img class="small" src="images/thumb/test.jpg" id="1" alt="test.jpg" title="test.jpg">
<img class="small" src="images/thumb/test01.jpg" id="2" alt="test01.jpg" title="test01.jpg">
<img class="small" src="images/thumb/test02.jpg" id="3" alt="test02.jpg" title="test02.jpg">
<img class="small" src="images/thumb/test.jpg" id="4" alt="test.jpg" title="test.jpg">
<img class="small" src="images/thumb/test01.jpg" id="5" alt="test01.jpg" title="test01.jpg">
<img class="small" src="images/thumb/test02.jpg" id="6" alt="test02.jpg" title="test02.jpg">
<div class="lightBox">
<img src="images/test.jpg" id="1b" alt="test.jpg" title="test.jpg">
<img src="images/test01.jpg" id="2b" alt="test01.jpg" title="test01.jpg">
<img src="images/test02.jpg" id="3b" alt="test02.jpg" title="test02.jpg">
<img src="images/test.jpg" id="4b" alt="test.jpg" title="test.jpg">
<img src="images/test01.jpg" id="5b" alt="test01.jpg" title="test01.jpg">
<img src="images/test02.jpg" id="6b" alt="test02.jpg" title="test02.jpg">
<br />
<span class="z"><a class="zurueck" href="#"><</a></span><span class="v"><a class="vor" href="#">></a></span>
</div>
</div>
|
Falls ich mich nicht so klar ausgedrückt habe, bitte nochmal nachfragen.
|
|
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 04.09.2009 15:10
Titel
|
|
|
Was hat var $id hier für einen Wert?
Code: | $image = $id + 'b';
$idNext = $id + 1; |
Wie im Text beschrieben "#1" oder integer 1?
Ersteres wird natürlich nicht funktionieren.
Zuletzt bearbeitet von m am Fr 04.09.2009 15:13, insgesamt 3-mal bearbeitet
|
|
|
|
|
Anzeige
|
|
|
Kash
Threadersteller
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Fr 04.09.2009 15:12
Titel
|
|
|
nur den wert 1.
das ist ja die ID des thumbimg.
Code: |
var $id = $(this).attr("id");
|
|
|
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 04.09.2009 15:13
Titel
|
|
|
Außerdem sollte deine ID nicht mit einer Zahl beginnen.
|
|
|
|
|
Kash
Threadersteller
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Fr 04.09.2009 15:15
Titel
|
|
|
|
|
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 04.09.2009 15:39
Titel
|
|
|
http://www.w3schools.com/Css/css_syntax.asp
Zitat: | Do NOT start an ID name with a number! It will not work in Mozilla/Firefox. |
Grundlagenwissen
Zuletzt bearbeitet von m am Fr 04.09.2009 15:40, insgesamt 1-mal bearbeitet
|
|
|
|
|
Pixelpole
Dabei seit: 25.10.2004
Ort: Trier
Alter: 37
Geschlecht:
|
Verfasst Fr 04.09.2009 15:42
Titel
|
|
|
Du addierst Strings, keine Integers.
Stichwort: parseInt()
edit: noch viel härteres Grundlagenwissen du Hippie!
man merkt euch beiden an das ihr offensichtlich noch nie mit streng typisierten Sprachen zu tun hattet
Zuletzt bearbeitet von Pixelpole am Fr 04.09.2009 15:44, insgesamt 2-mal bearbeitet
|
|
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 04.09.2009 15:44
Titel
|
|
|
Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="de" lang="de">
<head>
<title>uh</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('img').mouseover(function(){
$(this).css('cursor','pointer');
});
$('.small').click(function(){
var $id = $(this).attr("id");
$('.lightBox').fadeIn('slow').css('display','block');
$('#' + $id + 'b').fadeIn('slow').css('display','block');
$('#zurueck').click(function(){
$id = parseInt($id.substr(1));
$image = 'n' + $id + 'b';
$idPrev = $id - 1;
$imagePrev = 'n' + $idPrev + 'b';
$('#' + $image).fadeOut('slow');
$('#' + $imagePrev).fadeIn('slow');
$id = $idPrev;
if($id <= 1){
$(this).css('display','none');
$('.z').css('display','none');
}
});
$('#vor').click(function(){
$id = parseInt($id.substr(1));
$image = 'n' + $id + 'b';
$idNext = $id + 1;
$imageNext = 'n' + $idNext + 'b';
$('#' + $image).fadeOut('slow');
$('#' + $imageNext).fadeIn('slow');
$id = $idNext;
if($id >= 1){
$('.zurueck').css('display','inline-block');
$('.z').css('display','inline-block');
}
});
});
});
</script>
<style type="text/css">
div.lightBox img {
display: none;
}
</style>
</head>
<body>
<div>
<img class="small" src="http://www.damnyeah.de/files/showcase/2009/t_1251717709.jpg" id="n1" alt="test.jpg" title="test.jpg">
<img class="small" src="http://www.damnyeah.de/files/showcase/2009/t_1251717742.jpg" id="n2" alt="test01.jpg" title="test01.jpg">
<img class="small" src="http://www.damnyeah.de/files/showcase/2009/t_1251717892.jpg" id="n3" alt="test02.jpg" title="test02.jpg">
<div class="lightBox">
<img src="http://www.damnyeah.de/files/showcase/2009/p_1251717709.jpg" id="n1b" alt="test.jpg" title="test.jpg">
<img src="http://www.damnyeah.de/files/showcase/2009/p_1251717742.jpg" id="n2b" alt="test01.jpg" title="test01.jpg">
<img src="http://www.damnyeah.de/files/showcase/2009/1251717892.jpg" id="n3b" alt="test02.jpg" title="test02.jpg">
<br />
<span class="z"><a id="zurueck" href="#"><</a></span><span class="v"><a id="vor" href="#">></a></span>
</div>
</div>
</body>
</html> |
edit: auf die String Verkettung habe ich doch schon im ersten Kommentar angesprochen
Zuletzt bearbeitet von m am Fr 04.09.2009 15:45, insgesamt 1-mal bearbeitet
|
|
|
|
|
|
|
|
Ähnliche Themen |
Werte in PDF aus InDesign addieren...
Javascript: Werte addieren mit parseInt()
DB Ausgabe addieren
Array addieren
[Javascript] Addieren
[Excel-Makros] Definierte Zellen addieren
|
|