Avatar billede meyer Nybegynder
01. juni 2011 - 20:52 Der er 7 kommentarer og
1 løsning

Hjælp til at få dette jquery script til at køre automatisk og loope

Jeg har dette jscript fra fra lynda.com - det kører en nyhedsrotation med billeder og tekst med navigationsknapper - men kan ikke få det til at afvikle automatisk, nogen der kan hjælpe?

$(document).ready(function(){

    // Generate Navigation links
    $('.marquee_panels .marquee_panel').each(function(index){
        $('.marquee_nav').append('<a class="marquee_nav_item" ></a>');
    });
   
    // Generate Photo Lineup
    $('img.marquee_panel_photo').each(function(index){
        var photoWidth = $('.marquee_container').width();
        var photoPosition = index * photoWidth;
        $('.marquee_photos').append('<img class="marquee_photo" style="left: '+photoPosition+'" src="'+$(this).attr('src')+'" alt="'+$(this).attr('alt')+'" width="700" height="350" />');
        $('.marquee_photos').css('width', photoPosition+photoWidth);
    });

    // Set up Navigation Links
    $('.marquee_nav a.marquee_nav_item').click(function(){
       
        // Set the navigation state
        $('.marquee_nav a.marquee_nav_item').removeClass('selected');
        $(this).addClass('selected');
       
        var navClicked = $(this).index();
        var marqueeWidth = $('.marquee_container').width();
        var distanceToMove = marqueeWidth*(-1);
        var newPhotoPosition = navClicked*distanceToMove + 'px';
        var newCaption = $('.marquee_panel_caption').get(navClicked);
       
        // Animate the photos and caption
        $('.marquee_photos').animate({left: newPhotoPosition}, 1000);
        $('.marquee_caption').animate({top: '340px'}, 500, function(){
            var newHTML = $(newCaption).html();
            $('.marquee_caption_content').html(newHTML);
            setCaption();
        });
    });
   
    // Preload all images, then initialize marquee
    $('.marquee_panels img').imgpreload(function(){
        initializeMarquee();
    });

});


function initializeMarquee(){
    $('.marquee_caption_content').html(
        $('.marquee_panels .marquee_panel:first .marquee_panel_caption').html()
    );
    $('.marquee_nav a.marquee_nav_item:first').addClass('selected');
    $('.marquee_photos').fadeIn(1500);
    setCaption();
}

function setCaption(){
    var captionHeight = $('.marquee_caption').height();
    var marqueeHeight = $('.marquee_container').height();
    var newCaptionTop = marqueeHeight - captionHeight - 15;
    $('.marquee_caption').delay(100).animate({top: newCaptionTop}, 500);
}
Avatar billede meyer Nybegynder
01. juni 2011 - 20:55 #1
Vil mene der skal noget SetInterval ind - men er ikke nogen ørn i javascript, så er totalt lost her :)
Avatar billede wanze Nybegynder
02. juni 2011 - 18:20 #2
Så vidt jeg kan se burde følgende initialisere dit script:
    $('.marquee_panels img').imgpreload(function(){
        initializeMarquee();
    });


Har du jQuery inkluderet i din head? Får du nogle fejl i konsollen? Eksisterer alle de elementer du referer til i din kildekode (klasserne)?
Avatar billede meyer Nybegynder
06. juni 2011 - 12:07 #3
Problemet er ikke at scriptet ikke virker - jeg vil bare gerne ha' det til at "rulle/starte" automatisk så det bare starter ved slide 1 og så efter x antal sekunder går videre til slide 2 osv - og så starter forfra når det når sidste slide.
Avatar billede wanze Nybegynder
06. juni 2011 - 13:15 #4
Det er jo ikke just nemt  at hjælpe med, når du hverken viser hvor den jQuery-kode kommer frem eller hvordan du har brugt den.
Avatar billede meyer Nybegynder
06. juni 2011 - 16:11 #5
Du kan se den her - som sagt den er fra en jquery tutorial fra Lynda.com:

http://www.danmeyer.dk/imgslider

Er der noget du mangler siger du bare til :)
Avatar billede wanze Nybegynder
06. juni 2011 - 20:23 #6
Det script er jo ikke lavet til at "køre automatisk". Hvis det dog er noget du gerne vil have, så kan du løse det ved manuelt at lave en JavaScript-timeout.
Avatar billede meyer Nybegynder
06. juni 2011 - 21:14 #7
Nej det er det ikke, det er det der er problemet ;) Han sluttede bare kurset med at sige "Så kan i selv bygge videre med en autorun" :D

Men har som sagt ikke meget styr på javascript, så kan du prøve at forklare hvad du mener? :)
Avatar billede meyer Nybegynder
22. april 2012 - 16:11 #8
:)
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