Jump to content

Photo
- - - - -

pgwSlider.js - zmiana obrazków miniatur (mobilna wersja) na input["radio"]

Rozpoczął Snake_, Apr 06 2016 22:16

Best Answer przemoo83, 06 April 2016 - 23:44

Najprościej chyba jakiś skrypt do tego napisać ale jak ma być przede wszystkim na mobilne to lepiej i wydajniej w samym CSS. Bazując na podstawowym przykładzie można taki trick zrobić:

https://jsfiddle.net...moo83/erqnfco1/

@media only screen and (max-width: 480px) {
    ul.ps-list li > img, ul.ps-list li a > img  {
        display: none;
    }
    ul.ps-list li > span, ul.ps-list li a > span{
      display: block;
      width: 5px!important;
      height: 5px;
      border-radius: 50%;
      color: transparent;
    }
  }

Wtedy zaznaczanie aktywnego zdjęcia działa bo zostawiasz oryginalny element <span>. No ale jak to ma być radio button to nie widzę innej opcji jak podmienić to w JS.

Go to the full post


3 replies to this topic
  • Please log in to reply
Snake_

    Nowy użytkownik

  • 18 posts
    • Czas spędzony online: 1d 1h 42m 14s
3
Neutralna

Posted 06 April 2016 - 22:16

#1

Cześć,

Od paru dni borykam się z takim problemem, gdyż na wersji mobilnej wyświetlają się obrazki, z resztą jak wszędzie indziej (chodzi o miniatury zdjęć ze slidera). Na większej rozdzielczości tak ma być, tylko przychodzę do Was z taką kwestią, jak zrobić, aby zamiast obrazków na razdzielczości >= 480 wyświetlało się to w inpucie (radio, albo cokolwiek innego, w CSSie już sobie dostosuję...) *dynamicznie zaznaczałoby aktywne zdjęcie?

 

Slider:

https://github.com/Pagawa/PgwSlider

 

Pozdrawiam! :)


  • 0
przemoo83

    Stary wyjadacz

  • PipPipPip
  • 316 posts
    • Czas spędzony online: 24d 21h 32m 26s
46
Bardzo dobra

Posted 06 April 2016 - 23:44   Best Answer

#2

Najprościej chyba jakiś skrypt do tego napisać ale jak ma być przede wszystkim na mobilne to lepiej i wydajniej w samym CSS. Bazując na podstawowym przykładzie można taki trick zrobić:

https://jsfiddle.net...moo83/erqnfco1/

@media only screen and (max-width: 480px) {
    ul.ps-list li > img, ul.ps-list li a > img  {
        display: none;
    }
    ul.ps-list li > span, ul.ps-list li a > span{
      display: block;
      width: 5px!important;
      height: 5px;
      border-radius: 50%;
      color: transparent;
    }
  }

Wtedy zaznaczanie aktywnego zdjęcia działa bo zostawiasz oryginalny element <span>. No ale jak to ma być radio button to nie widzę innej opcji jak podmienić to w JS.


  • 1
unbreak

    WT Elite

  • 1937 posts
    • Czas spędzony online: 27d 8h 43m 36s
506
Znakomita!
  • Location/home/unbreak

Posted 07 April 2016 - 07:31

#3

A czemu zależy Ci to żeby to było w inpucie? Może jak poznamy powód będzie łatwiej to ogarnąć.

 

Ja bym to odpowiednio ostylował po prostu. Img dał display none, później li odpowiednio ostylował żeby wyglądał jak zwykły element i dął mu bg jakiegoś niby własnie radio buttona :)


  • 0

webDeveloper

Snake_

    Nowy użytkownik

  • 18 posts
    • Czas spędzony online: 1d 1h 42m 14s
3
Neutralna

Posted 07 April 2016 - 16:49

#4

@przemoo83 - dzięki wielkie, o to chodziło. Sam myślałem nad CSS, ale jakoś nie skojarzyłem faktów :)

@unbreak - powodu żadnego nie ma, dlaczego chcę użyć input'a, sam napisałem w temacie, że może być rozwiązanie w CSS.

 

Nie mniej jednak uprzejmie dziękuję.


  • 0
Back to Javascript



Podone tematy Collapse

  Topic Forum Started By Stats Last Post Info

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users