Forum PHP.pl > Dopasowanie slidera do szerokości ekranu z przycinaniem boków (nivo slider)

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Dopasowanie slidera do szerokości ekranu z przycinaniem boków (nivo slider)

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

eccocce

22.03.2013, 18:14:29

Hej,

Wrzuciłem sobie nivo slider na stronkę, ale zauważyłem, że ma on własność "resnposive", która nie jest dla mnie fajna w tym przypadku

Do slidera wrzucam zdjęcia o dużej rozdzielczości 1920x700 px, bo zależy mi, aby zajmowały cały ekran na szerokość.
W przypadku mniejszej rozdzielczości chciałbym, aby obrazki były przycinane po bokach przy założeniu, że min-width: 1000px

O ile udało mi się taki efekt uzyskać ustawiając obrazek jako background (position: center) dla div-a (width:100%; min-width: 1000px; - przy większej rozdzielczości div zajmuje 100% szerokości, a przy mniejszych, ale większych niż 1000px stosownie ucina boki, bo tło jest wyśrodkowane), to nie mogę sobie z tym poradzić, gdy obrazek jest podawany jako <img>

Macie jakiś pomysł, jak sobie z tym poradzić? Albo inny skrypt do slidera?

Do jutra daje sobie na wstrzymanie, może jakieś rozwiązanie przyjdzie do głowy samo.

Pozdrawiam!

fizzlebubble

22.03.2013, 20:34:47

Ten div pos:r, obrazki d:b, pos:a t:0, l:0, width i height 100% i bangla

eccocce

23.03.2013, 16:31:13

Cytat(fizzlebubble @ 22.03.2013, 20:34:47 )

Ten div pos:r, obrazki d:b, pos:a t:0, l:0, width i height 100% i bangla

A jakim cudem, to ma mi przyciąć obrazek po bokach?

Przytnie, być może, ale tylko z prawej strony

eyedropper

23.03.2013, 20:13:37

musisz to opakować kolejnym divem width:1000px który będzie miał overflow: hidden;

fizzlebubble

24.03.2013, 13:24:48

@up, dokładnie. Jeszcze możesz width tego diva wrapper określać za pomocą jQuery.

eccocce

5.04.2013, 13:02:30

Dzięki za próby pomocy.

Poprawne rozwiązanie znalazłem tutaj: http://stackoverflow.com/questions/9449165...both-sides?rq=1

Oczywiście należało trochę zmienić pod 1920px. Pełny kod:

[HTML] pobierz, plaintext 
<html>
    <head>
        <title></title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <style type="text/css">
            body {margin:0;padding:0;overflow:hidden;}
            img {width:1920px;height:680px;}
            div {
                margin: 0 0 0 -960px;
                height:680px;
                position: relative;
                left: 50%;
            }
        </style>
    </head>
    <body>
        <div><img src="s.png" alt="" /></div>
    </body>
</html>
[HTML] pobierz, plaintext

W miejscu <img> powinien znaleźć się slider.

Pozdrawiam.

PS: Prośba do administratora: proponuję zmienić nazwę wątku na "Dopasowanie slidera do szerokości ekranu z przycinaniem boków (nivo slider)".

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.