Avatar
saša harvan
Člen
Avatar
saša harvan:

tady mam cast kodu ,ktery by mel fungovat ale nefuguje,obrazky se nemotaj ,,to jsem zil v iluzi ze to mam vyreseny :) ale neni

<?= $koncovka++ ;
   $idgalerie ="cycler".$koncovka;
   ?>

    <div id="<?=$idgalerie?>" class="cycler">
<img class="active" src="<?= $obrazky[0] ?>" alt="My image"   />
<img src="<?= $obrazky[1] ?>" alt="My image"  />
<img src="<?= $obrazky[2] ?>" alt="My image"  />
<img src="<?= $obrazky[3] ?>" alt="My image"  />
<img src="<?= $obrazky[4] ?>" alt="My image"  />
<img src="<?= $obrazky[5] ?>" alt="My image"  />
</div>
 <script type="text/javascript">

 function cycleImages(){

      var $active = $('#<?=$idgalerie?>.active');
      var $next = ($active.next().length > 0) ? $active.next() : $('#<?=$idgalerie?> img:first');
      $next.css('z-index',2);//move the next image up the pile
      $active.fadeOut(1500,function(){//fade out the top image
          $active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
          $next.css('z-index',3).addClass('active');//make the next image the top one
      });
    }

$(document).ready(function(){
// run every 5s
setInterval('cycleImages()', 5000);
})

</script>
-------css-------
.cycler{position:relative; top:-100px;}
.cycler img{position:absolute;
z-index:1;
box-shadow: 2px 2px 3px #999999;
padding: 2px;
margin-left: 5px;

}
.cycler img.active{z-index:3}
 
Odpovědět 12. června 21:42
Avatar
Nahoru Odpovědět 12. června 22:00
Hlupák nie je ten kto niečo nevie, hlupákom sa stávaš v momente keď sa na to bojíš opýtať.
Avatar
saša harvan
Člen
Avatar
Odpovídá na Dominik Gavrecký
saša harvan:

melo by to rolovat s obrazky ale neroluje :)...a uz me dochazi napady

 
Nahoru Odpovědět 12. června 22:03
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na saša harvan
Jiří Gracík:

Co říká developer console?

Nahoru Odpovědět 13. června 12:07
Creating websites is awesome till you see the result in another browser ...
Avatar
saša harvan
Člen
Avatar
Odpovídá na Jiří Gracík
saša harvan:

asi toto
.............
GET
http://localhost/clanek [HTTP/1.1 200 OK 11ms]
GET
http://localhost/style.css [HTTP/1.1 304 Not Modified 2ms]
GET
http://ajax.googleapis.com/…query.min.js [HTTP/1.1 304 Not Modified 79ms]


ale co s tim netusim

 
Nahoru Odpovědět 13. června 16:24
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na saša harvan
Taskkill:

Špatná lišta, musíš sitsknout F12 na firefoxu snad i na Chromu je to tak .... a pak se ujistit, že jsi vybral Console a nikoliv síť ... jako na přiloženém obrázku.

 
Nahoru Odpovědět 13. června 17:47
Avatar
saša harvan
Člen
Avatar
Odpovídá na Taskkill
saša harvan:

tak toto,,,vypada to neco s tim js....

 
Nahoru Odpovědět 13. června 19:32
Avatar
Jindřich Máca
Tým ITnetwork
Avatar
Odpovídá na saša harvan
Jindřich Máca:

Ahoj, tak pokud pominu, jak příšerná šílenost je takhle míchat PHP a JavaScript dohromady, tak první chyba, která praští člověka hned do očí je:

'#<?=$idgalerie?>.active'

Vždyť v tomhle kusu kódu se Ti díky těm uvozovkám ani nebude ta proměnná interpretovat... :(

Nemluvě o tom, že pro Tvůj účel to takhle ani mixovat nepotřebuješ... :D Zkrátka to hezky rozděl, pomocí PHP si nech vypsat celou tu galerii obrázků a pak úplně mimo dodej JavaScript, který s nimi bude pěkně rotovat. ;)

 
Nahoru Odpovědět 14. června 2:20
Avatar
saša harvan
Člen
Avatar
saša harvan:

uplne cely to mam takto..teprve zacinam tak se v tom trochu placam :)
/////////////­////////////////////////­////////////////////////­////////////////////////­////////////////////////­////////////////

<h1>Seznam článků</h1>
<table >
 <?= $koncovka = ""; ?>
<?php foreach ($clanky as $clanek) : ?>
        <tr>
                <td>
                        <h2><a href="clanek/<?= $clanek['url'] ?>"><?= $clanek['titulek'] ?></a></h2>
                        <?= $clanek['popisek'] ?>
                        <?php if ($admin) : ?>
                                <br />
                                <a href="editor/<?= $clanek['url'] ?>">Editovat</a>
                                <a href="clanek/<?= $clanek['url'] ?>/odstranit">Odstranit</a>
                        <?php endif ?>
                </td>
    <td width="294" height="200">  <?= $slozka = opendir("obrazky/".$clanek['url']."/"); //otevření složky  ..Interval
         while ($obrazek = readdir($slozka)) :
         if( $obrazek != "." && $obrazek != ".." && strpos($obrazek, '_nahled.'))  :
         $obrazky [] = "obrazky/".$clanek['url']."/".$obrazek;
           ?>
           <?php endif ?>

    <?php endwhile ?>




 <?= $koncovka++ ;
   $idgalerie ="cycler".$koncovka;
   ?>

    <div id="<?=$idgalerie?>" class="cycler">
<img class="active" src="<?= $obrazky[0] ?>" alt="My image"   />
<img src="<?= $obrazky[1] ?>" alt="My image"  />
<img src="<?= $obrazky[2] ?>" alt="My image"  />
<img src="<?= $obrazky[3] ?>" alt="My image"  />
<img src="<?= $obrazky[4] ?>" alt="My image"  />
<img src="<?= $obrazky[5] ?>" alt="My image"  />
</div>
 <script type="text/javascript">

 function cycleImages(){

      var $active = $('#<?=$idgalerie?>.active');
      var $next = ($active.next().length > 0) ? $active.next() : $('#<?=$idgalerie?> img:first');
      $next.css('z-index',2);//move the next image up the pile
      $active.fadeOut(1500,function(){//fade out the top image
          $active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
          $next.css('z-index',3).addClass('active');//make the next image the top one
      });
    }

$(document).ready(function(){
// run every 5s
setInterval('cycleImages()', 5000);
})

</script>

      <?php unset($obrazky); ?>

    </td>
        </tr>

<?php endforeach ?>
</table>

css......

.cycler{position:relative; top:-100px;}
.cycler img{position:absolute;
z-index:1;
box-shadow: 2px 2px 3px #999999;
padding: 2px;
margin-left: 5px;

}
.cycler img.active{z-index:3}
 
Nahoru Odpovědět 14. června 6:51
Avatar
saša harvan
Člen
Avatar
Odpovídá na Jindřich Máca
saša harvan:

jinak te zdravim Jindro a moc chvalim za skoleni,,uz bych zas potreboval nejake tentokrat..napr.. vyuziti javascriptu v php :) ..OOP bylo super

 
Nahoru Odpovědět 14. června 7:04
Avatar
Jindřich Máca
Tým ITnetwork
Avatar
Odpovídá na saša harvan
Jindřich Máca:

Ahoj, tak v první řáde jsem moc rád, že se Ti školení líbilo a za druhé se trochu zlobím, protože si pořádně nečetl můj komentář. :D Takže ještě jednou:

PHP kód do JavaScriptu nepatří!

JavaScript je prostě samostatná entita. Může samozřejmě komunikovat s PHP např. pomocí AJAXu, ale to je úplně jiný přístup, než je zde uvedený.

Takže ten JavaScriptový kód z toho úplně vyndej a šoupni ho do samostatného soubor např. animace.js a do toho HTML ho nalinkuj se správnou cestou pomocí tagu:

<script type="text/javascript" src="animace.js"></script>

Pozn.: Jelikož používáš knihovnu jQuery, tak jí musíš logicky nalinkovat před tím, než nalinkuješ tento soubor.

Ten soubor by měl pak obsahovat něco jako:

function cycleImages(){
        var active = $('.cycler.active');
        var next = (active.next().length > 0) ? active.next() : $('.cycler img:first');
        next.css('z-index', 2); // move the next image up the pile
        active.fadeOut(1500, function(){ // fade out the top image
                // reset the z-index and unhide the image
                active.css('z-index', 1).show().removeClass('active');
                // make the next image the top one
                next.css('z-index', 3).addClass('active');
        });
}

$(function(){
        // run every 5s
        setInterval('cycleImages()', 5000);
});

A potom by jsi měl ještě kvůli optimalizaci zauvažovat o funkci requestAnimati­onFrame() místo setInterval() viz. např. https://css-tricks.com/…mationframe/. Ale tohle už jsou věci, které spíš patří do části fóra o JavaScriptu a ne o PHP. ;)

 
Nahoru Odpovědět  +1 14. června 14:37
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na Jindřich Máca
Taskkill:

PHP kód do JavaScriptu nepatří!

[*insert thank you gif here*]

 
Nahoru Odpovědět  +1 14. června 15:08
Avatar
saša harvan
Člen
Avatar
Odpovídá na Jindřich Máca
saša harvan:

toto mam html...

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
 <script type="text/javascript" src="script/animace.js"></script>


<h1>Seznam článků</h1>
<table >
 <?= $koncovka = ""; ?>
<?php foreach ($clanky as $clanek) : ?>
        <tr>
                <td>
                        <h2><a href="clanek/<?= $clanek['url'] ?>"><?= $clanek['titulek'] ?></a></h2>
                        <?= $clanek['popisek'] ?>
                        <?php if ($admin) : ?>
                                <br />
                                <a href="editor/<?= $clanek['url'] ?>">Editovat</a>
                                <a href="clanek/<?= $clanek['url'] ?>/odstranit">Odstranit</a>
                        <?php endif ?>
                </td>
    <td width="294" height="200">  <?= $slozka = opendir("obrazky/".$clanek['url']."/"); //otevření složky  ..Interval
         while ($obrazek = readdir($slozka)) :
         if( $obrazek != "." && $obrazek != ".." && strpos($obrazek, '_nahled.'))  :
         $obrazky [] = "obrazky/".$clanek['url']."/".$obrazek;
           ?>
           <?php endif ?>

    <?php endwhile ?>


    <div  id="cycler">
<img class="active" src="<?= $obrazky[0] ?>" alt="My image"   />
<img src="<?= $obrazky[1] ?>" alt="My image"  />
<img src="<?= $obrazky[2] ?>" alt="My image"  />
<img src="<?= $obrazky[3] ?>" alt="My image"  />
<img src="<?= $obrazky[4] ?>" alt="My image"  />
<img src="<?= $obrazky[5] ?>" alt="My image"  />
</div>



      <?php unset($obrazky); ?>

    </td>
        </tr>

<?php endforeach ?>
</table>

toto je animace.js

 function cycleImages(){

      var $active = $('#cycler.active');
      var $next = ($active.next().length > 0) ? $active.next() : $('#cycler img:first');
      $next.css('z-index',2);//move the next image up the pile
      $active.fadeOut(1500,function(){//fade out the top image
          $active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
          $next.css('z-index',3).addClass('active');//make the next image the top one
      });
    }

$(document).ready(function(){
// run every 5s
setInterval('cycleImages()', 5000);
})

toto css

#cycler{position:relative; top:-100px;}
#cycler img{position:absolute;
z-index:1;
box-shadow: 2px 2px 3px #999999;
padding: 2px;
margin-left: 5px;

}
#cycler img.active{z-index:3}

a nefaka to..:).. jdu ven s klukem to bude uzitecnejsi :)

 
Nahoru Odpovědět 14. června 17:51
Avatar
Jindřich Máca
Tým ITnetwork
Avatar
Odpovídá na saša harvan
Jindřich Máca:

No, není to HTML, ale spíš mix HTML a PHP... Každopádně za předpokladu, že obrázky se na stránku načtou dobře a CSS vůbec neřeším, je problém zaručeně v tom JavaScriptu, který s těmi obrázky nerotuje. Takže jsem pro Tebe vytvořil praktickou ukázku na JSFiddle, kde mi ta rotace funguje - https://jsfiddle.net/rhzkw0um/. ;)

P.S.: Máš rád lamy? :D

Editováno 14. června 19:04
 
Nahoru Odpovědět  +4 14. června 19:03
Avatar
Taskkill
Redaktor
Avatar
Odpovídá na Jindřich Máca
Taskkill:

Musím říct, že tvůj smysl pro humor a pro lamy je naprosto perfektní. :D

 
Nahoru Odpovědět  +3 14. června 19:10
Avatar
saša harvan
Člen
Avatar
saša harvan:

sorry kluci ,,uz nebudu otravovat,,jste uzasni a vesmir se o tom urcite dozvi

 
Nahoru Odpovědět  +1 14. června 22:11
Avatar
00
Člen
Avatar
Odpovídá na saša harvan
00:

JS a PHP nemají nic společného:

JS -> Prohlížeč
PHP -> Server
 
Nahoru Odpovědět 18. června 17:46
Avatar
Dan Balarin
Člen
Avatar
Odpovídá na saša harvan
Dan Balarin:

Označ prosím jako vyřešené :)

Nahoru Odpovědět 21. července 18:00
"The number one benefit of information technology is that it empowers people to do what they want to do. It lets...
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 18 zpráv z 18.