Ręcznie dostosuj Eye-Able do swojej witryny

Dzięki samodzielnej konfiguracji możesz dostosować Eye-Able - poza konfiguratorem - do swojej witryny internetowej.

Źródła zdjęć :Dowolna własność intelektualna Ltd. Link do autora jest Simplex - Projektowanie stron internetowych w Sydney 

W przypadku samodzielnej konfiguracji, można dostosować Eye-Able – poza konfiguratorem – do własnej strony internetowej. Zalety takiej personalizacji opisano w artykule „Jakie są zalety wstępnej personalizacji?”. Do przeprowadzenia tych personalizacji niezbędna jest zaawansowana znajomość HTML i CSS. Dlatego dla każdej strony internetowej oferujemy możliwość pełnego testowania i optymalizacji Eye-Able. Niektóre opcje tej personalizacji są jednak dostępne w dowolnym momencie dla użytkowników niezarządzanych Eye-Able. Dostępne ustawienia przedstawiono poniżej.

Uwaga: Poniższe konfiguracje stanowią jedynie podzbiór parametrów dostępnych w pełnej optymalizacji za pomocą Eye-Able.

Aby rozszerzyć konfigurację Eye-Able, należy dodać dodatkowe pary klucz-wartość do zmiennej eyeAble_pluginConfig. Przykładową konfigurację można znaleźć tutaj. (https://www.eye-able-cdn.com/example.js ).

Oprócz integracji konfiguracji bezpośrednio w linii, zmiany w konfiguracji Eye-Able można również wprowadzić za pomocą osobnej funkcji. Aby móc samodzielnie wprowadzać zmiany w konfiguracji, należy skorzystać z metody Metoda eyeAble_updateConfig() dlatego zaleca się:

<script type="text/javascript" >
    function eyeAble_updateConfig() {
        eyeAble_pluginConfig.topPosition = "200px"; //Verändere die Top-Position des Icons
        eyeAble_pluginConfig.maxMagnification = 10;
        if(eyeAble_pluginConfig.blacklistContrast){
            //append to the existing rules, otherwise they get overwritten
            eyeAble_pluginConfig.blacklistContrast += ".myClass";
        } else {
            eyeAble_pluginConfig.blacklistContrast = ".myClass";
        }
    }
</script>

Parametry, których nie należy zmieniać, można zakomentować.

Powiększenie:

Poniższe parametry służą ograniczeniu powiększenia:

• maksymalne powiększenie : [int] Opisuje maksymalne powiększenie (domyślnie: 21)

• maxMobileMagnification :[int] Opisuje maksymalne powiększenie urządzenia mobilnego (domyślnie: 3).

Pozycja:

Istnieją następujące parametry umożliwiające zmianę położenia ikony głównej:

• pozycja górna: [String] Ustawia górną pozycję ikony na pulpicie w % lub px (domyślnie: „10%”)

• prawa pozycja: [String] Ustawia prawą pozycję ikony na pulpicie w pikselach. Jeśli sidePosition jest ustawione na „left”, zostanie ustawiona lewa pozycja (domyślnie: „10px”).

• mobileBottomPosition :[String] Ustawia dolną pozycję ikony telefonu komórkowego w % lub px (domyślnie: „15%”).

• mobileRightPosition :[String] Ustawia właściwą pozycję ikony urządzenia mobilnego w px (domyślnie: „10px”).

• pozycja boczna : [String] Ustawia stronę, po której ikona pojawia się „po lewej” lub „po prawej” (domyślnie: „po prawej”)

Wygląd:

Istnieją następujące parametry umożliwiające zmianę wyglądu:

• mainIconAlt: [int] Zmień główną ikonę pomiędzy trzema wariantami: 0, 1 lub 2 (domyślnie: 0)

• Rozmiar ikony: [int] Zmień rozmiar ikony na pulpicie, zalecane wartości to 50-70 pikseli (domyślnie: 70px)

• mobileIconSize: [int] Zmień rozmiar ikony urządzenia mobilnego, zalecane wartości to 35–50 pikseli (domyślnie: 50px).

Czytnik ekranu:

Poniższe parametry można wykorzystać do modyfikacji klas CSS dostosowywania:

• customSrBlacklistCSS: [String] Zmienia klasę CSS dla elementów, które mają zostać wykluczone (domyślnie: eyeAble_SrSkip).

• niestandardowySrStartCSS: [String] Zmienia klasę CSS dla nowego elementu startowego (domyślnie: eyeAble_SrStart).

• niestandardowySrTextCSS: [String] Zmienia klasę CSS bloku, który ma zostać odczytany (domyślnie: eyeAble_SrText).

Wyklucz elementy z funkcji:

Poniższe parametry można wykorzystać do wykluczenia niektórych elementów z funkcji Eye-Able. Jest to przydatne w przypadku tekstu, który wyłania się z kontenera po powiększeniu, lub w przypadku elementów, których kolory nie powinny być dostosowywane przez kontrast lub tryb nocny. Elementy można zaznaczać za pomocą natywnych selektorów CSS. Więcej informacji Tutaj Selektory CSS rozdziela się przecinkami. Wyjątek dotyczy również wszystkich elementów potomnych wybranych elementów!

• czarna listaKontrast :[String] Wyklucz elementy z regulacji kolorów kontrastu lub trybu nocnego.

Np

• czarna listaRozmiar czcionki : [String] Wyklucz elementy z powiększenia czcionki.

Np

• forceWhiteBackground : [String] Wymusza białe tło, gdy włączony jest tryb nocny lub kontrastowy.