Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: javascript v php

Aktivity
Avatar
saša harvan
Člen
Avatar
saša harvan:12.6.2016 21:42

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.6.2016 21:42
Avatar
Odpovídá na saša harvan
Dominik Gavrecký:12.6.2016 22:00

Nevidím otázku :)

Nahoru Odpovědět
12.6.2016 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:12.6.2016 22:03

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

 
Nahoru Odpovědět
12.6.2016 22:03
Avatar
Odpovídá na saša harvan
Neaktivní uživatel:13.6.2016 12:07

Co říká developer console?

Nahoru Odpovědět
13.6.2016 12:07
Neaktivní uživatelský účet
Avatar
saša harvan
Člen
Avatar
Odpovídá na Neaktivní uživatel
saša harvan:13.6.2016 16:24

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.6.2016 16:24
Avatar
Odpovídá na saša harvan
Neaktivní uživatel:13.6.2016 17:47

Š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.6.2016 17:47
Neaktivní uživatelský účet
Avatar
saša harvan
Člen
Avatar
Odpovídá na Neaktivní uživatel
saša harvan:13.6.2016 19:32

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

 
Nahoru Odpovědět
13.6.2016 19:32
Avatar
Jindřich Máca
Tvůrce
Avatar
Odpovídá na saša harvan
Jindřich Máca:14.6.2016 2:20

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.6.2016 2:20
Avatar
saša harvan
Člen
Avatar
saša harvan:14.6.2016 6:51

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.6.2016 6:51
Avatar
saša harvan
Člen
Avatar
Odpovídá na Jindřich Máca
saša harvan:14.6.2016 7:04

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.6.2016 7:04
Avatar
Jindřich Máca
Tvůrce
Avatar
Odpovídá na saša harvan
Jindřich Máca:14.6.2016 14:37

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
14.6.2016 14:37
Avatar
Odpovídá na Jindřich Máca
Neaktivní uživatel:14.6.2016 15:08

PHP kód do JavaScriptu nepatří!

[*insert thank you gif here*]

Nahoru Odpovědět
14.6.2016 15:08
Neaktivní uživatelský účet
Avatar
saša harvan
Člen
Avatar
Odpovídá na Jindřich Máca
saša harvan:14.6.2016 17:51

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.6.2016 17:51
Avatar
Jindřich Máca
Tvůrce
Avatar
Odpovídá na saša harvan
Jindřich Máca:14.6.2016 19:03

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.6.2016 19:04
 
Nahoru Odpovědět
14.6.2016 19:03
Avatar
Odpovídá na Jindřich Máca
Neaktivní uživatel:14.6.2016 19:10

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

Nahoru Odpovědět
14.6.2016 19:10
Neaktivní uživatelský účet
Avatar
saša harvan
Člen
Avatar
saša harvan:14.6.2016 22:11

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

 
Nahoru Odpovědět
14.6.2016 22:11
Avatar
00
Člen
Avatar
Odpovídá na saša harvan
00:18.6.2016 17:46

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

JS -> Prohlížeč
PHP -> Server
 
Nahoru Odpovědět
18.6.2016 17:46
Avatar
Odpovídá na saša harvan
Neaktivní uživatel:21.7.2016 18:00

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

Nahoru Odpovědět
21.7.2016 18:00
Neaktivní uživatelský účet
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.