mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 11:14 Benutzername: Passwort: Auto-Login

Thema: [jQuery] - Werte addieren vom 04.09.2009


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> [jQuery] - Werte addieren
Seite: 1, 2, 3  Weiter
Autor Nachricht
Kash
Threadersteller

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Fr 04.09.2009 14:56
Titel

[jQuery] - Werte addieren

Antworten mit Zitat Zum Seitenanfang

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="#">&lt;</a></span><span class="v"><a class="vor" href="#">&gt;</a></span>
      </div>
   </div>


Falls ich mich nicht so klar ausgedrückt habe, bitte nochmal nachfragen.
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 04.09.2009 15:10
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
Kash
Threadersteller

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Fr 04.09.2009 15:12
Titel

Antworten mit Zitat Zum Seitenanfang

nur den wert 1.
das ist ja die ID des thumbimg.

Code:

var $id = $(this).attr("id");
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 04.09.2009 15:13
Titel

Antworten mit Zitat Zum Seitenanfang

Außerdem sollte deine ID nicht mit einer Zahl beginnen. *zwinker*
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Kash
Threadersteller

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Fr 04.09.2009 15:15
Titel

Antworten mit Zitat Zum Seitenanfang

Hä?
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 04.09.2009 15:39
Titel

Antworten mit Zitat Zum Seitenanfang

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 *bäh*


Zuletzt bearbeitet von m am Fr 04.09.2009 15:40, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Pixelpole

Dabei seit: 25.10.2004
Ort: Trier
Alter: 37
Geschlecht: Männlich
Verfasst Fr 04.09.2009 15:42
Titel

Antworten mit Zitat Zum Seitenanfang

Du addierst Strings, keine Integers.

Stichwort: parseInt()

edit: noch viel härteres Grundlagenwissen du Hippie! Grins

man merkt euch beiden an das ihr offensichtlich noch nie mit streng typisierten Sprachen zu tun hattet Grins


Zuletzt bearbeitet von Pixelpole am Fr 04.09.2009 15:44, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 04.09.2009 15:44
Titel

Antworten mit Zitat Zum Seitenanfang

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="#">&lt;</a></span><span class="v"><a id="vor" href="#">&gt;</a></span>
      </div>
   </div>
  </body>
</html>


edit: auf die String Verkettung habe ich doch schon im ersten Kommentar angesprochen *pah*


Zuletzt bearbeitet von m am Fr 04.09.2009 15:45, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ä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
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2, 3  Weiter
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.