Witam serdecznie po dłuższym czasie nieobecności. Mam galerię fresco (lightbox), gdzie zasada byłaby taka:

w php w pętli foreach ma mi wyswietlic pierwszy obraz z katalogu, a po kliknieciu w niego ma wyswietlic wszystkie obrazy z tego katalogu, z kolei w skrypcie galerii (fresco) obrazy sa wyswietlane w js... jak to polaczyc zeby najlepiej zrobic to w petli w php?

petla

[PHP] pobierz, plaintext 
<section id="photos">
		<?php foreach (array_reverse($folder) as $f): ?>
			<?php $images = glob($pathToPictures.$f['id']."/*.*"); ?>
            <?php if (count($images) != 0): ?>
            	<?php $gallery = implode(', ', $images); ?>
            	<a id="gallery" class="link text-center fresco" data-fresco-group="gallery">
            		<img class="miniatura lazyload" src="<?php echo $images[0]; ?>">
            		<div class="pasek">–––</div>
            		<span class="minititle"><?php echo $f['title']; ?><br><small>Full story</small></span>
            	</a>
    		<?php endif ?>
    	<?php endforeach ?>
	</section>
[PHP] pobierz, plaintext 

js fersco wyglada mniej wiecej tak

[HTML] pobierz, plaintext 
<script>
	$(document).ready(function() {
		$('#art').bind('click', function() {
			Fresco.show([
          { url: '/images/default/index/art/frans_hals.jpg',  },
          { url: '/images/default/index/art/rembrandt.jpg', caption: "Rembrandt, The Night Watch, 1642" },
          { url: '/images/default/index/art/charles_le_brun.jpg', caption: "Charles Le Brun, The Repentant Magdalen, 1655" },
          { url: '/images/default/index/art/reynolds.jpg', caption: "Sir Joshua Reynolds, The Countess of Dartmouth, 1757" }
        ]);
      });
    });
	</script>
[HTML] pobierz, plaintext 

wykombinowałem coś takiego:

[PHP] pobierz, plaintext 
<section id="photos">
		<?php foreach (array_reverse($folder) as $f): ?>
			<?php
			$images = glob($pathToPictures.$f['id']."/*.*");
			$list = implode(", ", $images);
            if (count($images) != 0): ?>
            	<a id="gallery<?php echo $i; ?>" class="link text-center fresco" href="#" data-fresco-group="gallery<?php echo $i; ?>">
            		<img class="miniatura lazyload" src="<?php echo $images[0]; ?>">
            		<div class="pasek">–––</div>
            		<span class="minititle"><?php echo $f['title']; ?><br><small>Full story</small></span>
            	</a>
    		<?php endif ?>
    		<script>
    		$(document).ready(function() {
				$('#gallery<?php echo $i; ?>').on('click', function() {
					Fresco.show([<?php for ($i = 0; $i < count($images) - 2; $i++) {echo "'".$images[$i]."', ";} echo "'".$images[count($images) - 1]."'"; ?>], 2);
      			});
			});
			</script>
			<?php $i++ ?>
    	<?php endforeach ?>
	</section>
[PHP] pobierz, plaintext 

ale w konsoli wychodzi mi:

(index):252 Uncaught TypeError: Fresco.show is not a function
at HTMLAnchorElement.<anonymous> ((index):252)
at HTMLAnchorElement.dispatch (jquery-3.2.1.min.js:3)
at HTMLAnchorElement.q.handle (jquery-3.2.1.min.js:3)
(anonymous) @ (index):252
dispatch @ jquery-3.2.1.min.js:3
q.handle @ jquery-3.2.1.min.js:3

Moze glupie pytanie, ale dzis juz mnie nic nie zdziwi:
dolaczyles w ogole te biblioteke do strony?

mam, tylko wlasnie przeczytalem ze w darmowej zwersji nie idzie z js'a funkcja....

jest opcja zeby to obejsc, zeby wyswietlic pierwsze zdjecie z petli a podlinkowalo ono do galerii z folderu?

Nie, js nie ma dostepu do plikow na serwerze. To ty musisz wylistowac i powiedziec dla js jakie pliki tam masz.

ok, wykombinowałem to tak:

[PHP] pobierz, plaintext 
<section id="photos">
		<?php
		$i = 0;
		foreach (array_reverse($folder) as $f): ?>
			<?php
			$x = 0;
			$images = glob($pathToPictures.$f['id']."/*.*");
            if (count($images) != 0): ?>
            	<?php for ($x = 0; $x < count($images) - 1; $x++): ?>
            		<?php if ($x == 0): ?>
            			<a class="link text-center fresco" href="<?php echo $images[$x]; ?>" data-fresco-group="gallery<?php echo $i; ?>">
            				<img class="miniatura" src="<?php echo $images[$x]; ?>">
            				<div class="pasek">–––</div>
            				<span class="minititle"><?php echo $f['title']; ?><br><small>Full story</small></span>
            			</a>
            		<?php else: ?>
            			<a class="fresco"  src="<?php echo $images[$x]; ?>" data-fresco-group="gallery<?php echo $i; ?>" style="display: none;">
            				<img src="<?php echo $images[$x]; ?>">
            			</a>
            		<?php endif ?>
            	<?php endfor ?>
    		<?php endif ?>
    	<?php
    	$i++;
    	endforeach;
    	?>
	</section>
[PHP] pobierz, plaintext 

teraz tylko problem jest w fakcie, że jak klikne w tą powiedzmy okładkę, wszystko z petlami jest ok, tyle ze nie wyswietla mi kolejnych zdjec, bo one w koncu maja diplay: none. Maja to oczywiscie tylko po to, ze by wyswietlalo sie tylko 1 zdjecie a nie caly folder... Ja to z kolei ominac?

Pokaz jak wyglada przykladowy czysty kod html oraz js dla tej galerii.
Dokladnie taki sam kod masz wygenerowac przez php. Tu nie ma zadnej magii

http://www.frescojs.com/documentation/usage

problem w tym, ze u nich galeria, czyli okladka + niewidoczna reszta zdjec w grupie, jest okreslona tylko w js, i dostepna w wersji pro - dlatego robie to tak, zeby nie korzystajac z js i wersji pro miec ten sam efekt

u mnie teraz wyglada to tak: http://test.smusic.pl/

ok zauwazylem blad - wczesniej mialem ta linie jako <img> a nie <a> i zostalo "src" zamist "href" - teraz działa idealnie.