Slideshow efekt – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

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

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
tanned880
Super člen
6. 11. 2011   #1
-
0
-

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>
Nahlásit jako SPAM
IP: 89.235.22.–
Reklama
Reklama
tanned880
Super člen
6. 11. 2011   #2
-
0
-

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.

Nahlásit jako SPAM
IP: 89.235.22.–
tonez+1
Návštěvník
8. 11. 2011   #3
-
0
-

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/
Nahlásit jako SPAM
IP: 188.120.217.–
Im web developer. (x)HTML, CSS, JavaScript + jQuery, PHP, MySQL and others :))
tonez+1
Návštěvník
9. 11. 2011   #4
-
+1
-
Zajímavé

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 :)

Nahlásit jako SPAM
IP: 188.120.217.–
Im web developer. (x)HTML, CSS, JavaScript + jQuery, PHP, MySQL and others :))
tanned880
Super člen
9. 11. 2011   #5
-
0
-

Tak děkuju moc, opravdu jsi mi pomohol.

Nahlásit jako SPAM
IP: 89.235.22.–
BoBy0
Newbie
10. 11. 2011   #6
-
0
-

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

Nahlásit jako SPAM
IP: 90.176.176.–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 58 hostů

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý