połączenie pluginów :: 4programmers.net

0
Witam,
robię stronę w bootstrapie.Chcę stworzyć podstronę z tabami z Bootstrapa (http://getbootstrap.com/javascript/#tabs) gdzie będą to kolumny i do tego chce dodać plugin filterable (http://www.newmediacampaigns.com/blog/a-jquery-plugin-to-create-an-interactive-filterable-portfolio-like-ours#zip) który będzie sortował zdjęcia.
wygląd w załączniku
Taby działają mi bardzo dobrze.Plugin filterable działa mi tylko w pierwszym tabie z jedną kolumną.Pozostałe zrobiłem tak samo więc nie wiem czemu nie działają i tutaj prosze o pomoc:) W ramach sprostowania nie działa mi sortowanie na w pozostałych tabach (2columns,3columns,4columns). Wrzucam cały kod z html.
<!-- ======================================================blog full width========================================= -->
<div class="container blog-post columns">
  	<div class="row">
    	<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">


				    	 <h2>Widok :</h2><!-- Nav tabs -->
				  <ul class="nav nav-tabs" role="tablist">
				    <li role="presentation" class="active"><a href="#1column" data-toggle="tab">1 column</a></li>
				    <li role="presentation"><a href="#2columns" data-toggle="tab">2 columns</a></li>
				    <li role="presentation"><a href="#3columns" data-toggle="tab">3 columns</a></li>
				    <li role="presentation"><a href="#4columns" data-toggle="tab">4 columns</a></li>
				  </ul>
				  <!-- Tab panes -->
				  <div class="tab-content">
<!--============================================== portfolio filter ==========================================================-->
<!-- 	    <ul id="portfolio-filter" class="meta nav nav-pills">
		    <li><a href="#all">All</a></li>
		    <li><a href="#animacja">Animacja</a></li>
		    <li><a href="#plakaty">Plakaty</a></li>
		    <li><a href="#fotografie">Fotografie</a></li>
		    <li><a href="#webdesign">WebDesign</a></li>
	    </ul> -->
<!--============================================== 1 column ==========================================================-->
				    <div role="tabpanel" class="tab-pane active fade in" id="1column">					
<ul id="portfolio-filter" class="meta nav nav-pills">
		    <li><a href="#all">All</a></li>
		    <li><a href="#animacja">Animacja</a></li>
		    <li><a href="#plakaty">Plakaty</a></li>
		    <li><a href="#fotografie">Fotografie</a></li>
		    <li><a href="#webdesign">WebDesign</a></li>
	    </ul>

				<div id="portfolio-list">
				    	<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 plakaty fotografie">
							<a href="http://dummyimage.com/800x600/737373/ffffff.gif" class="thumbnail zdjecie">
								<img src="http://dummyimage.com/350x300/737373/ffffff.gif" alt=""><h3>projekt</h3>
							</a>
				    	</div>
				    	<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 webdesign animacje">
							<a href="http://dummyimage.com/800x600/737373/ffffff.gif" class="thumbnail zdjecie">
								<img src="http://dummyimage.com/350x300/737373/ffffff.gif" alt=""><h3>projekt</h3>
							</a>
				    	</div>
			    		<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 plakaty animacja">
							<a href="http://dummyimage.com/800x600/737373/ffffff.gif" class="thumbnail zdjecie">
								<img src="http://dummyimage.com/350x300/737373/ffffff.gif" alt=""><h3>projekt</h3>
							</a>
			    		</div>

			    		<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 webdesign">
							<a href="http://dummyimage.com/800x600/737373/ffffff.gif" class="thumbnail zdjecie">
								<img src="http://dummyimage.com/350x300/737373/ffffff.gif" alt=""><h3>projekt</h3>
							</a>
				    	</div>
				    	<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 fotografie animacja webdesign">
							<a href="http://dummyimage.com/800x600/737373/ffffff.gif" class="thumbnail zdjecie">
								<img src="http://dummyimage.com/350x300/737373/ffffff.gif" alt=""><h3>projekt</h3>
							</a>
				    	</div>
			    		<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 plakaty">
							<a href="http://dummyimage.com/800x600/737373/ffffff.gif" class="thumbnail zdjecie">
								<img src="http://dummyimage.com/350x300/737373/ffffff.gif" alt=""><h3>projekt</h3>
							</a>
			    		</div>

			    		<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 animacja">
							<a href="http://dummyimage.com/800x600/737373/ffffff.gif" class="thumbnail zdjecie">
								<img src="http://dummyimage.com/350x300/737373/ffffff.gif" alt=""><h3>projekt</h3>
							</a>
				    	</div>
				    	<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 webdesign">
							<a href="http://dummyimage.com/800x600/737373/ffffff.gif" class="thumbnail zdjecie">
								<img src="http://dummyimage.com/350x300/737373/ffffff.gif" alt=""><h3>projekt</h3>
							</a>
				    	</div>
			    		<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 fotografie">
							<a href="http://dummyimage.com/800x600/737373/ffffff.gif" class="thumbnail zdjecie">
								<img src="http://dummyimage.com/450x300/737373/ffffff.gif" alt=""><h3>projekt</h3>
							</a>
			    		</div>
			    </div><!-- /portfolio-list -->	
			    	</div>
<!--============================================== 2 columns ==========================================================-->
				    <div role="tabpanel" class="tab-pane active fade in" id="2columns">
<ul id="portfolio-filter" class="meta nav nav-pills">
		    <li><a href="#all">All</a></li>
		    <li><a href="#animacja">Animacja</a></li>
		    <li><a href="#plakaty">Plakaty</a></li>
		    <li><a href="#fotografie">Fotografie</a></li>
		    <li><a href="#webdesign">WebDesign</a></li>
	    </ul>

				<div id="portfolio-list">
				    	<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 plakaty fotografie">
							<a href="http://dummyimage.com/800x600/737373/ffffff.gif" class="thumbnail zdjecie">
								<img src="http://dummyimage.com/350x300/737373/ffffff.gif" alt=""><h3>projekt</h3>
							</a>
				    	</div>
				    	<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 webdesign animacje">
							<a href="http://dummyimage.com/800x600/737373/ffffff.gif" class="thumbnail zdjecie">
								<img src="http://dummyimage.com/350x300/737373/ffffff.gif" alt=""><h3>projekt</h3>
							</a>
				    	</div>
			    		<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 plakaty animacja">
							<a href="http://dummyimage.com/800x600/737373/ffffff.gif" class="thumbnail zdjecie">
								<img src="http://dummyimage.com/350x300/737373/ffffff.gif" alt=""><h3>projekt</h3>
							</a>
			    		</div>

			    		<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 webdesign">
							<a href="http://dummyimage.com/800x600/737373/ffffff.gif" class="thumbnail zdjecie">
								<img src="http://dummyimage.com/350x300/737373/ffffff.gif" alt=""><h3>projekt</h3>
							</a>
				    	</div>
				    	<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 fotografie animacja webdesign">
							<a href="http://dummyimage.com/800x600/737373/ffffff.gif" class="thumbnail zdjecie">
								<img src="http://dummyimage.com/350x300/737373/ffffff.gif" alt=""><h3>projekt</h3>
							</a>
				    	</div>
			    		<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 plakaty">
							<a href="http://dummyimage.com/800x600/737373/ffffff.gif" class="thumbnail zdjecie">
								<img src="http://dummyimage.com/350x300/737373/ffffff.gif" alt=""><h3>projekt</h3>
							</a>
			    		</div>

			    		<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 animacja">
							<a href="http://dummyimage.com/800x600/737373/ffffff.gif" class="thumbnail zdjecie">
								<img src="http://dummyimage.com/350x300/737373/ffffff.gif" alt=""><h3>projekt</h3>
							</a>
				    	</div>
				    	<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 webdesign">
							<a href="http://dummyimage.com/800x600/737373/ffffff.gif" class="thumbnail zdjecie">
								<img src="http://dummyimage.com/350x300/737373/ffffff.gif" alt=""><h3>projekt</h3>
							</a>
				    	</div>
			    		<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 fotografie">
							<a href="http://dummyimage.com/800x600/737373/ffffff.gif" class="thumbnail zdjecie">
								<img src="http://dummyimage.com/450x300/737373/ffffff.gif" alt=""><h3>projekt</h3>
							</a>
			    		</div>
			    </div><!-- /portfolio-list -->	
			    	</div>
<!--============================================== 3 columns ==========================================================-->
					<div role="tabpanel" class="tab-pane fade" id="3columns">
<ul id="portfolio-filter" class="meta nav nav-pills">
		    <li><a href="#all">All</a></li>
		    <li><a href="#animacja">Animacja</a></li>
		    <li><a href="#plakaty">Plakaty</a></li>
		    <li><a href="#fotografie">Fotografie</a></li>
		    <li><a href="#webdesign">WebDesign</a></li>
	    </ul>

				<div id="portfolio-list">
				    	<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 plakaty fotografie">
							<a href="http://dummyimage.com/800x600/737373/ffffff.gif" class="thumbnail zdjecie">
								<img src="http://dummyimage.com/350x300/737373/ffffff.gif" alt=""><h3>projekt</h3>
							</a>
				    	</div>
				    	<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 webdesign animacje">
							<a href="http://dummyimage.com/800x600/737373/ffffff.gif" class="thumbnail zdjecie">
								<img src="http://dummyimage.com/350x300/737373/ffffff.gif" alt=""><h3>projekt</h3>
							</a>
				    	</div>
			    		<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 plakaty animacja">
							<a href="http://dummyimage.com/800x600/737373/ffffff.gif" class="thumbnail zdjecie">
								<img src="http://dummyimage.com/350x300/737373/ffffff.gif" alt=""><h3>projekt</h3>
							</a>
			    		</div>

			    		<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 webdesign">
							<a href="http://dummyimage.com/800x600/737373/ffffff.gif" class="thumbnail zdjecie">
								<img src="http://dummyimage.com/350x300/737373/ffffff.gif" alt=""><h3>projekt</h3>
							</a>
				    	</div>
				    	<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 fotografie animacja webdesign">
							<a href="http://dummyimage.com/800x600/737373/ffffff.gif" class="thumbnail zdjecie">
								<img src="http://dummyimage.com/350x300/737373/ffffff.gif" alt=""><h3>projekt</h3>
							</a>
				    	</div>
			    		<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 plakaty">
							<a href="http://dummyimage.com/800x600/737373/ffffff.gif" class="thumbnail zdjecie">
								<img src="http://dummyimage.com/350x300/737373/ffffff.gif" alt=""><h3>projekt</h3>
							</a>
			    		</div>

			    		<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 animacja">
							<a href="http://dummyimage.com/800x600/737373/ffffff.gif" class="thumbnail zdjecie">
								<img src="http://dummyimage.com/350x300/737373/ffffff.gif" alt=""><h3>projekt</h3>
							</a>
				    	</div>
				    	<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 webdesign">
							<a href="http://dummyimage.com/800x600/737373/ffffff.gif" class="thumbnail zdjecie">
								<img src="http://dummyimage.com/350x300/737373/ffffff.gif" alt=""><h3>projekt</h3>
							</a>
				    	</div>
			    		<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 fotografie">
							<a href="http://dummyimage.com/800x600/737373/ffffff.gif" class="thumbnail zdjecie">
								<img src="http://dummyimage.com/350x300/737373/ffffff.gif" alt=""><h3>projekt</h3>
							</a>
			    		</div>
			    </div><!-- /portfolio-list -->				
			    	</div>
<!--============================================== 4 columns ==========================================================-->
				    <div role="tabpanel" class="tab-pane fade" id="4columns">
<ul id="portfolio-filter" class="meta nav nav-pills">
		    <li><a href="#all">All</a></li>
		    <li><a href="#animacja">Animacja</a></li>
		    <li><a href="#plakaty">Plakaty</a></li>
		    <li><a href="#fotografie">Fotografie</a></li>
		    <li><a href="#webdesign">WebDesign</a></li>
	    </ul>

				<div id="portfolio-list">
				    	<div class="col-xs-6 col-sm-3 col-md-3 col-lg-3 plakaty fotografie">
							<a href="http://dummyimage.com/800x600/737373/ffffff.gif" class="thumbnail zdjecie">
								<img src="http://dummyimage.com/350x300/737373/ffffff.gif" alt=""><h3>projekt</h3>
							</a>
				    	</div>
				    	<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 webdesign animacje">
							<a href="http://dummyimage.com/800x600/737373/ffffff.gif" class="thumbnail zdjecie">
								<img src="http://dummyimage.com/350x300/737373/ffffff.gif" alt=""><h3>projekt</h3>
							</a>
				    	</div>
			    		<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 plakaty animacja">
							<a href="http://dummyimage.com/800x600/737373/ffffff.gif" class="thumbnail zdjecie">
								<img src="http://dummyimage.com/350x300/737373/ffffff.gif" alt=""><h3>projekt</h3>
							</a>
			    		</div>

			    		<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 webdesign">
							<a href="http://dummyimage.com/800x600/737373/ffffff.gif" class="thumbnail zdjecie">
								<img src="http://dummyimage.com/350x300/737373/ffffff.gif" alt=""><h3>projekt</h3>
							</a>
				    	</div>
				    	<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 fotografie animacja webdesign">
							<a href="http://dummyimage.com/800x600/737373/ffffff.gif" class="thumbnail zdjecie">
								<img src="http://dummyimage.com/350x300/737373/ffffff.gif" alt=""><h3>projekt</h3>
							</a>
				    	</div>
			    		<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 plakaty">
							<a href="http://dummyimage.com/800x600/737373/ffffff.gif" class="thumbnail zdjecie">
								<img src="http://dummyimage.com/350x300/737373/ffffff.gif" alt=""><h3>projekt</h3>
							</a>
			    		</div>

			    		<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 animacja">
							<a href="http://dummyimage.com/800x600/737373/ffffff.gif" class="thumbnail zdjecie">
								<img src="http://dummyimage.com/350x300/737373/ffffff.gif" alt=""><h3>projekt</h3>
							</a>
				    	</div>
				    	<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 webdesign">
							<a href="http://dummyimage.com/800x600/737373/ffffff.gif" class="thumbnail zdjecie">
								<img src="http://dummyimage.com/350x300/737373/ffffff.gif" alt=""><h3>projekt</h3>
							</a>
				    	</div>
			    		<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 fotografie">
							<a href="http://dummyimage.com/800x600/737373/ffffff.gif" class="thumbnail zdjecie">
								<img src="http://dummyimage.com/350x300/737373/ffffff.gif" alt=""><h3>projekt</h3>
							</a>
			    		</div>
			    </div><!-- /portfolio-list -->		
			    	</div><!-- /4column -->
				</div><!-- /tab -->
		</div><!-- /col-12 -->
	</div>
</div>
1
Ale ktos Ci powiedzial, ze atrybut id nie moze sie powtorzyc?
0
Dzięki za rozwiązanie problemu :)Musiałem jeszcze zmienić odwołanie w pliku (js) i wszystko śmiga:))
połączenie pluginów

1 użytkowników online, w tym zalogowanych: 0, gości: 1

Praca dla programistów

Forum dyskusyjne

Sprawy administracyjne

O nas

Skontaktuj się z nami
