Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Bildauswahl funktioniert nicht richtig
#1
Guten Abend allerseits Blush 



ich habe mir, aufbauend auf dem brushed-template eine Webseite gebastelt: http://www.yunusart.com/

Während ich das HTML und CSS einigermaßen verstehe, hört es bei Java bei mir auf (und ich gehe davon aus, dass es hier ein Java-Problem ist?).
Ich verstehe überhaupt nicht, warum die dynamische Bildauswahl im ersten Teil "Surfboards" super funktioniert, in den anderen Kategorien (ab Boatbuilding) aber nicht mehr. Um das Problem zu verstehen, klickt doch einfach auf "Boatbuilding" und dann links in den Unterkategorien hin und her. Nichts passiert Sad


Danke schonmal und beste Grüße,

Yunus
Zitieren
#2
Hallo Yunus,

deine id "projects" ist das Ziel für deine isotope filter Funktion.
Das Problem ist dass man eine id nur einmal vergeben darf(du hast sie 3x vergeben).

Was du machen musst ist die anderen zwei ids "projects" aus deinem HTML Markup zu entfernen und durch andere ids zu ersetzten, dann musst du nur noch in deiner main.js unter dem Aufruf für die isotope funktion deine anderen ids angeben.

Konkret musst du in deiner index.html in Zeile 312 und 956 die ids abändern und die dann in der main.js bei "Filter Works" die ids in den isotope funktionsaufruf setzten.
Code:
/* ==================================================
  Filter Works
================================================== */

BRUSHED.filter = function (){
if($('#projects').length > 0){
var $container = $('#projects, #deineZweiteID, #deineDritteID');

Ich hoffe ich konnte weiterhelfen, wenn es nicht geklappt hat kannst du mich auch per pn anschreiben.

Viele Grüße
Max Spies
Zitieren
#3
Shocked 
Hallo Max,

vielen vielen Dank für deine Hilfe, die Bildauswahl funkioniert viel besser als vorher Smile .

Ich habe in dem Zuge gleich auch die anderen id's geändert die durch copy+paste vervielfacht und somit falsch waren: #thumbs, #filters und #options. Entsprechende Änderungen habe ich dann auch im main.css und main.js gemacht.

Nun springt aber leider der Bildschirm wenn man eine Subkategorie wählt (z.B. die letzte bei "Boatbuilding") nach ganz unten, während die Thumbs nach oben rutschen. Das ist ja nicht Sinn der Sache. Ich hoffe du verstehst was ich meine?

Und ich habe versucht einen logischen Fehler zu beseitigen, nämlich, dass beim Filtern durch eine Subkategorie auch die Thumbs der anderen zwei großen Kategorien ausgeblendet werden. An sich ist dies ja logisch, weil er alle Thumbs, die nicht gewählt wurden ausblendet. Schöner wäre es aber natürlich wenn nur die Hauptkategorie betroffen ist, in der man gerade ist.
Ich habe den Fehler hier vermutet und schon erfolglos versucht den data-option-key auf filter2 zu stellen:

Zitat: <!-- Filter -->
                   <nav id="options2" class="work-nav">
                       <ul id="filters2" class="option-set" data-option-key="filter2">
                                               <li class="type-work">Boatbuilding</li>
                           <li><a href="#filter2" data-option-value=".shelmalier">Shelmalier</a></li>
                           <li><a href="#filter2" data-option-value=".paulinette">Paulinette</a></li>
                           <li><a href="#filter2" data-option-value=".jany">Jany</a></li>
                          <li><a href="#filter2" data-option-value=".noelle">No&euml;lle</a></li>
                          <li><a href="#filter2" data-option-value=".mourenetta">Mourenetta</a></li>                  
                          <li><a href="#filter2" data-option-value=".famita">Famita</a></li>
                           <li><a href="#filter2" data-option-value=".elias">Elias</a></li>
                          <li><a href="#filter2" data-option-value=".vorpommern">Vorpommern</a></li>
                           <li><a href="#filter2" data-option-value=".jara">Victor Jara</a></li>
                           <li><a href="#filter2" data-option-value=".nordwind">Nordwind</a></li>                                  
                       </ul>
                   </nav>
                   <!-- End Filter -->

 



Hast du da einen Tip für mich?


Vielen Dank nochmal und beste Grüße,

Yunus
Zitieren
#4
Die Lösung war ganz einfach: Man nehme einfach zwei Klassen. Das sieht dann so aus:

<!-- Filter -->
<nav id="options3" class="work-nav">
<ul id="filters3" class="option-set" data-option-key="filter">
<li class="type-work">Carpentry</li>
<li><a href="#filter" data-option-value=".carp.table, .boards, .boats">Table Deck</a></li>
<li><a href="#filter" data-option-value=".carp.house, .boards, .boats">Façade</a></li>
<li><a href="#filter" data-option-value=".carp.sandbox, .boards, .boats">Sandbox</a></li>
<li><a href="#filter" data-option-value=".carp.letter, .boards, .boats">Letter Rack</a></li>
</ul>
</nav>
<!-- End Filter -->
</div>

<div class="span9">
<div class="row">
<section id="projects3">
<ul id="thumbs3">

<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 carp table">


Danke an ain01 Smile
Zitieren
#5
AN ALLE:

Eine ID ist einzigartig...

Eine Klasse kann mehrfach vergeben werden.

Ein echter "lieblingsfehler" :-)
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste