carlsenindex

Pondus er en tegneserie stribe fra norge som b.dk fik fingrene i i starten af 2012 og det var så min opgave at lave en fremviser med mulighed for at bladre igennem forrige striber og ikke kun dagens stribe.

Striberne uploades via min Uploader (Er en del af Webtools 2.0) hvor de samles i en gruppe. Der er så opsat et cron som hver nat køre en PHP-fil jeg har designet til at opdatere en XML-fil med alle udgivne striber frem til dags dato.

Det var vigtigt for mig at min fremviser passede så godt som muligt ind i b.dk's design og jeg valgte derfor at benytte mig af den billed karrusel som b.dk benytter sig af bla. på forsiden. Problemet med det karrusel script var at den loadede alle billeder ind med det samme, hvilket også er fint nok hvis der ikke er mere end 10 små billeder, men i mit tilfælde handler det im et billede hver dag et helt år (som tiden går selvfølgelig).

Derfor skrev jeg en lille funktion som kun loader de billeder som er synlige i karruselen:

$("#tc_pondus_nav").jcarousel({
  scroll: 4,
  wrap: 'both',
  // start er defineret et andet sted i det fulde script
  start: start,
  itemLoadCallback: {
    // kalder min funktion hver gang karrusellen aktiveres
    onBeforeAnimation: loadThumbs
  }
});

function loadThumbs(carousel, state) {
  // carousel.first og carousel.last indeholde position for det første og sidste billede der er synligt
  for (var i = carousel.first - 1; i <= carousel.last - 1; i++) {
    // Sikre mig at billedet ikke allerede er blevet loadet
    if ($('#tc_pondus_nav img').eq(i).attr("data-href")) {
      // sætter src til data-href som er den attr jeg gemmer den korrekte sti til billedet i
      $('#tc_pondus_nav img').eq(i).attr("src", $('#tc_pondus_nav img').eq(i).attr("data-href"));
      // fjerner data-href så jeg ikke forsøger at sætte src igen, hvis nu brugere bladre forfra
      $('#tc_pondus_nav img').eq(i).removeAttr("data-href")
    }
  }
}

Det færdige arbejde kan ses på b.dk/pondus.

Carlsenindex

Pondus