Elastislide - jak sprawić, by działał z różnymi szerokościami obrazu

Question

Używam Elastislide do suwaka obrazu dla witryny, nad którą pracuję (http://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/).

Uwielbiam wtyczkę i działa dobrze w tej responsywnej witrynie (zmodyfikowałem ją tak, aby przesuwać tylko jeden obraz na raz w oparciu o tę odpowiedź: elastislide move one at a time), ale chciałbym również zmodyfikować JS tak, aby działa z obrazami o różnych szerokościach.

Obecnie itemSpace jest obliczany zgodnie z pierwszą szerokością obrazu, co działa dobrze, jeśli wszystkie obrazy mają ten sam rozmiar. Ale gdy tylko rzucisz w garść obrazów o różnych szerokościach, matematyka jest zła i przesuwa się w niewłaściwą pozycję.

Próbowałem grać z różnymi rzeczami w JS i po prostu nie mogę tego uruchomić.

Wszelkie sugestie będą mile widziane, dziękuję!

Answer 1

Problem w tym, że wtyczka zawsze bierze pierwsze zdjęcie i używa domyślnej wysokości/szerokości.

Można to zrobić na dwa sposoby.

1. Easy Way Można ponownie rozmiar wszystkich obrazów na tej samej wielkości (czy to ręcznie lub PHP/C#).

2. The Hard Way Od _setItemsSize: function() (w JS/jquery.elastislide.js) gdzie który jest w trakcie tworzenia matematyki jest kod, to gdzie można go zmodyfikować. Jednak ten kod zostanie trafiony tylko raz, z self.layout() w konstruktorze ($ .Elastislide.prototype = {). Jeśli zamierzasz to zrobić w ten sposób, musisz zmodyfikować (w) w setItemsSize i opracować najlepszą szerokość, której należy użyć.

Jednak chciałbym sugerować ponownego zaklejania obrazów nad brudząc z matematyki, tylko dlatego, że będzie Ci najszybszy wynik i można przejść i wrócić do tego później, jeśli masz czas w swoim cyklu rozwojowym .