kuba2

PHP for Fancybox 3 doesn't work

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

Share this post


Link to post
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?

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
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


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By kuba2
      Hello
      I am learning PHP and made a codeacademy PHP online course. Basic stuff and interesting course for free.
      But there is a do/while exercise I can't get my head around:
       
       
      In the following, there is a flipcoin example, which flips, as long the result is head.
      In the do statement there is the if and the else 
      The if condition is $flip and it echoes a H letter for Head. The else echoes a T for Tail.
      $flip is random 0 or 1
      My question:
      How can the if and else statements be H or T if $flip is random? I don't understand the $flip variable, because in my head it can be 0 or 1.....therefor if is not one fixed value, because of the rand(0,1) it can change
      How does the programm to put out a H or a T?
      I hope my question is clear enough
       
       
      Thanks for any clarification
      Jakob
      <!DOCTYPE html> <html> <head> <link type='text/css' rel='stylesheet' href='style.css'/> <title>More Coin Flips</title> </head> <body> <p>We will keep flipping a coin as long as the result is heads!</p> <?php $flipCount = 0; do { $flip = rand(0,1); $flipCount ++; if ($flip){ echo "<div class=\"coin\">H</div>"; } else { echo "<div class=\"coin\">T</div>"; } } while ($flip); $verb = "were"; $last = "flips"; if ($flipCount == 1) { $verb = "was"; $last = "flip"; } echo "<p>There {$verb} {$flipCount} {$last}!</p>"; ?> </body> </html>  
    • By fbg13
      The 2018 Guide to Building Secure PHP Software
       
    • By dragan
      I'm puzzled by something I thought would be rather easy:
      I want to send a request to a PW page. It's POST, and I define a header, and send data as JSON.
      I need to send data in the following format:
      $ POST https://mysite.com/foo/bar/ {"headers": {"Authorization": "Bearer API_KEY", "Content-Type": "application/json"}, "body": {"fields": {"Name": "<get name>", "Department": "<get team>", "Home Address": "<get address>", "Phone #": "<get phone>", "Personal Email Address": "<get email>", "Birthday": "<get birthday>", "Date Added": "<call>currentDate</call>" }}} This is supposed to be sent via a Chatbot engine (Dexter).
      In the PW page that should handle this, $_POST is always empty, as is $_REQUEST. Same for PW's $input or if ($config->ajax) {}.
      I get the header, but no data.
      So I dug deeper, and tried this:
      @ini_set("allow_url_fopen", true);
      @ini_set("always_populate_raw_post_data", true);
      $data = json_decode(file_get_contents('php://input'), true);
      $d    = print_r($data, true); // I store this, along with the header infos and timestamp in a PW page-field (instead of using file_put_content)
      I checked page permissions, I made sure I use pagename/, i.e. with trailing slash only, to avoid stripping the header away due to redirects (which somebody in an older forum thread once highly suggested).
      I tried to send the same stuff that the chatbot does via CURL. Nothing. PW error logs don't report anything (site is still in dev-mode).
      PW 3.0.81 - everything else runs just fine.
      Any ideas what I should change? Any more PHP/Apache settings maybe?
      Help is highly appreciated.
       
    • By SeoGuy
      I'm looking for someone familiar with processwire based in the USA, preferably in South Florida. I need a part-time developer to help with a few projects.
      Our previous developer was incredible but just disappeared into thin air... no call, no show, no text, no facebook...
      Please message me for details.
    • By ryanC
      Hi, I have php includes in my template file that are working fine....however I need to have some additional includes within a text area field, where I enter my HTML content.
      For example, this code at the top of my template file:
      <?php $myPath = $config->urls->templates;?> Allows me to have something like this on every page:
      <?php include("includes/footer.inc.php"); ?> So far so good, but I have a text area field named page_content, where I would like to manually enter additional includes. 
      If I enter this in that text area field, I get a photo:
      <img src="images/photo.jpg" />
      But if I enter this in that same field, nothing happens at all:
      <?php include("includes/phone.inc.php"); ?> Any thoughts? I have reviewed this thread https://processwire.com/api/ref/files/include/ but I don't think it gets at what I'm looking for.
      Thanks!