Hinzufügen einer CSS-Klasse Nach Bild-Verhältnis

Ich bin erstellen einer Bildergalerie mit Dutzenden von hoch-und Querformat-Bilder auf einer einzigen Seite. Ich möchte den Stil jedes Bild mit einem dynamisch hinzugefügte CSS-Klasse (z.B. ".landscape" für Querformat-Bilder) entsprechend seiner Ausrichtung.

Stieß ich auf den folgenden code (von 2003!) Für die Bestimmung des Verhältnis und eine Klasse hinzufügen, die für ein einziges Bild, aber ich brauche den Klassen Hinzugefügt werden, automatisch für alle Bilder innerhalb eines bestimmten div-id. Ehrlich gesagt, ich weiß nur nicht genug über JavaScript oder jQuery zu lösen, diese auf meinem eigenen.

<script language="JavaScript" type="text/javascript">
<!--
function getDim() {
myImage = new Image;
myImage.src="myimage.gif";//path to image
document.divImage.src=myImage.src;
var imgProp;
var width = myImage.width;
var height = myImage.height;
var ratio = width/height;
if ( ratio > 1 ) {
document.getElementById('image').className="portrait";
}
else {
document.getElementById('image').className="landscape";
}
}
//-->
</script>

InformationsquelleAutor Kate | 2011-04-13

15

mit jQuery:
```
$('#divID img').each(function(){
    $(this).addClass(this.width > this.height ? 'landscape' : 'portrait');
});
```
- Ähm, wow. 3 Antworten in weniger als 14 Stunden. Sie Jungs sind genial! Beginnen werde ich mit @cwolves die Lösung heute morgen und lassen Sie wissen, wie es geht! JUHUU!
- . . . Und es funktioniert einwandfrei! Leider ist das CMS das ich verwende, nicht wieder das Bild in Höhe und Breite info. Zum Glück, meine CMS-Entwickler ist ziemlich gut über die Anforderungen ändern, so dass hoffentlich er werde hinzufügen, dass die info zu der XML-Ausgabe noch heute! DANK CWOLVES und all die anderen, die beigetreten sind!
- Nett und süß!
InformationsquelleAutor Mark Kahn
1

Ziemlich einfach jQuery:
```
$('#yourId').find('img').each(function(i,elem){
    var $this = $(this),
        ratio = $this.width() / $this.height();

    $this.addClass((ratio < 1) ? 'portrait' : 'landscape');
});
```
Siehe Beispiel →
- Ähm, wow. 3 Antworten in weniger als 14 Stunden. Sie Jungs sind genial! Beginnen werde ich mit @cwolves Lösung heute morgen und lassen Sie wissen, wie es geht! JUHUU!
InformationsquelleAutor mVChr
0

Können sagen, dass Ihr mit div-Klasse gallery und Sie sind mit jQuery 🙂
```
$(document).ready(function(){
    $('.gallery img').each(function(){
        var width = $(this).width();
        var height = $(this).height();
        var className;
        if (width/height > 1) className = "portrait";
        else className = "landscape";
        $(this).addClass(className);
    });
});
```
Dieser Weg ist länger, aber können Sie weitere Regeln hinzufügen (wenn es keine Grund, so zu tun :).. dh.:
```
if (width/height == 1) className = "square";
```
- $(this).width() zu aufwendig ist. Sie unnötigerweise die gleiche jQuery-Objekt 3 - Zeiten, und Sie sind mit jQuery, um etwas zu tun es nicht tun müssen, ist überprüfen Sie einfach this.width
- Ah, ich dachte, $(this) verwenden Referenz.
- Es verweist auf das Bild, ja, aber du bist unnötig erstellen von 3 verschiedenen jQuery-Objekte. Es braucht nicht so viel Speicher/Speicherplatz in diesem Beispiel, sondern immer in die Gewohnheit zu tun var $this = $(this) oder etwas, was ähnlich gut ist. Auch, raus aus der Gewohnheit, mit Hilfe von jQuery für alles, z.B. .width() wenn .width auf die DOM-Knoten liefert Sie die gleiche Sache.
- Ja, du hast Recht. Ich dachte über var image = $(this), aber ich habe es nicht verwenden am Ende.. das Ergebnis wäre ohnehin dasselbe, wenn es nicht, verwenden Sie Referenz. Und ich bin nicht so gut mit reinem javascript, so dass ich nicht weiß, zu einfach .Breite, so vielen Dank für poinint heraus. Froh, etwas zu lernen 🙂
InformationsquelleAutor Damb

Wenn die Einstellung img width/height stört mit css können Sie es als Daten-Breite/Daten-Höhe:

  $('#your-div-Id').find('img').each(function(i,elem){
      var $this = $(this),
          ratio = $this.attr('data-width') / $this.attr('data-height');
      $this.addClass((ratio < 1) ? 'portrait' : 'landscape');
  });

HTML:

<div id="your-div-Id">
    <img src="#" data-width="60" data-height="30" />
</div>

Bearbeitet mVChr Beispiel

InformationsquelleAutor eye-wonder

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.