PHP for Fancybox 3 doesn't work

[kuba2]

Hello

I am using the Fancybox 3 gallery and I have a problem loading the images from the backend via PHP into the imagegallery.

Please help with the PHP....

I am using the Gallery with one preview image:

http://codepen.io/fancyapps/pen/jyEGGG/?editors=1000

 

Here is the original code:

<h3>Gallery with one preview image</h3>

<p>
  To show only one or a few images but have a large gallery, simply hide the rest of the links. <br />
  Optionally, use <code>data-thumb</code> for thumbnail image.
</p>
<p>
    <a href="https://c1.staticflickr.com/1/357/31876784275_12286240d4_h.jpg" data-fancybox="images-single">
      <img src="https://c1.staticflickr.com/1/357/31876784275_fbc9696913_m.jpg" />
    </a>
</p>

<div style="display: none;">
  
  <a href="https://farm3.staticflickr.com/2947/33594572585_b48eba935b_k_d.jpg" data-fancybox="images-single"
     data-thumb="https://farm3.staticflickr.com/2947/33594572585_46ca00f3a5_m_d.jpg"></a>
  
  <a href="https://farm3.staticflickr.com/2859/33395734202_522f9d8efd_k_d.jpg" data-fancybox="images-single"
     data-thumb="https://farm3.staticflickr.com/2859/33395734202_15a81c4ef3_m_d.jpg"></a>
  
</div>

 

How do I put all my images into the div?

I guess it is quite simple, but I have failed all day trying to implement this. My folder in the backend with the images is called 'galerie'.

 

I have tried something like this with a foreach array but it doesn't work.

<h3>Gallery with one preview image</h3>

<p>
  To show only one or a few images but have a large gallery, simply hide the rest of the links. <br />
  Optionally, use <code>data-thumb</code> for thumbnail image.
</p>
<p>
    <a href="https://c1.staticflickr.com/1/357/31876784275_12286240d4_h.jpg" data-fancybox="images-single">
      <img src="https://c1.staticflickr.com/1/357/31876784275_fbc9696913_m.jpg" />
    </a>
</p>

<div style="display: none;">
  
	<?php

              foreach($page->galerie as $image) {
                echo "<a href='{$image->url}' data-fancybox="images-single" title='{$thumbnail->description}'></a>";
              }

            ?>  
  
</div>    

  

 

 

Thank's a lot for any help!

 

Jakob

[microcipcip]

Aren't you missing the "data-thumb" attribute in your hidden div?

[abdus]

<?php foreach($page->galerie as $image) {
  	// where's $thumbnail defined? it should have been $image->description, I suppose?
	echo "<a href='{$image->url}' data-fancybox="images-single" title='{$thumbnail->description}'></a>"; 
} ?>

You might need to change $thumbnail to $image, are you getting any error? Do you have TracyDebugger installed?

[kuba2]

7 hours ago, microcipcip said:

Aren't you missing the "data-thumb" attribute in your hidden div?

I don't think I need the data-thumb attribute, it works well without it

[Christophe]

Do you have $config->debug = true; in /site/config.php and/or TracyDebugger installed in order to help you?

What about using data-fancybox='images-single' instead of data-fancybox="images-single"?

galerie is a simple image field, isn't it?

Isn't the img tag missing?

Shouldn't it be something more or less like:

<?php foreach($page->galerie as $image) {
    echo "<a href='{$image->url}' title='{$image->description}' data-fancybox='images-single'>";
    echo "<img src='{$thumbnail->url}' alt='{$image->description}' title='{$image->description}' />";
    echo "</a>";
} ?> 

But you could also use $thumbnail->description.

I guess you have defined $thumbnail...

(NB: not sure the {} are needed in this case as there is only one -> used.)

Edited April 7, 2017 by Christophe

[kuba2]

This works! Thanks

    <div class="column nopad" id="quadrat2-footer ">

              <p>
                  <a href="https://c1.staticflickr.com/1/357/31876784275_12286240d4_h.jpg" data-fancybox="images-single">
                    <img src="https://c1.staticflickr.com/1/357/31876784275_fbc9696913_m.jpg" />
                  </a>
              </p>


        <div style="display: none;">
          



            <?php

              foreach($page->galerie as $image) {
                echo "<a href='{$image->url}'  data-fancybox='images-single' title='{$image->description}'></a>";
              }

            ?>   
             



             </div>


    </div>