Elastislide - wie man es mit variierenden Bildbreiten macht

Question

Ich verwende Elastislide für einen Bildregler für eine Seite, an der ich gerade arbeite (http://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/).

Liebe das Plug-in und es funktioniert gut in dieser responsiven Website (Ich habe es geändert, um nur ein Bild auf einmal basierend auf dieser Antwort: elastislide move one at a time), aber ich würde auch gerne die JS ändern, so dass es arbeitet mit Bildern unterschiedlicher Breite.

Gegenwärtig wird itemSpace nach der ersten Bildbreite berechnet, und das funktioniert gut, wenn alle Bilder die gleiche Größe haben. Aber sobald Sie eine Reihe von Bildern alle mit unterschiedlichen Breiten einspannen, dann ist die Mathematik falsch und es rutscht in die falschen Positionen.

Ich habe versucht, mit verschiedenen Dingen in der JS zu spielen und ich kann es einfach nicht funktionieren.

Alle Vorschläge würden geschätzt, danke!

Answer 1

Das Problem, das Sie haben, ist das Plugin wird immer das erste Bild und verwenden Sie die Standardhöhe/Breite dafür.

Es gibt zwei Möglichkeiten, wie Sie das erreichen können.

1. Der einfache Weg Sie können alle Bilder auf die gleiche Größe die Größe neu (ob von Hand oder PHP/C# sein).

2. The Hard Way Seit _setItemsSize: function() (in js/jquery.elastislide.js) ist, wo der Code, der die Mathematik der Einrichtung ist, das ist, wo Sie es ändern können. Dieser Code wird jedoch nur einmal von der self.layout() im Konstruktor ($ .Elastislide.prototype = {) betroffen sein. Wenn Sie es so machen wollen, müssen Sie das (w) in der setItemsSize ändern und die beste zu verwendende Breite% berechnen.

Allerdings würde ich vorschlagen, erneut Sizing Ihre Bilder über die Mathematik verwirren, nur weil das wird Ihnen die schnellste Ergebnis erhalten und Sie können weitermachen und kommen später darauf zurück, wenn Sie Zeit in Ihrem Entwicklungszyklus .