Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> Dopasowanie slidera do szerokości ekranu z przycinaniem boków (nivo slider), nie "responsive"
eccocce
post 22.03.2013, 18:14:29
Post #1





Grupa: Zarejestrowani
Postów: 165
Pomógł: 5
Dołączył: 10.07.2008
Skąd: Wrocław

Ostrzeżenie: (0%)
-----


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 smile.gif

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> sad.gif 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!
Powód edycji: [Daiquiri]: Na życzenie ;-)
Go to the top of the page
+Quote Post
fizzlebubble
post 22.03.2013, 20:34:47
Post #2





Grupa: Zarejestrowani
Postów: 272
Pomógł: 28
Dołączył: 13.02.2011

Ostrzeżenie: (0%)
-----


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


--------------------
Nie obrażę się, jeśli za udzieloną pomoc odwdzięczysz się klikając w "Pomógł" :).
Go to the top of the page
+Quote Post
eccocce
post 23.03.2013, 16:31:13
Post #3





Grupa: Zarejestrowani
Postów: 165
Pomógł: 5
Dołączył: 10.07.2008
Skąd: Wrocław

Ostrzeżenie: (0%)
-----


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 smile.gif.

A jakim cudem, to ma mi przyciąć obrazek po bokach? tongue.gif
Przytnie, być może, ale tylko z prawej strony sad.gif
Go to the top of the page
+Quote Post
eyedropper
post 23.03.2013, 20:13:37
Post #4





Grupa: Zarejestrowani
Postów: 9
Pomógł: 0
Dołączył: 30.04.2006

Ostrzeżenie: (0%)
-----


musisz to opakować kolejnym divem width:1000px który będzie miał overflow: hidden;
Go to the top of the page
+Quote Post
fizzlebubble
post 24.03.2013, 13:24:48
Post #5





Grupa: Zarejestrowani
Postów: 272
Pomógł: 28
Dołączył: 13.02.2011

Ostrzeżenie: (0%)
-----


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


--------------------
Nie obrażę się, jeśli za udzieloną pomoc odwdzięczysz się klikając w "Pomógł" :).
Go to the top of the page
+Quote Post
eccocce
post 5.04.2013, 13:02:30
Post #6





Grupa: Zarejestrowani
Postów: 165
Pomógł: 5
Dołączył: 10.07.2008
Skąd: Wrocław

Ostrzeżenie: (0%)
-----


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:

  1. <head>
  2. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  3. <style type="text/css">
  4. body {margin:0;padding:0;overflow:hidden;}
  5. img {width:1920px;height:680px;}
  6. div {
  7. margin: 0 0 0 -960px;
  8. height:680px;
  9. position: relative;
  10. left: 50%;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <div><img src="s.png" alt="" /></div>
  16. </body>
  17. </html>


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)".

Ten post edytował eccocce 5.04.2013, 13:06:11
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 4.05.2025 - 08:42