Diskuze: Slide-show

HTML a CSS HTML a CSS Slide-show American English version English version

Avatar
Salieri
Člen
Avatar
Salieri:

Zdrarec,

mám takový dotaz, nevíte jak by šla udělat Slide-show prolínací a aby když kliknu na jeden "obrázek" aby mě to přesměrovalo na danou sekci kam chci?

Díky za odpověď.

Odpovědět 25.7.2013 10:04
Hlavní zlo? **Školství a Matematika**!
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Salieri
David Čápka:

Nějakým jquery pluginem.

Nahoru Odpovědět 25.7.2013 10:38
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Salieri
Člen
Avatar
Salieri:

Ajaj...

Nahoru Odpovědět 25.7.2013 10:56
Hlavní zlo? **Školství a Matematika**!
Avatar
Kit
Redaktor
Avatar
Odpovídá na Salieri
Kit:

Ajaj ne. Jmenuje se to jQuery :)

Nahoru Odpovědět  +1 25.7.2013 11:26
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
Salieri
Člen
Avatar
Salieri:

Vím, už jsem se o něco pokus. Prosil bych ještě jednu radu. Potřeboval bych ty obrázky aby odkazovali. Zkoušel jsem před img dát odkaz ale bohužel pak slideshow nefunguje.

<html>
<head>
<title>Slide-Show</title>
<style>

#slideshow {
    position:relative;
    height:200px;
 width: 210px;
}
#slideshow img {
    position:absolute;
    top:10px;
    left:5px;
    border:solid black 1px;
}
</style>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script>
function init() {
 $('#slideshow img').hide();

 $('#slideshow img:first').show();
}
function slide() {
    var $top = $('#slideshow img:visible');

    var $next;
 if($top.next().length > 0)
  $next = $top.next();

 else
        $next = $('#slideshow img:first');

 $top.hide();

 $next.show();
}

$(document).ready(function() {
 init();
    setInterval( "slide()", 3000 );
});

</script>
</head>
<body>


<div id="slideshow">
<img src="pokus.jpg" />
<img src="pokus2.jpg" />
<img src="pokus3.jpg" />
<img src="pokus4.jpg" />
<img src="pokus5.jpg" />
</div>


</body>
</html>
Nahoru Odpovědět 25.7.2013 12:43
Hlavní zlo? **Školství a Matematika**!
Avatar
Benjibs
Člen
Avatar
Benjibs:

Upravil si príslušný css selektor na

#slideshow a img

?

Nahoru Odpovědět 25.7.2013 13:14
1 + 1 = 2
Avatar
Salieri
Člen
Avatar
Nahoru Odpovědět 25.7.2013 13:22
Hlavní zlo? **Školství a Matematika**!
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Salieri
Jiří Gracík:

V js místo

slideshow img:first

zkus

slideshow a:first

nebo

slideshow a:first img
Nahoru Odpovědět 25.7.2013 14:27
Creating websites is awesome till you see the result in another browser ...
Avatar
Salieri
Člen
Avatar
Odpovídá na Jiří Gracík
Salieri:
<html>
<head>
<title>Slide-Show</title>
<style>

#slideshow  {
    position:relative;
    height:200px;
 width: 210px;
}
#slideshow a img {
    position:absolute;
    top:10px;
    left:5px;
    border:solid black 1px;
}
</style>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script>
function init() {
 $('#slideshow  img').hide();

 $('#slideshow a:first img').show();
}
function slide() {
    var $top = $('#slideshow  img:visible');

    var $next;
 if($top.next().length > 0)
  $next = $top.next();

 else
        $next = $('#slideshow a:first img');

 $top.hide();

 $next.show();
}

$(document).ready(function() {
 init();
    setInterval( "slide()", 2000 );
});

</script>
</head>
<body>


<div id="slideshow">
<a href="http://www.seznam.cz"><img src="pokus.jpg" /></a>
<a href="http://www.seznam.cz"><img src="pokus2.jpg" /></a>
<a href="http://www.seznam.cz"><img src="pokus3.jpg" /></a>
<a href="http://www.seznam.cz"><img src="pokus4.jpg" /></a>
<a href="http://www.seznam.cz"><img src="pokus5.jpg" /></a>
</div>


</body>
</html>

Je to tak jak jsi myslel?
To taky nejde :/

Nahoru Odpovědět 25.7.2013 14:33
Hlavní zlo? **Školství a Matematika**!
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Salieri
Jiří Gracík:

Tak teď už nevím ... to je jeden z důvodů, proč nemám rád js, nerozumím, proč při nepatrný změně přestane úplně fungovat :@

Nahoru Odpovědět  +1 25.7.2013 15:02
Creating websites is awesome till you see the result in another browser ...
Avatar
Benjibs
Člen
Avatar
Benjibs:

Firebug/konzola nevypisuje nič?

Nahoru Odpovědět 25.7.2013 15:04
1 + 1 = 2
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Salieri
Jiří Gracík:

Zkusil bych to ještě vrátit do původního stavu a přepsat všechny img tagy na a :)

Nahoru Odpovědět  +1 25.7.2013 15:06
Creating websites is awesome till you see the result in another browser ...
Avatar
Salieri
Člen
Avatar
Nahoru Odpovědět 25.7.2013 15:39
Hlavní zlo? **Školství a Matematika**!
Avatar
Jiří Gracík
Redaktor
Avatar
Nahoru Odpovědět 25.7.2013 15:54
Creating websites is awesome till you see the result in another browser ...
Avatar
Salieri
Člen
Avatar
Nahoru Odpovědět 25.7.2013 16:28
Hlavní zlo? **Školství a Matematika**!
Avatar
David Čápka
Tým ITnetwork
Avatar
David Čápka:

JS píše chyby samozřejmě do konzole včetně řádky kde chyba je, stačí se tam podívat a ne to ladit naslepo. Jinak je lepší použít jednu z milionu hotových slideshow pro jquery jak jsem radil hned v 1. odpovědi.

Nahoru Odpovědět  ±0 25.7.2013 17:33
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Michal Žůrek (misaz):

Ahoj, omlouvám se za zpoždění. Neumím jQuery, ale řekl bych javascriptu kde mám elementy img, ty bych si dal do pole a pak bych je postupně schovával/zobra­zoval.

Nahoru Odpovědět  +1 25.7.2013 18:00
Nesnáším {}, proto se jim vyhýbám.
Avatar
Salieri
Člen
Avatar
Odpovídá na David Čápka
Salieri:

Do konzole nevypíše nic.

Nahoru Odpovědět 25.7.2013 18:48
Hlavní zlo? **Školství a Matematika**!
Avatar
Salieri
Člen
Avatar
Nahoru Odpovědět 25.7.2013 19:13
Hlavní zlo? **Školství a Matematika**!
Avatar
Salieri
Člen
Avatar
Salieri:

Takže, nikdo neví? :(:(

Nahoru Odpovědět 25.7.2013 23:09
Hlavní zlo? **Školství a Matematika**!
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 20 zpráv z 20.