Diskuze: obrazky se zobrazí až po 1. kliknutí na další obrazek
V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.
Člen
Odpovídá na Rancher Cz
:3.11.2018 15:46
:3.11.2018 15:46
Vlož sem prosím do code sekcie aj kód tej stránky, nedávaj sem len odkaz na ňu. A keď už ho sem budeš vkladať, skús ho pekne naformátovať. Ideálne s dvoma medzerami pri vnorenom kóde, maximálne však so štyrmi - použi náhľad pred odoslaním na kontrolu, či bude príspevok čitateľný. Bordel s 8 a viac medzerami sa tu nikomu nebude chcieť lúštiť.
Odpovídá na Rancher Cz
Neaktivní uživatel:3.11.2018 20:02
Neaktivní uživatel:3.11.2018 20:02
možná by taky mohla hodně napovědět vývojářská konzole v prohlížeči (např v chrome stisknutím F12). Hází ti to tam dost chyb
Rancher Cz:5.11.2018 5:44
Photoindex.js
var slideindex=0;
sliding(0,'p');
var timer = setInterval(plusslide,4000);
function plusslide()
{
slideindex++;
sliding(slideindex,'p');
clearInterval(timer);
timer = setInterval(plusslide, 4000);
}
function minslide()
{
slideindex--;
sliding(slideindex,'l');
clearInterval(timer);
timer = setInterval(plusslide, 4000);
}
function clickim(r)
{
var d;
if(slideindex<r)
{
d='p';
}
else {
d='l';
}
slideindex = r;
sliding(slideindex,d);
clearInterval(timer);
timer = setInterval(plusslide, 4000);
}
function sliding(x,s)
{
var photos = document.querySelectorAll('.photos');
var indic = document.querySelectorAll('.indic');
if(x>indic.length - 1)
{
x=0;
slideindex=0;
}
else if (x < 0) {
x = indic.length - 1;
slideindex = indic.length - 1;
}
for (i = 0; i < indic.length; i++) {
indic[i].style.backgroundColor = "#949494";
}
indic[x].style.backgroundColor = "white";
for (i = 0; i < photos.length; i++) {
photos[i].id = "slidephoto";
}
if(s=='p')
{
x--;
x--;
if(x>=0)
{
photos[x].id = "one";
}
x++;
if(x>=0)
{
photos[x].id = "two";
}
x++;
photos[x].id = "three";
x++;
if(x<photos.length)
{
photos[x].id = "four";
}
}
else
{
x--;
if(x>=0)
{
photos[x].id = "onep";
}
x++;
if(x>=0)
{
photos[x].id = "twop";
}
x++;
if(x<photos.length)
{
photos[x].id = "threep";
}
x++;
if(x<photos.length)
{
photos[x].id = "fourp";
}
}
}Index.php
<!DOCTYPE html>
<html>
<head>
<title>S-R sula-ranch</title>
<link rel="icon" type="image/png" href="logodark.png">
<link href="style.css" rel="stylesheet">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="theme-color" content="#633E24">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script>
<script src="photoindex.js"></script>
<script src="script.js"></script>
</head>
<body>
<header>
<nav>
<span></span>
<a href="/"><img src="logo.png"></a>
<div>
<a href="contact.php">kontakt</a>
<a href="calendar.php">kalendář</a>
<a href="galery.php">galerie</a>
<a href="animals.php">Naše zvířata</a>
<a class="visit">domů</a>
<span></span>
</div>
</nav>
<div id="slideshow">
<?php
$soubory = @glob("slideshow/*.{jpg,jpeg,png,gif,JPG,JPEG,PNG,GIF}", GLOB_BRACE);
for ($i=0;$i<count($soubory);$i++) {
echo '<img src="'.$soubory[$i].'" class="photos" id="slidephoto">';
}
?>
<div class="identification">
<?php
for ($i=0;$i<count($soubory);$i++) {
echo '<span class="indic " id="'.$i.'" onclick="clickim('.$i.')"></span>';
}
?>
</div>
<div class="chevron">
<i class="fas fa-chevron-left" id="chevroleft" onclick="minslide();"></i>
<i class="fas fa-chevron-right" id="chevronright" onclick="plusslide();"></i>
</div>
</div>
</header>
<main>
<div class="timeline">
<div class="fullcontainer">
<div class="text">
<h2>Foto po mnoha změnách</h2>
<p>Na ranči nám spoustu věcí přibylo, ale moc strarostí neubylo také..</p>
<img src="images/2018_09_20/IMG_20180920_182013.jpg">
</div>
<span id="date">20.září 2018</span>
</div>
<div class="fullcontainer">
<div class="text">
<h2>První závody s hřebcem</h2>
<p>Náš dvouletý hřebeček na svých prvních ,,fofo turnajích''..</p>
<img src="images/2018_09_01/IMG_20180901_103016.jpg">
</div>
<span id="date">1.září 2018</span>
</div>
<div class="fullcontainer">
<div class="text">
<h2>Příchod koní</h2>
<p>A teď jenom ty koně..</p>
<img src="images/2017_6_-/P1010154.jpg">
</div>
<span id="date">červen 2017</span>
</div>
<div class="fullcontainer">
<div class="text">
<h2>Zastřešování přístřešku</h2>
<p>A potřebují také střechu..</p>
<img src="images/2017_06_01/IMG_20180901_103016.jpg">
</div>
<span id="date">26-27.května 2017</span>
</div>
<div class="fullcontainer">
<div class="text">
<h2>Stavba přístřešku</h2>
<p>Koně se někde schovat musí..</p>
<img src="images/2017_06_01/IMG_20180901_103016.jpg">
</div>
<span id="date">25.května 2017</span>
</div>
<div class="fullcontainer">
<div class="text">
<h2>Druhé sekání</h2>
<p>První heřmánkové, druhé už ujde..</p>
<img src="images/2017_06_01/IMG_20180901_103016.jpg">
</div>
<span id="date">5.dubna 2017</span>
</div>
<div class="fullcontainer">
<div class="text">
<h2>Museli jsme se přestěhovat..</h2>
<p>Když pole nestačilo, hledali jsme další..</p>
<img src="images/2017_06_01/IMG_20180901_103016.jpg">
</div>
<span id="date">6.července 2016</span>
</div>
<div class="fullcontainer">
<div class="text">
<h2>První sekání</h2>
<p>První tráva se sesekává</p>
<img src="images/2017_06_01/IMG_20180901_103016.jpg">
</div>
<span id="date">11.května 2014</span>
</div>
<div class="fullcontainer">
<div class="text">
<h2>Plevel přerůstá trávu</h2>
<p>První boj s plevelem byl neúspěšný..</p>
<img src="images/2017_06_01/IMG_20180901_103016.jpg">
</div>
<span id="date">30.března 2014</span>
</div>
<div class="fullcontainer">
<div class="text">
<h2>Stromy rostou a srny mají nové místo k pasení</h2>
<p>Vždy se najde nějaká škodná..</p>
<img src="images/2017_06_01/IMG_20180901_103016.jpg">
</div>
<span id="date">2.března 2014</span>
</div>
<div class="fullcontainer">
<div class="text">
<h2>A tráva roste..</h2>
<p></p>
<img src="images/2017_06_01/IMG_20180901_103016.jpg">
</div>
<span id="date">24.listopadu 2013</span>
</div>
<div class="fullcontainer">
<div class="text">
<h2>Nechtěný plevel</h2>
<p>Špatné traviny se musí vymýtit..</p>
<img src="images/2017_06_01/IMG_20180901_103016.jpg">
</div>
<span id="date">10.listopadu 2013</span>
</div>
<div class="fullcontainer">
<div class="text">
<h2>Satba Stromů</h2>
<p>Pár ovocných stromů nikdy neuškodí..</p>
<img src="images/2017_06_01/IMG_20180901_103016.jpg">
</div>
<span id="date">27.řijna 2013</span>
</div>
<div class="fullcontainer">
<div class="text">
<h2>Nechtěná řepka olejná</h2>
<p>Po prvním zasetí trávy se většinou objeví <br>rostliny, které jsou nechtěně..ta naše byla řepka olejná.</p>
<img src="images/2017_06_01/IMG_20180901_103016.jpg">
</div>
<span id="date">27.dubna 2014</span>
</div>
<div class="fullcontainer">
<div class="text">
<h2>Prvni ohraničení</h2>
<p>Po koupi pole bylo třeba pole ohraničit..<br>tak jsme vzali pár kůlů a nabili je do země.</p>
<img src="images/2017_06_01/IMG_20180901_103016.jpg">
</div>
<span id="date">13.řijna 2013</span>
</div>
</div>
<footer>
<span id="social">
<a href="http://facebook.com/" target="_blank"><i class="fab fa-facebook"></i></a>
<a href="mailto:sula-ranch%40email.com" target="_blank"><i class="fas fa-at"></i></a>
<a href="https://plus.google.com/" target="_blank"><i class="fab fa-google-plus-g"></i></a>
</span>
<div class="tn">
<iframe id="map" width="300" height="300" src="https://maps.google.com/maps?width=300&height=300&hl=en&coord=49.939060, 18.183130&q=49.939060%2C%2018.183130+(S-R%20sula%20ranch)&ie=UTF8&t=k&z=17&iwloc=B&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0">
</iframe>
<form method="post" id="form"> <!--AJAX-->
<fieldset>
<legend> Máš nějakou otázku? Napiš nám</legend>
<input type="text" name="name" placeholder="Tvoje jméno" required>
<br>
<input type="text" name="name" placeholder="Tvůj email" required>
<br>
<textarea name="quest" rows="12" cols="40" placeholder="Zde napiš otázku" required></textarea>
<input type="submit" name="submit" value="odeslat">
</fieldset>
</form>
</div>
<span id="copy">
©Copyright 2018<?php if(date("Y") != 2018){echo ' - '.date("Y");}?>
<br>
All rights reserved. Powered by <a href="mailto:setap369%40gmail.com" style="color:#5f695e;"target="_blank">Richard Sula</a>.
</span>
</footer>
</main>
</body>
</html>
Peter Mlich:5.11.2018 8:44
Editováno 5.11.2018 8:45
Hm, nevi, co je html kod. To je, kdyz kliknes v prohlizeci na tlacitko
zobrazit zdrojovy kod. Php je pro ladeni js nepouzitelne! Tolik k boji proti
hlouposti, ktery propaguje ta stranka.
Tez si zkus vygooglovat html validator.
No, a kazdy prohlizec, krome zobrazeni html kodu, ma js koznolu, ve ktere bys
videl chyby.
Podle mne to celkem funguje, neco to dela. Zrusil jsem z kodu ty ostatni veci, html, js a zakomentoval jeden tag </script>
<!DOCTYPE html>
<html>
<head>
<title>S-R sula-ranch</title>
<link rel="icon" type="image/png" href="logodark.png">
<link href="style.css" rel="stylesheet">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="theme-color" content="#633E24">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<!--link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"-->
<!--script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script-->
<!--script src="photoindex.js"></script-->
<!--script src="script.js"></script-->
</head>
<body>
<header>
<!--
<nav>
<span></span>
<a href="/"><img src="logo.png"></a>
<div>
<a href="contact.php">kontakt</a>
<a href="calendar.php">kalendář</a>
<a href="galery.php">galerie</a>
<a href="animals.php">Naše zvířata</a>
<a class="visit">domů</a>
<span></span>
</div>
</nav>
-->
<div id="slideshow">
<img src="slideshow/11822702_10204939607355368_1479332914679671604_n.jpg" class="photos" id="slidephoto"><img src="slideshow/13263825_10206603512111947_2442254419998974710_n.jpg" class="photos" id="slidephoto"><img src="slideshow/19399495_10209683973881566_4061299811498196109_n.jpg" class="photos" id="slidephoto"><img src="slideshow/27073380_10211307818596669_4869291461816499605_n.jpg" class="photos" id="slidephoto"><img src="slideshow/27540868_10211365569640409_4766886838280351618_n.jpg" class="photos" id="slidephoto"><img src="slideshow/27544590_10211307822876776_5449326205143677018_n.jpg" class="photos" id="slidephoto"><img src="slideshow/33137396_10212114939814195_6079090379976605696_n.jpg" class="photos" id="slidephoto"><img src="slideshow/34585805_10212196136444060_2132946416358653952_n.jpg" class="photos" id="slidephoto"><img src="slideshow/35357407_10212251961319647_1954691310635974656_n.jpg" class="photos" id="slidephoto"><img src="slideshow/P1010144,.JPG" class="photos" id="slidephoto"><img src="slideshow/P1010154,.JPG" class="photos" id="slidephoto"><img src="slideshow/P1010173,.JPG" class="photos" id="slidephoto"> <div class="identification">
<span class="indic " id="0" onclick="clickim(0)"></span><span class="indic " id="1" onclick="clickim(1)"></span><span class="indic " id="2" onclick="clickim(2)"></span><span class="indic " id="3" onclick="clickim(3)"></span><span class="indic " id="4" onclick="clickim(4)"></span><span class="indic " id="5" onclick="clickim(5)"></span><span class="indic " id="6" onclick="clickim(6)"></span><span class="indic " id="7" onclick="clickim(7)"></span><span class="indic " id="8" onclick="clickim(8)"></span><span class="indic " id="9" onclick="clickim(9)"></span><span class="indic " id="10" onclick="clickim(10)"></span><span class="indic " id="11" onclick="clickim(11)"></span>
</div>
<div class="chevron">
<i class="fas fa-chevron-left" id="chevroleft" onclick="minslide();"></i>
<i class="fas fa-chevron-right" id="chevronright" onclick="plusslide();"></i>
</div>
<!--/script-->
</div>
</header>
<!--
<main>
<div class="timeline">
<div class="fullcontainer">
<div class="text">
<h2>Foto po mnoha změnách</h2>
<p>Na ranči nám spoustu věcí přibylo, ale moc strarostí neubylo také..</p>
<img src="images/2018_09_20/IMG_20180920_182013.jpg">
</div>
<span id="date">20.září 2018</span>
</div>
<div class="fullcontainer">
<div class="text">
<h2>První závody s hřebcem</h2>
<p>Náš dvouletý hřebeček na svých prvních ,,fofo turnajích''..</p>
<img src="images/2018_09_01/IMG_20180901_103016.jpg">
</div>
<span id="date">1.září 2018</span>
</div>
<div class="fullcontainer">
<div class="text">
<h2>Příchod koní</h2>
<p>A teď jenom ty koně..</p>
<img src="images/2017_6_-/P1010154.jpg">
</div>
<span id="date">červen 2017</span>
</div>
<div class="fullcontainer">
<div class="text">
<h2>Zastřešování přístřešku</h2>
<p>A potřebují také střechu..</p>
<img src="images/2017_06_01/IMG_20180901_103016.jpg">
</div>
<span id="date">26-27.května 2017</span>
</div>
<div class="fullcontainer">
<div class="text">
<h2>Stavba přístřešku</h2>
<p>Koně se někde schovat musí..</p>
<img src="images/2017_06_01/IMG_20180901_103016.jpg">
</div>
<span id="date">25.května 2017</span>
</div>
<div class="fullcontainer">
<div class="text">
<h2>Druhé sekání</h2>
<p>První heřmánkové, druhé už ujde..</p>
<img src="images/2017_06_01/IMG_20180901_103016.jpg">
</div>
<span id="date">5.dubna 2017</span>
</div>
<div class="fullcontainer">
<div class="text">
<h2>Museli jsme se přestěhovat..</h2>
<p>Když pole nestačilo, hledali jsme další..</p>
<img src="images/2017_06_01/IMG_20180901_103016.jpg">
</div>
<span id="date">6.července 2016</span>
</div>
<div class="fullcontainer">
<div class="text">
<h2>První sekání</h2>
<p>První tráva se sesekává</p>
<img src="images/2017_06_01/IMG_20180901_103016.jpg">
</div>
<span id="date">11.května 2014</span>
</div>
<div class="fullcontainer">
<div class="text">
<h2>Plevel přerůstá trávu</h2>
<p>První boj s plevelem byl neúspěšný..</p>
<img src="images/2017_06_01/IMG_20180901_103016.jpg">
</div>
<span id="date">30.března 2014</span>
</div>
<div class="fullcontainer">
<div class="text">
<h2>Stromy rostou a srny mají nové místo k pasení</h2>
<p>Vždy se najde nějaká škodná..</p>
<img src="images/2017_06_01/IMG_20180901_103016.jpg">
</div>
<span id="date">2.března 2014</span>
</div>
<div class="fullcontainer">
<div class="text">
<h2>A tráva roste..</h2>
<p></p>
<img src="images/2017_06_01/IMG_20180901_103016.jpg">
</div>
<span id="date">24.listopadu 2013</span>
</div>
<div class="fullcontainer">
<div class="text">
<h2>Nechtěný plevel</h2>
<p>Špatné traviny se musí vymýtit..</p>
<img src="images/2017_06_01/IMG_20180901_103016.jpg">
</div>
<span id="date">10.listopadu 2013</span>
</div>
<div class="fullcontainer">
<div class="text">
<h2>Satba Stromů</h2>
<p>Pár ovocných stromů nikdy neuškodí..</p>
<img src="images/2017_06_01/IMG_20180901_103016.jpg">
</div>
<span id="date">27.řijna 2013</span>
</div>
<div class="fullcontainer">
<div class="text">
<h2>Nechtěná řepka olejná</h2>
<p>Po prvním zasetí trávy se většinou objeví <br>rostliny, které jsou nechtěně..ta naše byla řepka olejná.</p>
<img src="images/2017_06_01/IMG_20180901_103016.jpg">
</div>
<span id="date">27.dubna 2014</span>
</div>
<div class="fullcontainer">
<div class="text">
<h2>Prvni ohraničení</h2>
<p>Po koupi pole bylo třeba pole ohraničit..<br>tak jsme vzali pár kůlů a nabili je do země.</p>
<img src="images/2017_06_01/IMG_20180901_103016.jpg">
</div>
<span id="date">13.řijna 2013</span>
</div>
</div>
<footer>
<span id="social">
<a href="http://facebook.com/" target="_blank"><i class="fab fa-facebook"></i></a>
<a href="mailto:sula-ranch%40email.com" target="_blank"><i class="fas fa-at"></i></a>
<a href="https://plus.google.com/" target="_blank"><i class="fab fa-google-plus-g"></i></a>
</span>
<div class="tn">
<iframe id="map" width="300" height="300" src="https://maps.google.com/maps?width=300&height=300&hl=en&coord=49.939060, 18.183130&q=49.939060%2C%2018.183130+(S-R%20sula%20ranch)&ie=UTF8&t=k&z=17&iwloc=B&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0">
</iframe>
-->
<form method="post" id="form"> <!--AJAX-->
<!-- <fieldset>
<legend> Máš nějakou otázku? Napiš nám</legend>
<input type="text" name="name" placeholder="Tvoje jméno" required>
<br>
<input type="text" name="name" placeholder="Tvůj email" required>
<br>
<textarea name="quest" rows="12" cols="40" placeholder="Zde napiš otázku" required></textarea>
<input type="submit" name="submit" value="odeslat">
</fieldset>
-->
</form>
<!--
</div>
<span id="copy">
©Copyright 2018 <br>
All rights reserved. Powered by <a href="mailto:setap369%40gmail.com" style="color:#5f695e;"target="_blank">Richard Sula</a>.
</span>
</footer>
</main>
<div ><div class="souhrn"><div class="eq"><i>„Proti hluposti se bojovat musí, ale vyhrát se nedá!“ </i>Jan Werich</div></div></div>
-->
<script>
var slideindex=0;
sliding(0,'p');
var timeX = 400;
var timer = setInterval(plusslide, timeX);
function plusslide()
{
slideindex++;
sliding(slideindex,'p');
clearInterval(timer);
timer = setInterval(plusslide, timeX);
}
function minslide()
{
slideindex--;
sliding(slideindex,'l');
clearInterval(timer);
timer = setInterval(plusslide, timeX);
}
function clickim(r)
{
var d;
if(slideindex<r)
{
d='p';
}
else {
d='l';
}
slideindex = r;
sliding(slideindex,d);
clearInterval(timer);
timer = setInterval(plusslide, 4000);
}
function sliding(x,s)
{
var photos = document.querySelectorAll('.photos');
var indic = document.querySelectorAll('.indic');
//if (indic.length==0) {return}
//alert(indic.length)
//alert(x)
if(x>indic.length - 1)
{
x=0;
slideindex=0;
}
else if (x < 0) {
x = indic.length - 1;
slideindex = indic.length - 1;
}
for (i = 0; i < indic.length; i++) {
indic[i].style.backgroundColor = "#949494";
}
indic[x].style.backgroundColor = "white";
for (i = 0; i < photos.length; i++) {
photos[i].id = "slidephoto";
}
if(s=='p')
{
x--;
x--;
if(x>=0)
{
photos[x].id = "one";
}
x++;
if(x>=0)
{
photos[x].id = "two";
}
x++;
photos[x].id = "three";
x++;
if(x<photos.length)
{
photos[x].id = "four";
}
}
else
{
x--;
if(x>=0)
{
photos[x].id = "onep";
}
x++;
if(x>=0)
{
photos[x].id = "twop";
}
x++;
if(x<photos.length)
{
photos[x].id = "threep";
}
x++;
if(x<photos.length)
{
photos[x].id = "fourp";
}
}
}
</script>
<style>
.indic {border:2px solid #080; padding:20px;}
.photos {border:2px solid #f00; padding:20px;}
</style>
</body>
</html>
Peter Mlich:5.11.2018 8:49
Editováno 5.11.2018 8:50
Jo, do <title> davej titulek stranky. Nebo jeco takoveho
Uvodni stranka - xx ranc.
Jde o to, ze kdyz mas zobrazovani kazde okno zvlast, tak dole v liste vypisuje
asi prvnich 10 znaku z title. Pokud prvnich 10 znaku bude xxx ranc pro kazdou
stranku, tak to nikomu nic nerekne. Ja treba mivam i 50 otevrenych oken a
kdybych mel podle title na nektere kliknout, tak je to 50x xxx ranc, tak je to
celkem k nicemu 
Jo, a total comm ma funkci porovnani obsahu 2 souboru, jestli chces rychle najit zmeny, co jsem udelal. V celku nic, proste to bezelo.
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 6 zpráv z 6.