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

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

VPS Starter Arubacloud
0 głosów
129 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ź 622 wizyt
0 głosów
2 odpowiedzi 759 wizyt
0 głosów
1 odpowiedź 213 wizyt
pytanie zadane 19 maja 2017 w JavaScript przez niezalogowany

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 pasjonatów

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

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 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!

...