Autor Zpráva
Baterie
Profil
#1 · Zasláno: 16. 5. 2013, 15:03:00 · Upravil/a: Baterie o okamžik později
Odpovědět Citovat
Čau, mám mega prosbu. Potřebuju prolínat dva obrázky za sebou v loopu. Obrázky bych potřeboval přes <DIV>.
Hledal jsem už všude a všechno, ale žádný kód mi nefunguje. Vím že je to lehké, že se pouze mění alpha, ale já nejsem v javascriptu zdatný. Nemohl by mi někdo prosím ukázat nejaký příkladný kód, který by fungoval? děkuji.

//Vím že už to tu bylo omlouvám se
Sylar
Profil
#2 · Zasláno: 16. 5. 2013, 18:05:27
Odpovědět Citovat
Baterie:
Pokud můžeš, použij plugin jQuery - osobně používám např. tento - http://jquery.malsup.com/cycle/ - vytvořit prolínačku obrázků je pak otázka minutky, dvou.
Baterie
Profil
#3 · Zasláno: 16. 5. 2013, 19:04:30
Odpovědět Citovat
jo to už jsem taky viděl, ale ja nechapu jak to nastavit :D
Baterie
Profil
#4 · Zasláno: 16. 5. 2013, 20:11:59
Odpovědět Citovat
Poradíš jak to nastavit? JQuery neumim
margin
Profil *
#5 · Zasláno: 16. 5. 2013, 20:26:46
Odpovědět Citovat
Baterie:
„JQuery neumim“
To jsme dva. Umíš používat hlavu? Pokud ano, tak koukni do zdrojáku http://jquery.malsup.com/cycle/basic.html
Chamurappi
Profil
#6 · Zasláno: 16. 5. 2013, 20:47:12
Odpovědět Citovat
Reaguji na Baterii:
Jde to udělat docela snadno i bez jQuery. Budou ty obrázky vždy jen dva? To by stačilo měnit průhlednost jednoho obrázku, pod nímž by byl schovaný druhý.
Baterie
Profil
#7 · Zasláno: 16. 5. 2013, 21:08:30 · Upravil/a: Baterie
Odpovědět Citovat
jop jen dva


hele koukal jsem na ten cycle.
Pouze jsem to okopíroval a spustil u mně. Nefunguje to :) jsou tam čtyři obrázky pod sebou
Chamurappi
Profil
#8 · Zasláno: 16. 5. 2013, 21:47:49
Odpovědět Citovat
Reaguji na Baterii:
Proč potřebuješ obrázky přes <div>? (Předpokládám, že tím myslíš pozadí na <div>u.)
Mají stejné rozměry?
Baterie
Profil
#9 · Zasláno: 16. 5. 2013, 21:53:27 · Upravil/a: Baterie
Odpovědět Citovat
mají. no nejlíp by bylo, kdyby to byli obrázky z css.

nevíte co s tím cycle


Tak jsem to rozchodil. V souboru header.html se mi mění obrázky.
Je tu ale druhý problém. Chtěl jsem to vložit jako obrázek hlavičky webu v css tímto způsobem:

background: url('js/header.html');

Jenže to nefunguje.. Neporadite proč?


Prosím, já jsem z toho už úplně mimo.Dělám se s tím už dva dny.
Teď jsem se snažil ten cycle kod vložit do souboru index.php. Nefunguje. Když přejmenuju ten soubor na index.html, tak se to spustí, ale samozřejmě mi zmizí php obsah.

JÁ UŽ NEVÍM, DOŠLI MI NÁPADY
Chamurappi
Profil
#10 · Zasláno: 16. 5. 2013, 23:32:15
Odpovědět Citovat
Reaguji na Baterii:
„DOŠLI MI NÁPADY“
Na to pozor, nápady jsou neživotné.

„Jenže to nefunguje.. Neporadite proč?“
Protože HTML není grafický formát, nejde ho používat jako obrázek na pozadí.

„nevíte co s tím cycle“
Já bych to smazal a nahradil něčím kratším :-)

Dejme tomu, že máš dva <div>y v sobě, každému dáš na pozadí jeden obrázek, tomu vnitřnímu dáš id="mizejici".
Funkce na prolínání by vypadala takhle: 
function prolinani(id, prodleva, doba)
{
  var element = document.getElementById(id);
  var mizi;
  setInterval(function()
  {
    var start = +new Date();
    mizi = !mizi;
    var interval = setInterval(function()
    {
      var delta = (new Date() - start) / doba;
      if(delta > 1)
      {
        clearInterval(interval);
        delta = 1;
      }
      element.style.opacity = mizi ? 1 - delta : delta;
      element.style.filter = "alpha(opacity=" + (mizi ? 1 - delta : delta) * 100 + ")";
    }, 13);
  }, prodleva);
}
A volání umístěné za celou HTML konstrukcí takhle: 
prolinani("mizejici", 5000, 400);
Baterie
Profil
#11 · Zasláno: 17. 5. 2013, 07:30:41
Odpovědět Citovat
udělal jsem to teda tak.no ale mně jde o to jak to vložit do php. protože v html souboru html mi to funguje, ale v php souboru se objeví dva obrazky pod sebou
Baterie
Profil
#12 · Zasláno: 17. 5. 2013, 09:38:09
Odpovědět Citovat
Poradite proč mi sakra nefungujou dvě věci?:
1.Nemůžu soubor index.php nechat jako php, ale musí být index.html, jinak skript nefunguje.
2. Potřebuju přenést ten div do pozadí, protože nad ním má být ještě nadpis. Použil jsem z-index ale stránka nereaguje.

Tady je kod:

index.html: 
 <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Mobilus.cz</title>
<link href="style.css" rel="stylesheet" type="text/css" media="all"/>
 <style type ="text/css " >
.slideshow { margin: auto }
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
</style>
<!-- include jQuery library -->
<script type ="text/javascript " src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js " ></script>
<!-- include Cycle plugin -->
<script type ="text/javascript " src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js " ></script>
<script type ="text/javascript " >
$(document).ready(function() {
    $( '.slideshow' ).cycle({
    fx: 'fade' ,
    speed: 2000,
    timeout: 10000 
 }); 
});
</script>
</head>
<body>
<div id="wrapper">
        <div id="logo">
            <h1><a>Mobilus</a></h1>
            <p>Databáze mobilů a tabletů </p><iframe frameBorder="0" scrolling="no" src="vyber.php" width="262" height="70"></iframe>
        </div>
 </div> 
    <div id="header" class ="slideshow ">
<img src ="images/header.png " width =" 1200" height ="200" / >
<img src ="images/header2.png " width =" 1200" height ="200" / >
</div>
    <div id="menu">
        <ul>
            <li><a href="index.php?s=index" title="">Domů</a></li>
            <li><a href="index.php?s=databaze" title="">Databáze</a></li>
            <li><a href="index.php?s=recenze-testy-videa" title="">Recenze, Testy, Videa</a></li>
            <li><a href="index.php?s=kontakt" title="">Kontakt</a></li>
             <li><a style="color: lime" href="index.php?s=nabor" title="">Nábor písálků a testerů</a></li>
<? 
 include('login/include/session.php');
 if($session->isAdmin()){
 echo "<li><a href=\"index.php?s=insert\">Vkládání</a></li>";
}
else;
?>
?>
        </ul>
    </div>
    <div id="page">
        <div id="content">
            <div class="post">
                <div class="entry">
<?php
error_reporting ( E_ERROR | E_PARSE ); 
$s=$_GET['s'];
if(!isset($_GET['s'])) include('obsahy/index.php');
else {
if(file_exists("obsahy/".$s.".php")) include ("obsahy/".$s.".php");
else include ('obsahy/404.php');
}
?>
                </div>
            </div>
            <div style="clear: both;">&nbsp;</div>
        </div>
        <!-- end #content -->
        <div id="sidebar">
        <br>
    <table align="center">
<tr><td>
<h3 align="center">Přihlášení</h3>
</td></tr>
<?php include ('login/main.php')?>
</table>
<br>
<table align="center">
<tr><td>
<h3 align="center">Databáze</h3>
</td></tr><tr><td>
<?php include ('vyber.php')?>
</td></tr> 
</table> 
        </div>
        <!-- end #sidebar -->
<div style="clear: both;">&nbsp;</div>
 </div>
<div id="footer">
    <p>Copyright &copy; 2013 Mobilus.cz Designed by BaterieCZ</a></p>
</div>
</body>
a tady style.css: 
 html, body {
    height: 100%;
}
input
{
    border: 1px solid #000;
    border-radius: 5px ;
    -webkit-border-radius: 10px ;
    -moz-border-radius: 10px ;
}

body {
    margin: 0px;
    padding: 0px;
    background: #3A3A3A;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #000000;
}

h1, h2, h3 {
    margin-top: 0px;
}

p, ol, ul {
    margin-top: 0px;
}

p {
    line-height: 170%;
}

ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

strong {
}

a {
    color: #000;
}

a:hover {
    text-decoration: none;
    
}

a img {
    border: none;
}

img.border {
}

img.alignleft {
    float: left;
    padding-right: 25px;
}

img.alignright {
    float: right;
}

img.aligncenter {
    margin: 0px auto;
}

hr {
    display: none;
}

/** WRAPPER */

#wrapper {
}

.container {
    width: 90%;
    margin: 0px auto;
}

.clearfix {
    clear: both;
}

/** HEADER */

#header {
    width: 90%;
    height: 200px;
    margin: 0px auto;
    border: 1px solid #000;
    border-radius: 5px ;
    -webkit-border-radius: 10px ;
    -moz-border-radius: 10px 
}

/** LOGO */

#logo {
    width: 90%;
    height: 20px;
    margin: 0px auto;
}

#logo h1 a {
    display: block;
    margin: 0px;
    padding: 40px 0px 0px 0px;
    font-size: 130px;

}

#logo p {
    margin: -145px 0px 0px 330px;
    padding: 0px;
    font-size: 20px;
}

#logo iframe {
    margin: -100px 0px 0px 665px;
    padding: 0px;
    font-size: 20px;
}


#logo a {
    text-decoration: none;
}

/** MENU */

#menu {
 background-color: gray; 
    width: 90%;
    height: 48px;
    margin: 0px auto;
    border: 1px solid #000;
    border-radius: 5px ;
    -webkit-border-radius: 10px ;
    -moz-border-radius: 10px ;
}

#menu ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    line-height: normal;
}

#menu li {
    float: left;
}

#menu a {
    display: block;
    height: 32px;
    margin: 0px 0px 0px 0px;
    padding: 16px 25px 0px 25px;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: bold;
    color: #FFFFFF;
}

#menu a:hover {
    background-color: black;
    text-decoration: none;
    border-radius: 1px ;
    -webkit-border-radius: 10px ;
    -moz-border-radius: 10px ;
    color: #FFF;
}

/** PAGE */

#page {
    width: 90%;
    margin: 0px auto;
    padding: 0px 0px 5px 0px;
}

/** CONTENT */

#content {
 border: 1px solid #5EB2B9;
 background-color: #FFE; 
    float: left;
    width: 78%;
    min-height: 400px;
    padding-right: 30px;
    border: 1px solid #000;
    border-radius: 5px ;
    -webkit-border-radius: 10px ;
    -moz-border-radius: 10px ;
}

/** SIDEBAR */

#sidebar {
    float: right;
    width: 18%;
    min-height: 400px;
    background-color: #FFEAAA;
    border: 1px solid #000;
    border-radius: 5px ;
    -webkit-border-radius: 10px ;
    -moz-border-radius: 10px ;

}

#sidebar h2 {
    padding: 0px 0px 10px 0px;
    text-transform: uppercase;
    font-size: 18px;
}

#sidebar li ul {
    margin: 0px 0px 0px 20px;
    padding: 0px 0px 20px 0px;
}

#sidebar li li {
    padding: 0px 0px 5px 0px;
}

#sidebar p {
    margin: 0px 0px 20px 20px;
}

/** POST */

.post {
    margin-bottom: -5px;
}

.post .title {
    margin: 0px;
    padding-bottom: 10px;
    letter-spacing: -1px;
}

.post .title a {
    border: none;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 22px;
    color: #000000;
}

.post .meta {
    display: block;
    margin-top: -15px;
    padding: 5px 0px;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-style: italic;
}

.post .meta a {
}

.post .entry {
    text-align: justify;
     color: #000;
 
    padding: 10px 15px 10px 15px;
}

/** FOOTER */

#footer {
    width: 960px;
    margin: 0px auto;
    background: url(images/img05.jpg) repeat-x left top;
}

#footer p {
    margin: 0px;
    padding: 10px 0px 10px 0px;
    text-align: center;
    font-size: 11px;
}

#footer a {
    color: #000000;
}
Časová prodleva: 11 let

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Odkud se sem odkazuje


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0