Archief - Image Gallery

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
S

Shigato

Legacy Member
Hey, ik ben aan een projectje bezig en heb een slideshow gemaakt in javascript.
Nu wil ik deze natuurlijk nog wat verbeteren.

Ik leg even snel uit hoe ik het gedaan heb.
Ik heb een aantal afbeeldingen in een mapje staan,
met als naam een nummer.
Standaard staat er in de html als source bv 1

wanneer er op de pijltjes gedrukt wordt verhoogt de teller in men javascript met 1 en veranderd het de source van de afbeelding.

Code: 
var imagenr = 1;

$("div.leftslide").click(function(){
    if(imagenr > 1){
        imagenr--;
        $("img.fullscreen").attr('src', 'img/photos/' + imagenr + '.jpg');
    } else {
        // total number of images in folder
        imagenr = 12;
        $("img.fullscreen").attr('src', 'img/photos/' + imagenr + '.jpg');
    }
});

Nu is mijn vraag, als de afbeelding verspringt is het nogal ja..
Laat ons zeggen, geen mooie overgang.
Daarom wou ik gebruik maken van de jquery slideDown()
maar hoe moet dit nu precies in deze code?

Code: 
$("img.fullscreen").attr('src', 'img/photos/' + imagenr + '.jpg').slideDown("slow");

Dit stukje werkt alvast niet, iemand een idee?
W

W0utR

Legacy Member
Waarom gebruik je niet gewoon een bestaande plugin? Iets als Cycle2 is vrij makkelijk te installeren en werkt out of the box.

Je voorbeeld werkt bij mij eigenlijk niet, afbeeldingen veranderen gewoon niet.
w

woony

Legacy Member
dit is een leuk voorbeeldje.
jQuery Howto: Replacing images at time intervals

je zult dus ook beter zoals hier , al je images al laden, en hiden via css. aldan niet in een <li> zoals de meeste sliders wel gemaakt worden.
dan kun je mooie transities maken, anders zul je sowieso 'jumps' hebben door dat die image nog geladen moet worden.
a

adrianhates

Legacy Member
W0utR zei:
Waarom gebruik je niet gewoon een bestaande plugin? Iets als Cycle2 is vrij makkelijk te installeren en werkt out of the box.

Je voorbeeld werkt bij mij eigenlijk niet, afbeeldingen veranderen gewoon niet.
Klik om te vergroten...

Iedere serieuze developer moet vantijd al wel is iet zelf maken, ook al is er al iets voorhanden. dus ik kan het alleen maar aanmoedingen!
W

W0utR

Legacy Member
adrianhates zei:
Iedere serieuze developer moet vantijd al wel is iet zelf maken, ook al is er al iets voorhanden. dus ik kan het alleen maar aanmoedingen!
Klik om te vergroten...

Volledig mee eens, maar je moet ook het warm water niet opnieuw uitvinden, soms is het net ietsje gemakkelijker om plugins te gebruiken.
S

Shigato

Legacy Member
Super! Bedankt allemaal. Ik denk dat ik hier mee voort kan.
S

Shigato

Legacy Member
woony zei:
dit is een leuk voorbeeldje.
jQuery Howto: Replacing images at time intervals

je zult dus ook beter zoals hier , al je images al laden, en hiden via css. aldan niet in een <li> zoals de meeste sliders wel gemaakt worden.
dan kun je mooie transities maken, anders zul je sowieso 'jumps' hebben door dat die image nog geladen moet worden.
Klik om te vergroten...

Naar dit heb ik gekeken en lijkt me niet zo'n goed idee.
Alle afbeeldingen zijn nog al groot van formaat aangezien ze bijna de hele achtergrond van de website vormen.

Als ik al deze afbeeldingen eerst moet laten laden door ze in de html te zetten
krijg ik laad tijden die niet al te mooi gaan zijn. Het puntje van met css te werken heeft me wel een ideetje gegeven.

Ik zou per overgang het zelfde kunnen blijven doen maar dan werken met de css opacity.
Ik kijk eerste even naar die cyle2 plugin, maar alvast bedankt voor het idee!
S

Shigato

Legacy Member
W0utR zei:
Waarom gebruik je niet gewoon een bestaande plugin? Iets als Cycle2 is vrij makkelijk te installeren en werkt out of the box.

Je voorbeeld werkt bij mij eigenlijk niet, afbeeldingen veranderen gewoon niet.
Klik om te vergroten...

Bedankt! Werkt perfect.
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan