Jump to content

PHP for Fancybox 3 doesn't work


kuba2
 Share

Recommended Posts

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

Link to comment
Share on other sites

<?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?

Link to comment
Share on other sites

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 by Christophe
  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

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>

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...