jQuery Plugin Natural Gallery

Natural Gallery ist ein kleines jQuery Plugin, das versucht die Bilddarstellung einer Galerie etwas 'natürlicher' zu gestalten.

Grundlegend richtet es Bilder in zufälligen Winkeln aus und versieht sie mit vorkonfigurierten CSS-Regeln.

Natural Gallery benötigt jQuery.

Natural Gallery einbinden

[...]
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/natural-gallery.jquery.min.js"></script>
  <script type="text/javascript">
	$(document).ready(function () {
      $('.natural-gal').naturalGallery({
        degreeMin: -15,
        degreeMax: 15,
        imgType: 'polaroid', // polaroid, photo, picture or none
        rotateBackOnHover: true
      });
    });
  </script>
</body>
[...]

 

Mit der Initialisierung wird eine ID für den Container übergeben, innerhalb dessen alle Bilder (<img>) vom Script modifiziert werden. Dafür müssen diese keine Kind-Elemente des Containers sein.

Es gibt zur Zeit 4 Optionen, die mit dem Aufruf gesetzt werden können

degreeMin (default: -15), degreeMax (default: 15)
Diese Optionen stellen den von-bis-Bereich in Grad dar, innerhalb dessen sich die Bilder neigen.

imgType (default: 'polaroid')
Damit kann eine von 3 vorgefertigten CSS-Darstellungen gewählt werden. Mögliche Werte sind 'polaroid', 'photo', 'picture'. Soll die Bilddarstellung bis auf die Drehung unverändert sein, ist 'none' der Wert der Wahl.

rotateBackOnHover (default: true)
Wenn auf true gesetzt, wird bei Halten des Mauszeigers auf das entsprechenden Bild dieses gerade ausgerichtet.

Sass

Dem Download liegen die Styles auch als Sass-Datei im scss-Format bei.

Kommentare