bodo92
Aktives Mitglied
Hallo, habe mir eine einfache kleine Bildergalerie mit JQuery und dem Bootstrap Modal erstellt.
Um das Bild optimal in die Fenstergröße einzupassen errechne ich über das Seitenverhältnis des Bildes die benötigte Breite des Modals.
Folgendes Problem:
Mein JavaScript Objekt:
Meine JQuery Event-Listener:
EDIT:
Danke Vorab :)
Um das Bild optimal in die Fenstergröße einzupassen errechne ich über das Seitenverhältnis des Bildes die benötigte Breite des Modals.
Folgendes Problem:
Wird das erste Thumbnail geklickt öffnet sich die Galerie aber der Event-Listener der auf das Bild hört feuert nicht!
Wenn ich jedoch blättere wird die selbe Methode aufgerufen wie beim ersten klicken, hier wird die Größe des Modals jetzt wie gewünscht verändert.
Wenn ich jedoch blättere wird die selbe Methode aufgerufen wie beim ersten klicken, hier wird die Größe des Modals jetzt wie gewünscht verändert.
Mein JavaScript Objekt:
Hier wird in Zeile 9 der Listener auf das Bild gelegt dieser soll auslösen wenn die neu gesetzte Source geladen ist..
Code:
function Gallery() {
this.images = [];
this.count = 0;
this.pointer = 0;
this.show = function() {
var picture = $("#gallery-picture");
var modal = $("#gallery .modal-dialog");
picture.one("load", function() {
var window_height = window.innerHeight;
var window_width = window.innerWidth;
var img_ratio = picture.width() / picture.height();
if ((window_height - 10) * img_ratio > window_width) {
modal.css({width: window_width - 10});
} else {
modal.css({width: (window_height - 10) * img_ratio});
}
}).attr("src", this.images[this.pointer]);
$("#gallery-pointer").text(this.pointer + 1);
$("#gallery-count").text(this.count);
};
this.init = function (images, image) {
this.images = images;
this.count = images.length;
this.pointer = $.inArray(image, this.images);
this.show();
};
this.next = function() {
if (this.pointer < this.count - 1) {
this.pointer++;
} else {
this.pointer = 0;
}
this.show();
};
this.prev = function() {
if (this.pointer > 0) {
this.pointer--;
} else {
this.pointer = this.count - 1;
}
this.show();
};
}
var galerie = new Gallery();Meine JQuery Event-Listener:
Code:
$(".img-thumbnail").click(function() {
var image = $(this).attr("src");
var images = $(this).parent().find("img").map(function(){
return $(this).attr('src')
}).get();
galerie.init(images, image);
$("#gallery").modal("show");
});
$("#gallery-next").click(function() {
galerie.next();
});
$("#gallery-prev").click(function() {
galerie.prev();
});
$("#gallery-close").click(function() {
$("#gallery").modal("hide");
});EDIT:
Hier noch der Link.. http://feuerwehr.ebelmxi.de/einsaetze/details/7
Danke Vorab :)
Zuletzt bearbeitet:
