JQ, clicks versch. Elem.> gleiches Ergebnis

[michey]

Hallo

habe für eine Galerie eine Vorschaufunktion erstellt, die mit mouseover und click auf Buttons aufgerufen wird (funktioniert sogar).
Möchte nun genau das gleiche erreichen (ohne mouseover) bei click auf Hauptbild(gallery), was mir aber nicht gelingt.

die Vorschaufunktion der Btns:

PHP-Code:

$('#thumbs a').click(function(evt) {

var oldPrev_over = $('#prev_over img');

oldPrev_over.hide();//hide _over div

$('#date').html( $(this).attr('alt') );
    
var Datum = $("#date");
var Date_over = $("#date_over");
    
evt.preventDefault();//don't follow link                      
    
var prevPath = $(this).next('a').attr('href');//get path to image         
      
var oldPrev = $('#preview img'); 
    
var  newPrev = $('<img src="' + prevPath +'">');
                          
newPrev.hide();//make new image invisible             
Date_over.hide();             
              
$('#preview').prepend(newPrev);//add to the #preview div                                                         
         
newPrev.fadeIn(2000);//fade in new image             
             
Datum.show();
    
oldPrev.fadeOut(2000,function(){//fade out old Prev and remove from DOM
             $(this).remove();
                             }); 
});// end click
        


$('#thumbs a:first').click(); 


für das Hauptbild habe ich es so versucht:

PHP-Code:

$('#gallery').click(function(evt) {
    
var oldPrev_over = $('#prev_over img');

oldPrev_over.hide();
                                          
    for (var i = 0; i < 60; i++) {
   $('#date').html( $('#thumbs [i]').attr('alt') );
 }                                      
    
var Datum = $("#date");

var Date_over = $("#date_over");
        
for (var i = 0; i < 60; i++) {
   var prevPath = $('#thumbs [i]').next('a').attr('href');

 }                                      

var oldPrev = $('#preview img'); 

var  newPrev = $('<img src="' + prevPath +'">');

newPrev.hide();             

Date_over.hide();              
             
             
$('#preview').prepend(newPrev);                                       
                      
newPrev.fadeIn(2000);             
             
Datum.show();
                          
                         
oldPrev.fadeOut(2000,function(){
             $(this).remove();
                             }); 
});// end click 


damit werden aber weder Datum noch Bilder gefunden.
Mach ich da einen grundlegenden Überlegungsfehler in Bezug auf die Pfade?

Hoffe dass jemand weiterhelfen kann...

[Nightflyer]

PHP-Code:

for (var i = 0; i < 60; i++) {
   $('#date').html( $('#thumbs [i]').attr('alt') );
 } 


Das Flashforum highlighted dir den Fehler sogar

PHP-Code:

for (var i = 0; i < 60; i++) {
   $('#date').html( $('#thumbs'+i).attr('alt') );
 } 


So wärs richtig, sofern deine Elemente thumbs1, thumbs2, thumbs3 ect. heissen

[michey]

vielen Dank für die Antwort.
Das ist es aber auch nicht, der fehler muss auch noch woanders liegen.
Wäre es nicht logischer so?(Was aber auch nicht geht)

PHP-Code:

for (var i = 0; i < a.length; i++) {
   $('#date').html( $('#thumbs a[i]').attr('alt') );
 } 


und folglich müsste dann a mein array sein?

PHP-Code:

a = []; 


das html aus dem ich die elemente beziehe sieht so aus:

PHP-Code:

<div id="thumbs" class="navigation">
                    <ul class="thumbs noscript">
                                                <li>
                            <a class="thumb" name="" href="werke/1.jpg" title="Title #1" alt="1958"></a>
<a href="p/1.jpg" alt="1958"></a>
                            <div class="caption">bild 1</div>

                        </li> 


usw...

[Nightflyer]

Was du da machst ist einfach keine korrekte Synax. Hör auf das immer in Anführungszeichen zu schreiben, sonst wird das immer als String behandelt. Wenn du ein Array HÄTTEST dann müsste es so lauten:

PHP-Code:

for (var i = 0; i < a.length; i++) {
   $('#date').html( $('#'+a[i]).attr('alt') );
 } 


Ich gehe aber mal davon aus dass du überhaupt kein Array hast sondern einfach auf die Position zugreifen willst, richtig? Diest machst du mittels Traversing -> eq()

PHP-Code:

for (var i = 0; i < a.length; i++) {
   $('#date').html( $('#thumbs a').eq(i).attr('alt') );
 } 


[michey]

Ja, du liegst richtig, ich habe kein Array und versuche auf die Position zuzugreifen.
Traversing kannte ich noch nicht, muss ich mir näher anschauen.

Dein letztes geht auch nicht, liegt aber sicher nicht an deinem Code.

>Da< wäre noch das Beispiel dazu, noch ziemlich dirty...

Vielen Dank, weiss jetzt zumindest wo ansetzen.

[Nightflyer]

eq() kannst übrigens auch als Selektor verwenden:

PHP-Code:

for (var i = 0; i < a.length; i++) {
     $('#date').html( $('#thumbs a:eq('+i+')').attr('alt') );
} 


Sieht aber für mich etwas weniger schön aus

[michey]

Damit

PHP-Code:

$('#gallery').click(function(evt) {
evt.preventDefault();//don't follow link        
var oldPrev_over = $('#prev_over img');
oldPrev_over.hide();
    for (var i = 0; i < a.length; i++) { 
     $('#date').html( $('#thumbs a:eq('+i+')').attr('alt') ); 
}      
var Datum = $("#date");
var Date_over = $("#date_over");
for (var i = 0; i < a.length; i++) {
   var prevPath = $('#thumbs a:eq('+i+')').next('a').attr('href');
 }                                      
var oldPrev = $('#preview img'); 
var  newPrev = $('<img src="' + prevPath +'">');
newPrev.hide();             
Date_over.hide();                                        
$('#preview').prepend(newPrev);                                                             
newPrev.fadeIn(2000);                          
Datum.show();                                                   
oldPrev.fadeOut(2000,function(){
             $(this).remove();
                             }); 
});// end click 


wäre eigentlich zu erwarten dass die a elemente vom div thumbs clickweise hochgezählt und traversiert werden und die entsprechenden Attribute ausgelesen werden.
Es passiert aber überhaupt nichts.
Jemand eine Ahnung woran es noch fehlt?

[Nightflyer]

Ohne HTML ist dein JS kaum zu durchblicken..

Fragen die sich mir stellen:
- Wo wird das Array a definiert bzw. ist das überhaupt ein Array?
- Selbst wenn a.length grösser 0 ist und die Schlaufe ausgeführt wird, überschreibst du bei jedem Schlaufendurchgang die vorangehende Eingabe

[michey]

Ich habe kein array erstellt, da ich nachgelesen habe dass length auch als Länge, bzw als Anzahl von Elementen definiert ist.Falsch?

Das aufs wesentliche abgespeckte HTML:

PHP-Code:

<body>
<div id="limits">
<div id="logo"></div>

<!-- navigation -->
<div id="nav">
              
    <div id="navcontainer">
      <ul id="navlist">
        <li><a href="einfuehrung.html">einführung</a></li>
            <li id="active"><a href="#" id="current">biografie</a>
              <ul id="subnavlist">
                  <li><a href="bio.html">vita</a></li>
                  <li><a href="bio_ausstellungen.html">ausstellungen</a></li>
                  <li id="subactive"><a href="#" id="subcurrent">werk</a></li>
              </ul>
        </li>            
            <li><a href="galerie.html">galerie</a></li>
            <li><a href="pentagitter.html">pentagitter</a></li>
            <li><a href="ameisen.html">ameisen</a></li>
            <li><a href="unterrichth.tml">unterricht</a></li>
            <li><a href="kontakt.html">kontakt</a></li>
            <li><a href="gaestebuch.html">gästebuch</a></li>
          </ul>      
    </div>
  </div>

<div id="werktitle">lebenswerk 1958-2010</div>

  <div id="page">
            
                

                <!-- Gallery -->
                <div id="gallery" class="content">

<div class="slideshow-container">
<div id="controls" class="controls"></div>
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
</div>

<div id="topHolder">
<div id="prevsHolder">
<div id="prev_loader"></div>
<div id="preview"></div>
<div id="prev_over"></div>
<div id="date"></div>
<div id="date_over"></div>
</div>
</div>
<!-- end topHolder -->



                  <div id="caption" class="caption-container"></div>
                </div>
                
<div id="thumbsHolder">
                
                                <div id="thumbs" class="navigation">
                    <ul class="thumbs noscript">
                        <!-- 60 Bilder insgesamt -->
                        <li>
                            <a class="thumb" name="" href="bild1" title="Title #1" alt="1958"></a> <!-- Hauptbild+Datum -->
                            <a href="p/1.jpg"></a><!-- Vorschaubildchen -->                            
                            <div class="caption">
                                Bildbeschreibung
                            </div>
                        </li>
                        
                        <li>
                            <a class="thumb" name="" href="bild2" title="Title #2" alt="1959"></a>
                            <a href="p/2.jpg"></a>    
                            <div class="caption">
                                Bildbeschreibung
                            </div>
                        </li>
                        
                        <li>
                            <a class="thumb" name="" href="bild3" title="Title #3" alt="1960"></a>
                            <a href="p/3.jpg"></a>    
                            <div class="caption">
                                Bildbeschreibung
                            </div>
                        </li>
                        <!-- 60 Bilder insgesamt -->    
                    </ul>
                </div>
            
            </div>        
            </div>
            </div>        
            </div>
    </div>
    
<script type="text/javascript">

$(document).ready(function() {

//click auf Hauptbild
$('#gallery').click(function(evt) {
evt.preventDefault();//don't follow link        
var oldPrev_over = $('#prev_over img');
oldPrev_over.hide();
    for (var i = 0; i < a.length; i++) { 
     $('#date').html( $('#thumbs a:eq('+i+')').attr('alt') ); 
}      
var Datum = $("#date");
var Date_over = $("#date_over");
for (var i = 0; i < a.length; i++) {
   var prevPath = $('#thumbs a:eq('+i+')').next('a').attr('href');
 }                                      
var oldPrev = $('#preview img'); 
var  newPrev = $('<img src="' + prevPath +'">');
newPrev.hide();             
Date_over.hide();                                        
$('#preview').prepend(newPrev);                                                             
newPrev.fadeIn(2000);                      
Datum.show();                                                   
oldPrev.fadeOut(2000,function(){
$(this).remove();
    }); 
});
// end click
         
// Btns click
$('#thumbs a').click(function(evt) {
var oldPrev_over = $('#prev_over img');
oldPrev_over.hide();//hide _over div
$('#date').html( $(this).attr('alt') );    
var Datum = $("#date");
var Date_over = $("#date_over");    
evt.preventDefault();//don't follow link                          
var prevPath = $(this).next('a').attr('href');//get path to image               
var oldPrev = $('#preview img');     
var  newPrev = $('<img src="' + prevPath +'">');                          
newPrev.hide();//make new image invisible             
Date_over.hide();                           
$('#preview').prepend(newPrev);//add to the #preview div                                                                  
newPrev.fadeIn(2000);//fade in new image                          
Datum.show();    
oldPrev.fadeOut(2000,function(){//fade out old Prev
$(this).remove();
    }); 
});
// end click        

$('#thumbs a:first').click();

//fade in _over div                                             
$('#thumbs ul.thumbs li a.thumb').mouseover(function(evt) {
var prevPath = $(this).next('a').attr('href');
$('#date_over').html( $(this).attr('alt') );
var Date_over = $("#date_over");
var  newPrev_over = $('<img src="' + prevPath +'">');
$('#prev_over').prepend(newPrev_over);
newPrev_over.fadeIn(200);
Date_over.show();    
});
// end mouseover

//fade out _over div    
$('#thumbs ul.thumbs li a').mouseout(function(evt) {
var oldPrev_over = $('#prev_over img');
oldPrev_over.fadeOut(200,function(){
             $(this).remove();
           });
var Date_over = $("#date_over");
Date_over.hide();                                          
});
// end mouseout
                
                $('div.navigation').css({'width' : '165px', 'float' : 'left', 'top' : '166', 'position' : 'absolute', 'left':'15' });
                $('div.content').css('display', 'block');
                
                // Galleriffic Gallery
                var gallery = $('#thumbs').galleriffic({
                    delay:                     4000,
                    numThumbs:                 60,
                    preloadAhead:              -1,
                    imageContainerSel:      '#slideshow',
                    captionContainerSel:       '#caption',
                    loadingContainerSel:       '#loading',
                    syncTransitions:           true,
                    defaultTransitionDuration: 2000
              });

        }); // end ready    

</script>
</body> 


... eigentlich müsste ja immer "nur" 1 zum aktuellen a dazugezählt werden, da der click aufs Hauptbild das nächste Hauptbild lädt und da sollen dann auch das entsprechende Datum und Vorschaubild kommen.

[Nightflyer]

Zitat von michey

Ich habe kein array erstellt, da ich nachgelesen habe dass length auch als Länge, bzw als Anzahl von Elementen definiert ist.Falsch?

In deinem Fall IMHO ja da du ja alle Links durchlaufen willst und das wäre dann $('a').length. a.length funktioniert nur wenn a eben ein Array ist.

Probiers mal so:

PHP-Code:

$('#gallery').click( function(evt) {
    
    evt.preventDefault();//don't follow link
    
    $('#thumbs a').each( function(){
        
        $('#date').append( $(this).attr('alt') );
        
    });
    
    $('#preview').prepend( '<img id="newPrev" style="display:none;" src="' + $('#thumbs a:last').attr('href') +'">' );
    $("#date_over").hide();
    $('#newPrev').fadeIn( 2000 );
    $('#date').show();
    $('#preview img').fadeOut(2000,function(){
        $(this).remove();
    });
     
}); 


Da du mir die Links in deinen Kästchen vorenthalten hast kann ich deren Pfade natürlich auch wieder nur erraten.

[michey]

Vielen Dank für deine Mühe.
Meinst du den Pfad zu den grossen Bildern?
Im verlinkten Beispiel ist es:
http://www.pentagitter.ch/penta/werke/3.jpg, später dann .../werke/3.jpg usw.

Mit deinem aktuellen Code zeigt er beim Datum die ganze Reihe, das erste Datum 2x, die anderen 1x.
Sieht nach dem ersten click dann so aus:

19581958195919601961....
jeder weitere click addiert die ganze reihe noch einmal dazu.

Vorschaubilder werden keine angezeigt.

[Nightflyer]

Tu das zusätzlich in deine Klick-Funktion:

PHP-Code:

$('#gallery a').removeClass("checked");
$(this).addClass("checked");
        
$('#photo').click( function(){
            
        $('a.checked').next().next().click();
            
}); 


PS: Warum das noch nicht so funktioniert wie es soll weiss ich auch nicht, aber es ist zumindest mal ein Anfang

[michey]

Guten Morgen

Nach deinem letzten posting mit der class checked ist mir aufgefallen, dass es die klasse innerhalb des galleriffic scripts, das ich ja als Grundlage benutze, schon gibt. Die Quadrätchen werden ja beim click aufm Hauptbild als checked markiert und die Bildbeschreibung wird auch aktualisiert.
Habe also innerhalb des galleriffic scripts angesetzt und analog der caption/Bildbeschreibung alles auch für das Datum erstellt.
Und Wunder, oh Wunder, siehe da, es geht!
Versuche also jetzt auf die gleiche Weise das ganze auch für die Vorschaubildchen zu erstellen.

Nochmals Vielen Dank für die Hilfe und schönen Sonntag.

PS Gut zu wissen, dass das Forum immer noch der Ort ist, wo man bei solchen Problemen anklopfen kann...

[Nightflyer]

Ja dass das drin war hab ich gewusst. Hab mich schliesslich mit dem Script 2h herumgenervt bis ich aufgegeben habe.

[michey]

Da du dich so lange abgemüht hast, interessiert dich vielleicht auch die Lösung.
Scheint jetzt alles zu funktionieren wie es sollte, inkl. Datum und Vorschaubildchen.

Und jetzt gehts ans Aufräumen und Leichen entsorgen...