Avatar billede hav0k Nybegynder
13. november 2012 - 02:19 Der er 1 kommentar

Slide-effekt med jQuery galleri

Hvordan får man integreret en iPad's swipe-bevægelse til at sætte gang i en slide-effekt til at skifte mellem billeder i et jQuery baseret galleri?

Jeg har en "fade" effekt, som jeg gerne vil beholde på alle non-touch devices. Funktionen ser således ud:

//gallery nav
        $('.prevPage').click(function(e){
            e.preventDefault();                         
            if(imgn > 0){
                $('.scrollable div:eq('+imgn+')').fadeOut(100, function(){
                    imgn--;
                    $('.scrollable div:eq('+imgn+')').fadeIn(100);
                });
            }else{
                $('.scrollable div:eq('+imgn+')').fadeOut(100, function(){
                    imgn=ni;
                    $('.scrollable div:eq('+imgn+')').fadeIn(100);
                });
            }
        });
       
        $('.nextPage').click(function(e){
            e.preventDefault();       
            if(imgn < ni){
                $('.scrollable div:eq('+imgn+')').fadeOut(100, function(){
                    imgn++;
                    $('.scrollable div:eq('+imgn+')').fadeIn(100);
                });
            }else{
                $('.scrollable div:eq('+imgn+')').fadeOut(100, function(){
                    imgn=0;
                    $('.scrollable div:eq('+imgn+')').fadeIn(100);
                });
            }
        })
        ;$('.scrollable div:eq(0)').show();
        $('.image').attr({height: bheight});

Alle billederne ligger i separate <div>'s og man kan skifte billede ved at kalde prevPage eller nextPage funktionen.

Hvordan kan jeg lave en lignende funktion, der laver en "slide" i stedet for? Altså så jeg ender med to funktioner: prevPage og prevPageslide, som jeg så kan kalde alt efter om der er tale om en tablet eller en desktop som læser galleriet.

Kildekoden kan findes her: http://www.uxhaus.com.au/gallery-demo/gallery-demo.zip

Er der nogen eksperter med et godt råd?
Avatar billede olebole Juniormester
13. november 2012 - 11:51 #1
<ole>

Det ville nok være hensigtsmæssigt at forholde sig til gamle tråde først  =)

/mvh
</bole>
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester