login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Heb hulp nodig met een dat-filter in collectie pagina

Offline coLd - 08/08/2011 19:55 (laatste wijziging 08/08/2011 20:18)
Avatar van coLdLid Kheb nu zegmaar een data-filter die hellemaal werkt maar nu wil ik dit via een menu aanroepen via mijn main-menu dus bijv. www.link.nl/collectie.html#action

hoe zou ik dit moeten doen?

code is

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <h1>Collectie's</h1>
  2.         <p>De volgende merken zitten in onze huidige collectie</p>
  3.  
  4.          <!-- Collectie -->
  5.             <div class="collectie">
  6.                 <ul id="collectie-filter" class="clearfix">
  7.                 <li><a data-filter="all" href="#">Alles</a></li>
  8.                 <li><a data-filter="Melli Mel" href="#">Melli Mel</a></li>
  9.                 <li><a data-filter="Zhenzi" href="#">Zhenzi</a></li>
  10.                 <li><a data-filter="X-two" href="#">X-two</a></li>
  11.                 <li><a data-filter="Yoek" href="#">Yoek</a></li>
  12.                 <li><a data-filter="Samm" href="#">Samm</a></li>
  13.                 <li><a data-filter="Zizzi" href="#">Zizzi</a></li>
  14.                 <li><a data-filter="Gozzip" href="#">Gozzip</a></li>
  15.                 <li><a data-filter="Crizpy" href="#">Crizpy</a></li>
  16.                 <li><a data-filter="DeLuca" href="#">DeLuca</a></li>
  17.                 </ul>
  18.                 <div class="collectie-filter-image">
  19.                     <ul>
  20.                         <li class="collectie-item" data-id="1" data-type="Melli Mel">
  21.                             <a class="collectie-thumb-link" href="images/Collectie/Photo/01.png" rel="collectie">
  22.                                 <img src="images/Collectie/Thumbs/01.png" alt="" />
  23.                             </a>
  24.                         </li>
  25.                     </ul>
  26.                 </div>
  27.             </div>


javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. jQuery(document).ready(function ($) {
  2. 	$('.gallery-collectie a.collectie-thumb-link').gallery({
  3. 		current: "Image {current} of {total}",
  4. 		onOpen: $.fullscreen.unbindKeyboard,
  5. 		onClosed: $.fullscreen.bindKeyboard
  6. 	});		
  7.  
  8. 	if ($('#collectie-filter').length) {		
  9. 		var $data = $('.collectie ul').clone();
  10.  
  11. 		$('#collectie-filter li a').click(function () {
  12. 			$('#collectie-filter li').removeClass('active-filter');
  13. 			var filter = $(this).data('filter');
  14.  
  15. 			if (filter == 'all') {
  16. 				var $filteredData = $data.find('li.collectie-item');
  17. 			} else {
  18. 				var $filteredData = $data.find('li.collectie-item[data-type="'+filter+'"]');
  19. 			}
  20.  
  21. 			$('.collectie ul').quicksand($filteredData, {
  22. 			    duration: 800,
  23. 			    easing: 'easeInOutQuad'
  24. 			}, function () {
  25. 				$('.gallery-collectie a.collectie-thumb-link').gallery({
  26. 					current: "Image {current} of {total}",
  27. 					onOpen: $.fullscreen.unbindKeyboard,
  28. 					onClosed: $.fullscreen.bindKeyboard
  29. 				});
  30. 			});
  31.  
  32. 			$(this).parent().addClass('active-filter');
  33. 			return false;
  34. 		});
  35. 	}
  36. });

5 antwoorden

Gesponsorde links
Offline pijke - 08/08/2011 20:03
Avatar van pijke Gouden medaille

Lid		 Iets duidelijker a.u.b.
en code graag in code tags.
Offline coLd - 08/08/2011 20:06
Avatar van coLd Lid ja zal het proberen maar meot me code van pc halen via usb enzo want me internet werk niet upc storing. en dan met laptop plaatsen bij buren zal even doen
Offline pijke - 08/08/2011 20:20
Avatar van pijke Gouden medaille

Lid		 Let a.u.b. iets meer op je taal. Ik kan er nauwelijks iets van maken.
Offline ThAlmighty - 08/08/2011 20:35
Avatar van ThAlmighty HTML beginner Je moet de hash (#) variabele parsen, dat kan ontzettend simpel namelijk:

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. var t = document.location.toString();
  2. if (t.match('#')) {
  3. var hash = t.split('#')[1];
  4. // Verder acties
  5. }


Vervolgens moet je dus de gewenste actie aanroepen, ondanks je belachelijk slechte uitleg denk ik dat dat als volgt moet:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. // .. code van hierboven
  2. $('.collectie ul').quicksand(hash, {
  3.                 duration: 800,
  4.                 easing: 'easeInOutQuad'
  5.             }, function () {
  6.                 $('.gallery-collectie a.collectie-thumb-link').gallery({
  7.                     current: "Image {current} of {total}",
  8.                     onOpen: $.fullscreen.unbindKeyboard,
  9.                     onClosed: $.fullscreen.bindKeyboard
  10.                 });
  11.             });
Offline coLd - 08/08/2011 20:42
Avatar van coLd Lid Bedankt zal proberen of het werkt. Sorry voor de slechte uitleg. Ik zat met me laptop bij de buren en kan daar niet zo goed mee omgaan. Maar upc heeft zojuist de storing van mijn internet opgelost dus kan weer op de computer.
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.184s