Jquery Problem

    Hallo,
    ich habe ein kleines Problem. Ich lasse mir ein Bild in einem Kreis ausgeben, mit border-radius gelöst. Jetzt möchte ich, dass wenn man über das Bild fährt, das Bild transparenter wird und dass sich dann ein anderes Element eingefadet wird. Es sollen also 2 Elemente übereinander liegen und je nach dem eins eingeblendet bzw. ausgeblendet werden.

    Mein Problem ist die Positionierung. Der Container der ausgeblendet werden soll, liegt immer drüber.

    Code sieht wie folgt aus:

    HTML:

    HTML
    <a href="detail/anja.php">                            
<div class="image-container">                                
<span class="image-info">Anja</span>                                
<span class="image-wrap " style="position:relative; display:inline-block; background:url(bilder/gallery-1/0.jpg) no-repeat center center; width: 17em; height: 17em;">                                    
<img class="circle" src="bilder/gallery-1/0.jpg" style="opacity: 0;">                                
</span>                            
</div>                        
</a>

    Jquery:

    Code
    $(document).ready(function(){              
$(".circle").load(function() {
                    $(this).wrap(function(){
                          return '<span class="image-wrap ' + $(this).attr('class') + '" style="position:relative; display:inline-block; background:url(' + $(this).attr('src') + ') no-repeat center top; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
                    });
                    $(this).css("opacity","0");
              });

    CSS:

    Hoffentlich kann mir jemand helfen :)

    zunächst mal das css aus dem HTML in dein CSS-File. Dann beide Bilder auch als solche deklarieren.
    Und eigentlich sollte es dann klappen, beide mit

    Code
    position: relative;
top: 0;
left: 0;

    Überainandern zu legen. Dann kannst du mit fadeOut/fadeIn auf dem Oberen hin- und her faden

    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.

    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

    <a>-Elemente sind Inlineelemente in denen keine Blockelemente wie <div> oder <h3> vorkommen dürfen. Wenn Du all diese Inhalte verlinken willst, dann müsstest Du entweder jeden Inhalt einzeln verlinken oder statt <div> und <h3> eher <span> verwenden und die Ausgabe per CSS entsprechend anpassen. Ausnahme wäre, wenn Du einen HTML5-Doctype verwendest - dort ist so eine Verschachtelung zulässig.

    Unabhängig davon wäre ein Link zur Seite interessant.

    mit position:relative wird man nichts übereinander bekommen, dafür muss der wrapper relative sein und die elmeente an sich absolut, z-index nich vergessen!

    und die besten ergebnisse haste wenn du nicht die fade-funktionen nimmst sondern ein animate auf die opacity machst.
    aber wie threadi schon sagte ist ein link immer mehr wert, als der code, weil man da das zusammenspiel aler elemente sehen kann und des ganze auch debuggen kann.

    Ich bin mir nicht sicher was mit jQuery nun genau dort passieren soll - bei mir passiert gar nichts. Allerdings fällt mir auf, dass Du wenn Du die Bilder an der selben Stelle haben willst beide per

    Code
    position: absolute;

    ausrichten solltest, nicht relativ wie es aktuell ist.

    Ah absolute ist perfekt :) Scheint jetzt erstmal zu funktionieren. Dankeschön :)

    Nächstes Problem:
    Mein schwarzer Kreis im Hintergrund gibt jetzt dem eigentlichen Bild einen Rahmen. Den möchte ich aber nicht... Größe verändern hilft leider nicht und Positionierung hat mich auch noch nicht zum richtigen Ergebnis gebracht.

    Edit 2:
    Mit mehreren Bildern funktioniert es leider nicht mehr :( Ich hab die Datei nochmals aktualisiert.

    2 Mal editiert, zuletzt von DummerTroll (18. Juni 2013 um 00:14)

    probier mal den kreisen nen weißen rahmen zu geben.
    hab deine technik da noch nicht so ausprobiert, daher nur ein tip ins blaue.

    aber: du solltest dir um deine struktur gedanken machen.
    erst baut man seine funktion für ein objekt, dann haut man ein zweites objekt dazu und schaut nach fehlern, erst danach kann man die restlichen objekte hinzufügen.

    wrapper => objekt

    so dass du nur die wrapper positinieren musst und die objekte einfach drin liegen und dann haste später eine art objektmatrix, mit der alles fruchten sollte

    na du machst dir bei einer wiederkehrenden html-struktur zuerst nur ein objekt fertig, das stopfst du in ein umschliessendes element.
    dieses element wird später positioniert (ganz normal mit floats, margins, paddings, whatever)
    wenn du dieses objekt mit script und css fertig hast, verdoppelst du den code und schaust, obs noch passt, wenn ja stopfste alle anderen elemente in den code und schaust wie es wird.
    was du da hast macht nen sehr unaufgeräumten eindruck und wenn du wie beschrieben vorgehst, wirst du früher fehler erkennen und ausmerzen können.