Slideshow efekt – JavaScript, AJAX, jQuery – Fórum – Programujte.com

Zdravím, mám takový problém.

Dělám slideshow do headeru, a vznikl mi níže uvedený kód.

Jelikož vypisuji slideshow z DB, neják se mi nedařilo použít žádný pluigin na to. Taky je zde specifický design, který bohužel nemohu změnit.

Problém je, že potřebuju použít efekt plynulého přechodu. 

Inspiroval jsem se zde: http://jonraasch.com/blog/a-simple-jquery-slideshow celkem simple, ale problém je že last-image není u přechozího obrázku ale pouze u následujícího, takže to u tlačítek nefunguje jak by mělo.

Potřeboval bych tedy asi spíš teoreticky poradit, jak by to mělo fungovat, aby byl automaticky efekt plynulého přechodu + přepínání u tlačítek.

Kdyby mi někdo doplnil kód byl bych mnohem radši, protože už jsem nad tím strávil několik hodin a nemyslími to. Děkuji mnohokrát.

        <script type="text/javascript">
         $("div#pagging_field span:first").addClass("active");
         $("div#slides div:first").addClass("active");

            function rotate(){
              $("div#pagging_field span").removeClass('active');
              $("div#slides div.images_slide").removeClass('active');
              
              $active_images.addClass('active');
              $active.addClass('active'); 
            }; 
        
            function rotateSwitch(){
                play = setInterval(function(){ 
                    $active = $('div#pagging_field span.active').next();
                    $active_images = $("div#slides div.active").next();
                    if ( $active.length === 0 && $active_images.length === 0) { 
                        $active = $('div#pagging_field span:first'); 
                        $active_images = $("div#slides div:first");
                    }
                    rotate(); 
                }, 5000); 
            };
            rotateSwitch();
            
            $("div#slideshow").mouseenter(function(){
              clearInterval(play);
            }).mouseleave(function(){
              rotateSwitch();
            });

            $("div#pagging_field span").click(function() {
              $active = $(this); 
              if($(this).attr('class') != "active"){
                $active_images = $("div.images_slide[rel='" + $active.attr("rel") + "']").addClass('active');
                rotate();
                return false;
              }
            });
        </script>

Abych to dovysvětlil, funguje to tak že se provede smazání classu, kde je z-index. pak se přiřadí, pak je časovač, pak se smaže a přidá se next. Pak je stop interval u najetí a potom u tlačítka podle relu add class active kde je onen z-index.

Zdravim :)

muzes prosim postnout link s ukazkou tveho kodu? (jako i html a css, jenom s tim JS kodem si nevystacim :) )

nekolik slideshow sem jiz delal tak bychom to mohli dat nejak dohromady .. jen potrebuji ten kod, abych vedel presne co mas a co presne chces :)

Jinak delal sem slideshow napr. zde:

http://www.lipno.info/

Dík za zprávu a info :)

tady je script:

<script type="text/javascript">
function rotate(){
  $("div#pagging_field span").removeClass('active');
  $active.addClass('active');
  makeFade();
}; 
function rotateSwitch(){
    play = setInterval(function(){ 
        $active = $('div#pagging_field span.active').next();
        if ( $active.length === 0 ) { 
            $active = $('div#pagging_field span:first'); 
        }
        rotate(); 
    }, 5000); 
};
var slideTemp = new Array();
var slideCount = 0;
var slideCurrent = 0;
function slideNumber() {
  // pocitatko pro pohyb v poli
  slideCurrent = slideCurrent + 1;
  if(slideCurrent > slideCount) {
    slideCurrent = 0;
  }
  return slideCurrent;
}
function makeFade() {
  c = slideNumber();
  // vlozeni noveho slide za aktuálně zobrazený
  $("#slides > :last").before(slideTemp[c]);
  // jelikoz uz sme s nove vlozenym slidem mozna pracovali tak ho zobrazime s opacity = 1
  $("#slides > :first").animate({'opacity': 1});
  // aktuálně zobrazený slide animujeme dokud nezmizi a nezobrazi se tak ten co je pod nim
  $("#slides > :last").animate({'opacity': 0}, 1000, function(){
    // jakmile zmizi odstranime z DOM uplne
    $("#slides > :last").remove();
  });
}
$(document).ready(function(){
  // init veci
  $("div#pagging_field span:first").addClass("active");
  $("div#slides div:first").addClass("active");
  $("div#slideshow").mouseenter(function(){
    clearInterval(play);
  }).mouseleave(function(){
    rotateSwitch();
  });
  $("div#pagging_field span").click(function() {
    $active = $(this);
    if(slideCurrent != ($active.attr("rel") - 1)) {
      slideCurrent = $active.attr("rel") - 2;
      rotate();
    }
    return false;
  });
  // natahnutí slides do promene
  $("#slides > div").each(function(k,v){
    slideTemp[k] = $($("#slides > div").get(k)).clone().removeClass("active");
  });
  slideCount = (slideTemp.length - 1);
  // vyhozeni slides, ktere nejsou aktivní
  $(".images_slide:not(.active)").remove();
  $(".images_slide").removeClass("active");
  rotateSwitch();
});
</script>

doufam ze bude splnovat tve naroky :)

Tak děkuju moc, opravdu jsi mi pomohol.

#3 tonez
Moc povedený Slide ... je možné  ho někde udělat ?  :)