Mając kod liczacy tworzę sobie spokojnie galeryjkę, aż do napotkania kolejnego błędu. Mianowicie znowu problem z ifami. Nie wiem jak to rozwiązać. Jak daję na dalej, aż do ostatniego obrazka to potem mini obrazek znika. Ale jak daję wstecz, to się nie pojawia. Dopiero się pojawia jak daję pierwszy obrazek. Od razu piszę że to mój pierwszy kod js i bazuję tylko na kursach z internetu. Galeria do zobaczenia: tutaj.
CODE
<script type="text/javascript">
var i = 1;
var max = 4;
function przod_tyl(gdzie)
{
if (gdzie=='p')
{
i++;
a = i-1;
b = i+1;
document.getElementById('obrazek').src = i+'.jpg';
document.getElementById('pozycja').innerHTML = i+'/'+max;
document.getElementById('zdjecie1').src = a+'.jpg';
document.getElementById('zdjecie2').src = i+'.jpg';
document.getElementById('zdjecie3').src = b+'.jpg';
if (i >= max)
{
document.getElementById('dalej').style.display = 'none';
document.getElementById('wstecz').style.display = 'inline';
document.getElementById('zdjecie3').style.display = 'none';
}
else if (i < max)
{
document.getElementById('dalej').style.display = 'inline';
document.getElementById('wstecz').style.display = 'inline';
document.getElementById('zdjecie1').style.display = 'inline';
document.getElementById('zdjecie3').style.display = 'inline';
}
}
else if (gdzie=='t')
{
i--;
a = i-1;
b = i+1;
document.getElementById('obrazek').src = i+'.jpg';
document.getElementById('pozycja').innerHTML = i+'/'+max;
document.getElementById('zdjecie1').src = a+'.jpg';
document.getElementById('zdjecie2').src = i+'.jpg';
document.getElementById('zdjecie3').src = b+'.jpg';
if (i == 1)
{
document.getElementById('wstecz').style.display = 'none';
document.getElementById('dalej').style.display = 'inline';
document.getElementById('zdjecie1').style.display = 'none';
document.getElementById('zdjecie3').style.display = 'inline';
}
else if (i >= max)
{
document.getElementById('wstecz').style.display = 'inline';
document.getElementById('dalej').style.display = 'inline';
document.getElementById('zdjecie1').style.display = 'inline';
document.getElementById('zdjecie3').style.display = 'inline';
}
}
}
</script>
<center>
<img src="1.jpg" width="400" height="400" id="obrazek">
<table><tr><td width="70" align="center" bgcolor="silver">
<div id="wstecz" onclick="przod_tyl('t')" style="display: none;"><b> < Wstecz</b></div>
</td>
<td width="70" bgcolor="silver" align="center">
<b><div id="pozycja">1/4</div></b>
</td>
<td width="70" bgcolor="silver" align="center">
<div id="dalej" onclick="przod_tyl('p')" style="display: inline;"><b>Dalej ></b></div>
</td></tr>
<!-- miniatury -->
<tr>
<td height="100"><img id="zdjecie1" src="0.jpg" width="100" height="100" style="display: none;" /></td>
<td><img id="zdjecie2" src="1.jpg" width="100" height="100" /></td>
<td><img id="zdjecie3" src="2.jpg" width="100" height="100" style="display: inline;" /></td>
</table>
var i = 1;
var max = 4;
function przod_tyl(gdzie)
{
if (gdzie=='p')
{
i++;
a = i-1;
b = i+1;
document.getElementById('obrazek').src = i+'.jpg';
document.getElementById('pozycja').innerHTML = i+'/'+max;
document.getElementById('zdjecie1').src = a+'.jpg';
document.getElementById('zdjecie2').src = i+'.jpg';
document.getElementById('zdjecie3').src = b+'.jpg';
if (i >= max)
{
document.getElementById('dalej').style.display = 'none';
document.getElementById('wstecz').style.display = 'inline';
document.getElementById('zdjecie3').style.display = 'none';
}
else if (i < max)
{
document.getElementById('dalej').style.display = 'inline';
document.getElementById('wstecz').style.display = 'inline';
document.getElementById('zdjecie1').style.display = 'inline';
document.getElementById('zdjecie3').style.display = 'inline';
}
}
else if (gdzie=='t')
{
i--;
a = i-1;
b = i+1;
document.getElementById('obrazek').src = i+'.jpg';
document.getElementById('pozycja').innerHTML = i+'/'+max;
document.getElementById('zdjecie1').src = a+'.jpg';
document.getElementById('zdjecie2').src = i+'.jpg';
document.getElementById('zdjecie3').src = b+'.jpg';
if (i == 1)
{
document.getElementById('wstecz').style.display = 'none';
document.getElementById('dalej').style.display = 'inline';
document.getElementById('zdjecie1').style.display = 'none';
document.getElementById('zdjecie3').style.display = 'inline';
}
else if (i >= max)
{
document.getElementById('wstecz').style.display = 'inline';
document.getElementById('dalej').style.display = 'inline';
document.getElementById('zdjecie1').style.display = 'inline';
document.getElementById('zdjecie3').style.display = 'inline';
}
}
}
</script>
<center>
<img src="1.jpg" width="400" height="400" id="obrazek">
<table><tr><td width="70" align="center" bgcolor="silver">
<div id="wstecz" onclick="przod_tyl('t')" style="display: none;"><b> < Wstecz</b></div>
</td>
<td width="70" bgcolor="silver" align="center">
<b><div id="pozycja">1/4</div></b>
</td>
<td width="70" bgcolor="silver" align="center">
<div id="dalej" onclick="przod_tyl('p')" style="display: inline;"><b>Dalej ></b></div>
</td></tr>
<!-- miniatury -->
<tr>
<td height="100"><img id="zdjecie1" src="0.jpg" width="100" height="100" style="display: none;" /></td>
<td><img id="zdjecie2" src="1.jpg" width="100" height="100" /></td>
<td><img id="zdjecie3" src="2.jpg" width="100" height="100" style="display: inline;" /></td>
</table>