Diskuze: javascript v php
V předchozím kvízu, Online test znalostí PHP, jsme si ověřili nabyté zkušenosti z kurzu.
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.
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š...
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. 
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}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
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ář. 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
requestAnimationFrame() 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.
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
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?
Neaktivní uživatel:14.6.2016 19:10
Musím říct, že tvůj smysl pro humor a pro lamy je naprosto perfektní.
Zobrazeno 18 zpráv z 18.