Autor Zpráva
Nich
Profil
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
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
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!!

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:

Prosím používejte diakritiku a interpunkci.

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