• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi
Zapytaj

przejście na następną strone i przefiltrowanie zdjęć po kliknięciu w guzik

Object Storage Arubacloud
0 głosów
131 wizyt
pytanie zadane 8 stycznia 2017 w JavaScript przez sapero Gaduła (4,100 p.)
Witam, jak w temacie:)

Chciałbym w galerii w której jest już filtrowanie zdjęć po kliknięciu w tag zrobić tak żeby z strony poprzedniej(zanim przejdzie do galerii) przefiltrowało mi już wybrane zdjęcia (np na same"owoce")kiedy załaduje galerie(bo tak to musze kliknąć na stronie w tag i dopiero przefiltruje). Reasumując klikam na stronie A w guzik który wywoła jakąś funkcje, następnie załaduję nową strone"galeriie zdjęć" i zasymuluję kliknięcie w tag "owoce" i zdjęcia zostaną pokazane z samymi owocami. Dodam że w galeri działa filtrowanie jednak pierwsze trzeba kliknąć w tag;)
 komentarz 8 stycznia 2017 przez Malinowski Początkujący (320 p.)
Możesz wrzucić gdzieś kod? Nie wiem czy dobrze rozumiem co dokładnie chcesz zrobić - na stronie nie będącej galerią chcesz kliknąć w guzik z tagiem, który przeniesie Cię do galerii i pokaże zdjęcia oznaczone tym tagiem, tak?
 komentarz 8 stycznia 2017 przez sapero Gaduła (4,100 p.) 
<div class="container wrapper">

			
			<div class="pull-right" style="margin-top:50px;margin-bottom:20px">
				<button class="btn btn-small btn-default" data-toggle="portfilter" data-target="all">
					ALL
				</button>
				<button class="btn btn-small xbtn-primary" data-toggle="portfilter" data-target="mirrors">
					Mirrors
				</button>
				<button class="btn btn-small xbtn-primary" data-toggle="portfilter" data-target="balustrades">
					Balustrades
				</button>
				<button class="btn btn-small xbtn-primary" data-toggle="portfilter" data-target="doors">
					Glass Doors
				</button>
				<button class="btn btn-small xbtn-primary" data-toggle="portfilter" data-target="front">
					Shop Front
				</button>
				<button class="btn btn-small xbtn-primary" data-toggle="portfilter" data-target="shelves">
					Shelves
				</button>
				<button class="btn btn-small xbtn-primary" data-toggle="portfilter" data-target="shower">
					Shower
				</button>
				<button class="btn btn-small xbtn-primary" data-toggle="portfilter" data-target="commercial">
					Commercial
				</button>
				<button class="btn btn-small xbtn-primary" data-toggle="portfilter" data-target="roof">
					Glass roof
				</button>
				<button class="btn btn-small xbtn-primary" data-toggle="portfilter" data-target="splashbacks">
					Splashbacks
				</button>
				<button class="btn btn-small xbtn-primary" data-toggle="portfilter" data-target="office">
					Office glass partition
				</button>
			</div>
			<div class="clearfix"></div>

<!-- wyświetla tu obraz up --> 
<div class="container">
        <ul class="row">
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">         
          <div class="modal-body">                
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
      
   </ul>
    </div>
     <!-- /.wyświetla tu obraz end-->
        
        
        <ul class="row"><galeria>
            <li class=" item pic col-lg-3 col-md-4 col-xs-6" style="padding-right:0px;padding-left:0px;margin-bottom:0px" data-tag='doors'>
               
                <img class="img-responsive" src="media/1.jpg"  >
                
            </li>
            <li class="item pic col-lg-3 col-md-4 col-xs-6" style="padding-right:0px;padding-left:0px;margin-bottom:0px" data-tag="doors">
               
                <img class="img-responsive" src="media/2.jpg"  >
            </li>
            <li class="item pic col-lg-3 col-md-4 col-xs-6" style="padding-right:0px;padding-left:0px;margin-bottom:0px" data-tag="balustrades">
               
                <img class="img-responsive" src="media/3.jpg"  >
            </li>
            <li class="item pic col-lg-3 col-md-4 col-xs-6" style="padding-right:0px;padding-left:0px;margin-bottom:0px" data-tag='balustrades'>
               
                <img class="img-responsive" src="media/5.jpg"  >
            </li>
            <li class="item pic col-lg-3 col-md-4 col-xs-6" style="padding-right:0px;padding-left:0px;margin-bottom:0px" data-tag='splashbacks'>
               
                <img class="img-responsive" src="media/6.jpg"  >
            </li>
            <li class="item pic col-lg-3 col-md-4 col-xs-6" style="padding-right:0px;padding-left:0px;margin-bottom:0px" data-tag='brand'>
               
                <img class="img-responsive" src="media/7.jpg"  >
            </li>
            <li class="item pic col-lg-3 col-md-4 col-xs-6" style="padding-right:0px;padding-left:0px;margin-bottom:0px" data-tag='brand'>
               
                <img class="img-responsive" src="media/8.jpg"  >
            </li>
            <li class="item pic col-lg-3 col-md-4 col-xs-6" style="padding-right:0px;padding-left:0px;margin-bottom:0px" data-tag='balustrades'>
               
                <img class="img-responsive" src="media/9.jpg"  >
            </li>
            <li class="item pic col-lg-3 col-md-4 col-xs-6" style="padding-right:0px;padding-left:0px;margin-bottom:0px" data-tag='brand'>
               
                <img class="img-responsive" src="media/10.jpg"  >
            </li>
            <li class="item pic col-lg-3 col-md-4 col-xs-6" style="padding-right:0px;padding-left:0px;margin-bottom:0px" data-tag='brand'>
               
                <img class="img-responsive" src="media/11.jpg"  >
            </li>
            <li class="item pic col-lg-3 col-md-4 col-xs-6" style="padding-right:0px;padding-left:0px;margin-bottom:0px" data-tag='brand'>
               
                <img class="img-responsive" src="media/12.jpg"  >
            </li>
            <li class="item pic col-lg-3 col-md-4 col-xs-6" style="padding-right:0px;padding-left:0px;margin-bottom:0px" data-tag='brand'>
               
                <img class="img-responsive" src="media/21.jpg"  >
            </li>
            <li class="item pic col-lg-3 col-md-4 col-xs-6" style="padding-right:0px;padding-left:0px;margin-bottom:0px" data-tag='mirrors'>
               
                <img class="img-responsive" src="media/14.jpg"  >
            </li>
            <li class="item pic col-lg-3 col-md-4 col-xs-6" style="padding-right:0px;padding-left:0px;margin-bottom:0px" data-tag='splashbacks'>
               
                <img class="img-responsive" src="media/15.jpg"  >
            </li>
            <li class="item pic col-lg-3 col-md-4 col-xs-6" style="padding-right:0px;padding-left:0px;margin-bottom:0px" data-tag='front'>
               
                <img class="img-responsive" src="media/16.jpg"  >
            </li>
            <li class="item pic col-lg-3 col-md-4 col-xs-6" style="padding-right:0px;padding-left:0px;margin-bottom:0px" data-tag='splashbacks'>
               
                <img class="img-responsive" src="media/17.jpg"  >
            </li>
            <li class="item pic col-lg-3 col-md-4 col-xs-6" style="padding-right:0px;padding-left:0px;margin-bottom:0px" data-tag='shower'>
               
                <img class="img-responsive" src="media/18.jpg"  >
            </li>
            <li class="item pic col-lg-3 col-md-4 col-xs-6" style="padding-right:0px;padding-left:0px;margin-bottom:0px" data-tag='brand'>
               
                <img class="img-responsive" src="media/19.jpg"  >
            </li>
            <li class="item pic col-lg-3 col-md-4 col-xs-6" style="padding-right:0px;padding-left:0px;margin-bottom:0px" data-tag='brand'>
               
                <img class="img-responsive" src="media/20.jpg"  >
            </li>
            <li class="item pic col-lg-3 col-md-4 col-xs-6" style="padding-right:0px;padding-left:0px;margin-bottom:0px" data-tag='brand'>
               
                <img class="img-responsive" src="media/13.jpg"  >
            </li>
            <li class="item pic col-lg-3 col-md-4 col-xs-6" style="padding-right:0px;padding-left:0px;margin-bottom:0px" data-tag='brand'>
               
                <img class="img-responsive" src="media/22.jpg"  >
            </li>
            <li class="item pic col-lg-3 col-md-4 col-xs-6" style="padding-right:0px;padding-left:0px;margin-bottom:0px" data-tag='balustrades'>
               
                <img class="img-responsive" src="media/23.jpg"  >
            </li>
            <li class="item pic col-lg-3 col-md-4 col-xs-6" style="padding-right:0px;padding-left:0px;margin-bottom:0px" data-tag='brand'>
               
                <img class="img-responsive" src="media/24.jpg"  >
            </li>
            <li class="item pic col-lg-3 col-md-4 col-xs-6" style="padding-right:0px;padding-left:0px;margin-bottom:0px" data-tag='brand'>
               
                <img class="img-responsive" src="media/25.jpg"  >
                </li>
                <li class="item pic col-lg-3 col-md-4 col-xs-6" style="padding-right:0px;padding-left:0px;margin-bottom:0px" data-tag='brand'>
               
                <img class="img-responsive" src="media/26.jpg"  >
            </li>
            <li class="item pic col-lg-3 col-md-4 col-xs-6" style="padding-right:0px;padding-left:0px;margin-bottom:0px" data-tag='balustrades'>
               
                <img class="img-responsive" src="media/27.jpg"  >
            </li>
            <li class="item pic col-lg-3 col-md-4 col-xs-6" style="padding-right:0px;padding-left:0px;margin-bottom:0px" data-tag='balustrades'>
               
                <img class="img-responsive" src="media/28.jpg"  >
            </li>
            <li class="item pic col-lg-3 col-md-4 col-xs-6" style="padding-right:0px;padding-left:0px;margin-bottom:0px" data-tag='shower'>
               
                <img class="img-responsive" src="media/29.jpg"  >
                </li>
                <li class="item pic col-lg-3 col-md-4 col-xs-6" style="padding-right:0px;padding-left:0px;margin-bottom:0px" data-tag='front'>
               
                <img class="img-responsive" src="media/30.jpg"  >
                </li>
                <li class="item pic col-lg-3 col-md-4 col-xs-6" style="padding-right:0px;padding-left:0px;margin-bottom:0px" data-tag='shelves'>
               
                <img class="img-responsive" src="media/31.jpg"  >
            </li>
            <li class="item pic col-lg-3 col-md-4 col-xs-6" style="padding-right:0px;padding-left:0px;margin-bottom:0px" data-tag='shelves'>
               
                <img class="img-responsive" src="media/32.jpg"  >
            </li>
            <li class="item pic col-lg-3 col-md-4 col-xs-6" style="padding-right:0px;padding-left:0px;margin-bottom:0px" data-tag='mirrors'>
               
                <img class="img-responsive" src="media/33.jpg"  >
            </li>
            <li class="item pic col-lg-3 col-md-4 col-xs-6" style="padding-right:0px;padding-left:0px;margin-bottom:0px" data-tag='commercial'>
               
                <img class="img-responsive" src="media/34.jpg"  >
                </li>
                 <li class="item pic col-lg-3 col-md-4 col-xs-6" style="padding-right:0px;padding-left:0px;margin-bottom:0px" data-tag='brand'>
               
                <img class="img-responsive" src="media/35.jpg"  >
            </li>
            <li class="item pic col-lg-3 col-md-4 col-xs-6" style="padding-right:0px;padding-left:0px;margin-bottom:0px" data-tag='commercial'>
               
                <img class="img-responsive" src="media/36.jpg"  >
            </li>
            <li class="item pic col-lg-3 col-md-4 col-xs-6" style="padding-right:0px;padding-left:0px;margin-bottom:0px" data-tag='commercial'>
               
                <img class="img-responsive" src="media/37.jpg"  >
            </li>
            <li class="item pic col-lg-3 col-md-4 col-xs-6" style="padding-right:0px;padding-left:0px;margin-bottom:0px" data-tag='brand'>
               
                <img class="img-responsive" src="media/38.jpg"  >
                </li>
                <li class="item pic col-lg-3 col-md-4 col-xs-6" style="padding-right:0px;padding-left:0px;margin-bottom:0px" data-tag='brand'>
               
                <img class="img-responsive" src="media/39.jpg"  >
            </li>
            <li class="item pic col-lg-3 col-md-4 col-xs-6" style="padding-right:0px;padding-left:0px;margin-bottom:0px" data-tag='mirrors'>
               
                <img class="img-responsive" src="media/40.jpg"  >
            </li>
            <li class="item pic col-lg-3 col-md-4 col-xs-6" style="padding-right:0px;padding-left:0px;margin-bottom:0px" data-tag='office'>
               
                <img class="img-responsive" src="media/41.jpg"  >
                </li>
                <li class="item pic col-lg-3 col-md-4 col-xs-6" style="padding-right:0px;padding-left:0px;margin-bottom:0px" data-tag='mirrors'>
               
                <img class="img-responsive" src="media/42.jpg"  >
                </li>
                <li class="item pic col-lg-3 col-md-4 col-xs-6" style="padding-right:0px;padding-left:0px;margin-bottom:0px" data-tag='roof'>
               
                <img class="img-responsive" src="media/43.jpg"  >
                </li>
                <li class="item pic col-lg-3 col-md-4 col-xs-6" style="padding-right:0px;padding-left:0px;margin-bottom:0px" data-tag='roof'>
               
                <img class="img-responsive" src="media/44.jpg"  >
                </li>
                <li class="item pic col-lg-3 col-md-4 col-xs-6" style="padding-right:0px;padding-left:0px;margin-bottom:0px" data-tag='brand'>
               
                <img class="img-responsive" src="media/45.jpg"  >
                </li>
                <li class="item pic col-lg-3 col-md-4 col-xs-6" style="padding-right:0px;padding-left:0px;margin-bottom:0px" data-tag='mirrors'>
               
                <img class="img-responsive" src="media/46.jpg"  >
                </li>
                <li class="item pic col-lg-3 col-md-4 col-xs-6" style="padding-right:0px;padding-left:0px;margin-bottom:0px" data-tag='office'>
               
                <img class="img-responsive" src="media/47.jpg"  >
                </li>
          </galeria></ul>             
     <!-- /container --><div class="push"></div>
		</div>

to kod galerii i tam mam te tagi na początku doors,balustrades,brand,mirrrors itd.jak kliknę w ten tag to dopiero je poukłada ale to jest na stronie galerii. A ja chce kliknąć na innej stronie które przekieruje na stronę galerii i jak załaduje stronę z galerią to posortuje np. jak bym kliknął w "doors" tzn same zdjęcia z drzwiami

 komentarz 8 stycznia 2017 przez sapero Gaduła (4,100 p.) 
!function(d){var c="portfilter";var b=function(e){this.$element=d(e);this.stuff=d("[data-tag]");this.target=this.$element.data("target")||""};b.prototype.filter=function(g){var e=[],f=this.target;this.stuff.fadeOut("fast").promise().done(function(){d(this).each(function(){if(d(this).data("tag")==f||f=="all"){e.push(this)}});d(e).show()})};var a=d.fn[c];d.fn[c]=function(e){return this.each(function(){var g=d(this),f=g.data(c);if(!f){g.data(c,(f=new b(this)))}if(e=="filter"){f.filter()}})};d.fn[c].defaults={};d.fn[c].Constructor=b;d.fn[c].noConflict=function(){d.fn[c]=a;return this};d(document).on("click.portfilter.data-api","[data-toggle^=portfilter]",function(f){d(this).portfilter("filter")})}(window.jQuery);

a to js do sortowania w galeri

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
1 odpowiedź 675 wizyt
JS - Slider ze zdjęciami które po kliknięciu przekierowują na wybraną stronę
pytanie zadane 25 stycznia 2017 w JavaScript przez Paweł Kościelny Początkujący (360 p.)
0 głosów
2 odpowiedzi 769 wizyt
Wywoływanie funkcji PHP z kilkoma parametrami za pomocą a href
pytanie zadane 15 maja 2017 w HTML i CSS przez kocur1945 Początkujący (480 p.)
0 głosów
1 odpowiedź 218 wizyt
Błąd przy kliknięciu na a href - JQuery
pytanie zadane 19 maja 2017 w JavaScript przez niezalogowany

92,570 zapytań

141,422 odpowiedzi

319,643 komentarzy

61,958 pasjonatów

Kategorie pytań
Programowanie
Sprzęt komputerowy
Systemy operacyjne, programy
Sieci komputerowe
Hostingi, domeny, usługi
Urządzenia mobilne
Bezpieczeństwo, hacking
Rozwój zawodowy, nauka, praca
Egzaminy zawodowe
Matematyka, fizyka, logika
Grafika i multimedia
Ogłoszenia, zlecenia
Nasze projekty
Nasze poradniki
Sprawy forum
Offtop
Programowanie
C i C++ HTML i CSS JavaScript PHP SQL, bazy danych C# Java SPOJ Python Ruby Assembler Visual Basic Android, Swift, Symbian OpenGL, Unity Inne języki Algorytmy Systemy CMS Mikrokontrolery

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci

Snow Theme by Q2A Market
Powered by Question2Answer
...