Jquery Problem

DummerTroll

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:

Code

.circle {    width:17em;
    height:17em;
}




.image-wrap {
    -webkit-border-radius: 50em;
    -moz-border-radius: 50em;
    border-radius: 50em;
}




.image-container {
    width:17em;
    height:17em;
}




.image-info {
    position:relative;
    background:black no-repeat center center;
    width:17em;
    height:17em;
    -webkit-border-radius: 50em;
    -moz-border-radius: 50em;
    border-radius: 50em;
    opacity:1;    
}




.circle-list {
    text-align:center;
}




.circle-list li {
    display:inline;
    line-height:5em;
    margin-left:1em;
    margin-right:1em;
}

Alles anzeigen

Hoffentlich kann mir jemand helfen

Tobse

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

DummerTroll

Css ist in einer extra Datei.
Leider haben sich die Beiden Spans nicht verschoben und hängen immer noch wie im Bild

threadi

<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.

synaptic

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.

DummerTroll

Habe die Seite mal kurz hochgeladen: http://christophkreibich.de/sandbox/0007/V2/

Eigentlich nutze ich HTML 5...

threadi

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.

DummerTroll

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.

synaptic

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

DummerTroll

Ich versteh nicht ganz was du meinst...

Ich habe etwas weiter versucht. Leider klappt es nur bei ein paar wenigen Kreisen

synaptic

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.

DummerTroll

So ich habs nochmal geupdated. http://christophkreibich.de/sandbox/0007/V2/
Problem ist jetzt:
Wie kann ich alle Kreise zentrieren, sprich so wie wenn ich eine Text mit text-align:center positioniere?

synaptic

meinste so?

Code

.circle-list {
  margin: 0 auto;
  text-align: center;
  width: 800px;
}

DummerTroll

Gerade ist mir was komisches passiert...

Im FireFox schauts so aus:

und in Chrome so:

Was kann da der Fehler sein?

Jquery Problem

Tags

Benutzer online in diesem Thema