jQuery

Flex: Hemdsärmeliges jQuery-Plugin für schicken Grid-Effekt

10. August 2012
von

Jason English war begeistert. Die alte Website von Adidas, realisiert auf der Basis von Flash, zeigte ein Grid mit Bildern an, die sich beim Hovern vergrößerten und so die anderen Bilder verschoben. Lange durchwühlte er das Weltennetz auf der Suche nach einer ähnlichen Lösung ohne Flash. Digitale Wegelagerer bedeuteten ihm, er würde diesen Effekt niemals finden, geschweige denn erstellen können. Dies bliebe allein dem dunklen Lord Flash vorbehalten. Doch Jason English machte seinem Namen alle Ehre und dachte sich: Jetzt erst recht! Heraus kam: Flex

Flex: Vergrößert Bildchen innerhalb eines Div-Containers

Wollen wir uns nicht mit langen Vorreden aufhalten. Flex Funktionsweise versteht man am schnellsten, wenn man sich den erforderlichen Quellcode anschaut. Zunächst bindet man das Script nebst jQuery natürlich in die Seite ein:

1
2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="https://raw.github.com/jasonenglish/jquery-flex/master/jquery.flex.js"></script>

Dann kommt der eigentlich interessante Teil. Man platziert seine Bildchen manuell in der Form von A-Elementen unter Zuhilfenahme von Inline-Styles wie folgt:

1
2
3
4
5
6
7
8
9
10
11
12
13

<div class="flex">
    <a bg="a" style="left:0px;top:0px;width:250px;height:125px;" width="325" height="175">A</a>
    <a bg="b" style="left:260px;height:100px;top:0px;width:125px;" width="250" height="175">B</a>
    <a bg="c" style="left:395px;height:250px;top:0px;width:75px;" width="125" height="350">C</a>
    <a bg="d" style="left:480px;height:75px;top:0px;width:75px;" width="175" height="150">D</a>
    <a bg="e" style="left:565px;height:125px;top:0px;width:200px;" width="200" height="250">E</a>
    <a bg="f" style="left:480px;height:200px;top:85px;width:75px;" width="150" height="225">F</a>
    <a bg="g" style="left:0px;height:100px;top:135px;width:75px;" width="305" height="150">G</a>
    <a bg="h" style="left:260px;height:75px;top:110px;width:125px;" width="200" height="200">H</a>
    <a bg="i" style="left:85px;height:140px;top:135px;width:165px;" width="200" height="140">I</a>
    <a bg="j" style="left:565px;height:150px;top:135px;width:75px;" width="125" height="275">J</a>
    <a bg="k" style="left:650px;height:75px;top:135px;width:75px;" width="75" height="200">K</a>
</div>

Sie sehen, dass man stark manuell eingreifen muss. Unbedingt ist auf die korrekte Platzierung der Bilder zu achten. Flex geht von einem Abstand von 10 Pixeln zwischen den Bildern aus, der eingehalten werden muss, soll es nicht zu gewöhnungsbedürftiger Optik kommen. Die Inline-Styles definieren die Anzeigegröße, wenn das jeweilige Bild nicht gehovert wird. Die Größenangaben im A-Tag definieren die Anzeigegröße der Bildchen on hover. Die eigentlichen Bilddateien wiederum werden mittels CSS background-image den entsprechend benannten A-Tags zugewiesen:

1
2
3
4
5
6
7
8
9
10
11
12
13

    .flex {position:relative;width:850px;min-height:300px;margin:0 auto;border:0px solid red;margin-top:10px;}
    .flex a {background-color:white;display:block;width:100px;height:100px;border-radius:8px;position:absolute;background-repeat:no-repeat;background-position:center;border:3px solid white;cursor:pointer;text-align:left;text-shadow:1px 1px 20px #000;color:white;font-size:18px;font-weight:bold;text-indent:10px;line-height:30px;}
    [bg=a] {background-image:url(http://farm8.staticflickr.com/7013/6448917381_0b754e86fb_z.jpg);}
    [bg=b] {background-image:url(http://farm9.staticflickr.com/8156/7362866426_bf285ebd45.jpg);background-size:300px auto;}
    [bg=c] {background-image:url(http://farm6.staticflickr.com/5117/7410370290_0935419fc3.jpg);}
    [bg=d] {background-image:url(http://farm8.staticflickr.com/7262/7419245080_bb752ed1d6.jpg);}
    [bg=e] {background-image:url(http://farm8.staticflickr.com/7003/6468321069_3375be3073_z.jpg);background-size:auto 280px;}
    [bg=f] {background-image:url(http://farm8.staticflickr.com/7220/7342556872_46cddaf9b0.jpg);background-size:auto 280px;}
    [bg=g] {background-image:url(http://farm9.staticflickr.com/8021/7322604950_348c535903.jpg);background-size:auto 200px;}
    [bg=h] {background-image:url(http://farm8.staticflickr.com/7076/7286717012_6e6b450243.jpg);}
    [bg=i] {background-image:url(http://farm8.staticflickr.com/7129/7452167788_a3f6aa3104.jpg);background-size:auto 200px;}
    [bg=j] {background-image:url(http://farm8.staticflickr.com/7153/6480022425_a8d419e663_z.jpg);background-size:auto 280px;}
    [bg=k] {background-image:url(http://farm8.staticflickr.com/7225/7269592732_c4b7918626.jpg);background-size:auto 280px;}

Zu guter Letzt ruft man die Funktion .flex auf und der Spaß kann beginnen.

1
2
3

    $(function() {
        $(".flex").flex();
    });

Flex steht zur kostenfreien Verwendung in der Version 0.2 auf Github zum Download bereit. English betreibt zusätzlich eine Demoseite, die zeigt, was aus den hier verwendeten Codeschnipseln entsteht. In späteren Versionen soll auf große Teile der aktuell noch erforderlichen Handarbeit verzichtet werden können. Mitstreiter sind jederzeit willkommen.

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit fast 30 Jahren in der IT daheim. Seit 2008 schreibt er für Dr. Web, seit 2012 ist er Chefredakteur des Magazins. Man findet ihn auch auf Twitter und Facebook, aktiver ist er allerdings auf Google+.

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!