Sie sind nicht angemeldet.

Lieber Besucher, herzlich willkommen bei: BASE4U. Falls dies Ihr erster Besuch auf dieser Seite ist, lesen Sie sich bitte die Hilfe durch. Dort wird Ihnen die Bedienung dieser Seite näher erläutert. Darüber hinaus sollten Sie sich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutzen Sie das Registrierungsformular, um sich zu registrieren oder informieren Sie sich ausführlich über den Registrierungsvorgang. Falls Sie sich bereits zu einem früheren Zeitpunkt registriert haben, können Sie sich hier anmelden.

Grizzly

Administrator

  • »Grizzly« ist der Autor dieses Themas

Beiträge: 6 682

Aktivitätspunkte: 36 095

Wohnort: Lichtenau

Beruf: Anwendungsentwickler

  • Nachricht senden

1

Donnerstag, 12. Mai 2011, 12:12

Simple Base Gallery JQuery PlugIn

Ich darf euch heute die offizielle Simple Base Gallery vorstellen, die ich erstellt habe. Die Simple Base Gallery ist ein JQuery PlugIn welches jeder gerne verwenden kann.

Was wird benötigt?
  1. JQuery
  2. JQuery UI (Für die Dialoge)
  3. Image Resizer PlugIn von Grizzly
Was kann die Gallery?

Die Gallery zeigt die innerhalb eines Bestimmten HTML-Objektes befindlichen IMG-Tags (also die Bilder) in einer Slider-Gallery an. Dabei kann man die Bilder entweder einfach "nur so" anschauen, also erstes Bild, nächstes Bild, nächstes Bild, vorheriges Bild usw. Oder beim Klick auf ein Bild das Bild in einem JQuery UI Standart Dialog anzeigen lassen, welches dann größer angezeigt wird. Die Bilder werden mit dem von mir erstellten imageResizer skaliert.

Die eigenschaften des Dialogs (Breite, Höhe, Größe änderbar, verschiebbar, modal) können ganz einfach über dir SBGallery Optionen verändert werden.

Wenn sich die Gallery (bzw. der HTML-Element) an der Breite ändert (z. B. in der CSS-Datei) dann werden die Bilder auch automatisch an die Box angepasst.

Wie kann ich die Galerie erstellen?

Da die Galerie ein JQuery PlugIn ist, ist es ganz leicht eine Galerie zu erstellen. Folgender Code wird dazu benötigt:

Javascript-Quelltext

1
2
3
4
$(document).ready(function()
 {
 $("#sbgallery").sbGallery({dialogWidth: 600,dialogHeight: 300});
 });


Welche Optionen können geändert/bestimmt/übergeben werden?

Folgende Optionen stehen zur verfügung:

  • dialogWidth: Die Breite des Dialoges. Je nachdem wie groß der Wert ist, wird auch das Bild (Bildbreite im Dialog) skalliert. (Default: 800)
  • dialogHeight: Die Höhe des Dialoges. Je nachdem wie groß der Wert ist, wird auch das Bild (Bildhöhe im Dialog) skalliert. (Default: 600)
  • modalDialog: Wenn Wert auf true, dann ist der Dialog modal (Im Hintergrund nichts anklickbar) wenn Wert auf false dann nicht modal. (Default: true)
  • resizeDialog: Wenn Wert auf true, dann ist der Dialog vom Benutzer skalierbar (größe des Dialogs veränderbar) wenn Wert auf false dann nicht skalierbar. (Default: false)
  • draggableDialog: Wenn Wert auf true, dann ist der Dialog vom Benutzer verschiebbar wenn Wert auf false dann nicht verschiebbar. (Default: false)
Kann ich mir die Galerie Live ansehen?

Ja! Ich habe die Galerie auf den Server geladen. Somit kann man eine Demo sehen. Es ist auch leichter alles anzuschauen, als sich den gesamten Text durchzulesen. Hier ist der Link:




Wo kann ich mir die Gallery runterladen?

Die Simple Base Gallery kann man sich im Download-Center von Base4u runterladen, oder einfach den folgenden Link klicken:


Grizzly

Administrator

  • »Grizzly« ist der Autor dieses Themas

Beiträge: 6 682

Aktivitätspunkte: 36 095

Wohnort: Lichtenau

Beruf: Anwendungsentwickler

  • Nachricht senden

2

Dienstag, 9. August 2011, 09:22

Darf ich vorstellen, die zweite und verbesserte Version von der Simple Base Gallery. Ich habe mich deshalb für "Version 2" entschieden und nicht für 1.1 oder ähnliches, weil die Gallery sich sehr stark geändert hat und auch um einiges verbessert wurde.

In der Version 2 werden nun unter der Galerie kleine Thumbnails angezeigt. So hat man einen Überblick welche Bilder es gibt und man kann jedes Bild explizit anklicken ohne auf die "vor" und "zurück" Buttons zu klicken. Die Thumbnails können auch ausgebelndet werden indem man die optionen showThumbs auf false setzt beim initialisieren der Galerie. Der Dialog passt sich nun selbst an den Inhalt an, somit ist freier/weißer Raum nicht mehr vorhanden. Außerdem kann man nun auch im Dialog die Bilder aus der Galerie komplett anschauen und nicht wie bisher nur das angeklickte Bild. Wenn die Thumbnails nicht ausgeschalten sind, so sind sie auch im Dialog vorhanden.

Außerdem verwendet die Galerie die neue und verbesserte Version des ImageResizers.

Ich habe euch eine Demo hochgeladen wo ihr das ganze anschauen könnt:

DEMO 1

DEMO 2

Dabei ist die erste Demo mit den Thumbnails und die Zweite ohne

Downloaden könnt Ihr euch das ganze hier:

DOWNLOAD

Feedback ist erwünscht ;)