| Autor | Zpráva | ||
|---|---|---|---|
| Nich Profil |
#1 · Zasláno: 23. 1. 2010, 17:51:28
Když se to tak vezme, tak nechci vytvořit nic složitého :-). Potřebuji jen, aby se pod sebou zobrazilo 5 obrázků s dvěma posuvníkama (na začatku a na konci). Když kliknu na posuvník tak prostě jeden obrázek zmizí a na druhé straně galerky se zobrazí nový. Kámen úrazu je, že nevím jak do jquery dostat proměnné z PHP...
HTML/PHP kód - ten funguje v pořádku: //Zjistí se počet obrázků pro zobrazení
function pocet($directory='.')
{
return count(glob($directory."/fotos/*"));
}
$pocet_obrazku = pocet();
//Posuvník orázků - směr nahoru
echo "<a href='#' id='nahoru'>Nahoru</a>";
//Zobrazím obrázky
for ($i=1; $i<= $pocet_obrazku; $i++) {
echo "<div id='img_$i'>
<img src='fotos/$i.jpg' width='135px' height='90px' style='margin-bottom: 5px;' />
</div>";
$e++;
}
//Posuvník orázků - směr dolů
echo "<a href='#' id='dolu'>Dolů</a>";Jquery - tady je problém, že nevím jak předat z PHP proměnné: $(document).ready(function(){
//Tady bych potřeboval aby všechny obrázky od obrázku 5 zmizeli, jde o to aby na stránce bylo vidět jen 5 obrázků
//Udělal bych to přes cykl, ale nevím jak předat PHP proměnnou $pocet_obrazku do jquery ==> takže nesestavím podmínku na ukončení cyklu
$("#img_6").hide();
$("#img_7").hide();
//Pokud kliknu na odkaz s id='nahoru' tak zmizí obrázek s id='img_1' a obejví se id='img_6', který sem si před zobrazením stránky schoval
$("#nahoru").click(function() {
$("#img_6").show('slow');
$("#img_1").hide('slow');
});
//To samé jako odkaz id='nahoru' jen v opačném směru
$("#dolu").click(function() {
$("#img_1").show('slow');
$("#img_6").hide('slow');
});
}); Ty posuvníky sem ještě nedomyslel, aby to fungovalo univerzálně pro jakýkoliv počet obrázků... a to právě taky netuším jak udělat (-; |
||
| fajzen Profil |
#2 · Zasláno: 23. 1. 2010, 19:36:49 · Upravil/a: fajzen
Nich:
tie prebytočné obrázky by sa dali skryť už pri výpise, takto:
for ($i=1; $i<= $pocet_obrazku; $i++) {
echo "<div id='img_$i' style='display: " . ($i > 5 ? "none" : "block") . ";'>
<img src='fotos/$i.jpg' width='135px' height='90px' style='margin-bottom: 5px;' />
</div>";
$e++; // toto je tu na čo?
}
skrývanie až pomocou JavaScriptu však má spoje opodstatnenie - v prípade, že má návštevník JS vypnutý, stále bude vidieť všetky obrázky. V tom prípade by som dal tým divom s obrázkami nejakú spoločnú class, napr. obrazok, a vyzeralo by to takto:
$(document).ready(function(){
$('.obrazok').slice(5).hide();
});
Posuvníky by sa dali riešiť všelijako, navrhujem:
var current_img = 1;
var count_img = <?php echo $pocet_obrazku; ?>;
$(document).ready(function(){
$("#nahoru").click(function() {
if(current_img + 5 <= count_img) {
$("#img_" + (current_img + 5)).show();
$("#img_" + current_img).hide();
current_img++;
}
});
$("#dolu").click(function() {
if(current_img > 1) {
$("#img_" + (current_img + 4)).hide();
$("#img_" + (current_img - 1)).show();
current_img--;
}
});
});
Poznámka: JS musí byť inline (teda nie v externom súbore), alebo minimálne musí byť inline tá definícia premennej count_img |
||
| Nich Profil |
#3 · Zasláno: 24. 1. 2010, 15:54:25
fajzen:
to $e++ je tam zbytečně, to máš pravdu :-) ... jak se zkoušel udělat ten scriptík tak sem to tam zapomněl smáznout.... Jinak moc dík za ten upravenej kód, všecko funguje jak má! Jen sem si tam ještě trochu pohrál s efektama a s časováním.... moc dík!! |
||
|
Časová prodleva: 14 let
|
|||
0