kuba2

PHP for Fancybox 3 doesn't work

6 posts in this topic

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
1 person likes this

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 louisstephens
      I have been scratching my head on this one for a while, so I thought maybe someone could shed some light on this issue. I am using a grid layout (that I have created over the years) with a class for responsive images (very similar to bootstrap, but very stripped down). Using this, I created a gallery using a foreach loop, and included a "print button" to print each image. I got the classes and everything worked out, but I ran into a small problem with the print functionality. My images (which are around 2400px wide to fill the space) are just fine in the grid and on resize, but when I print, they "run off" the page. I understand that they are just too big to be printed in portrait mode, which led to me think that I could use $image->size(); to print a scaled down version of the image (which adds a bit more load time as now the site needs to load the image large scale and the scaled down version). However, I can't seem to wrap my head around serving just the scaled down version for print only (obviously display:none; doesn't do the trick). Has anyone tackled this before, or does anyone know of a more elegant solution to the conundrum that I have found myself in?
      The Foreachloop:
      $printclass = 1; foreach($page->galleries as $gallery) { $printclass++; $printimage = $gallery->gallery_image->width(600)->url; $out = ""; $out .= "<div class=\"row\">"; $out .= "<div class=\"grid-12\">"; $out .= "<img src=\"{$gallery->gallery_image->url}\" class=\"reimage\"/>"; $out .= "</div>"; $out .= "</div>"; $out .= "<div class=\"row\">"; $out .= "<div class=\"grid-12\">"; $out .= "<a href=\"#\" onClick=\"printCoupon('printable{$printclass}');\">Print</a>"; $out .= "</div> "; $out .= "</div> "; $out .="<div id=\"printable{$printclass}\"><img src=\"{$printimage}\"/></div>"; echo $out; }  
       
    • By modifiedcontent
      I am trying to integrate another script, Questions2Answer, with Processwire user management. The script needs an array with key/value pairs for user->name => user->id 
      The script provides an array $userids with active user->ids that looks like this var_dumped for a page with two users:
      array(2) { [0]=> int(1107) [1]=> int(41) } How can I take $userids, find the corresponding $user->names in Processwire as values and then return that to Q2A as a clean key/value array?
      This is probably basic PHP, but I have tried so many variations that I now completely lost the plot. Any pointers appreciated.
       
    • By timothy.m.wilson
      Good afternoon,
      I am attempting to loop through approximately 600 XML nodes. Each of those nodes has 2 child nodes (example below). One is an id for an existing page and the other contains values for a page reference field. I have put together a loop (below as well) to attempt to save each page with the label values. This all works....once. After getting the first XML node "label" saved to the correct page, nothing else is saved. I'm sure there is probably something that I have overlooked. But, I am also very new to this CMS. I'm hoping there is a veteran user who may be able to point me in the right direction. 
       
      <row>
          <id>1041</id>
          <labels>lifestyle|savings</labels>
        </row>
       
      foreach ($xml->row as $items) {
              
              //get page id to update and set output formatting to false
              $blog_page = $pages->get('id='.$items->id);
              $blog_page->of(false);
              //create array from pipe separated label values
              $labelsArray = explode('|', $items->labels);
              //loop through array to get page ids by page name
              $labelIDS = array();
              foreach ($labelsArray as $labelValue) {
                  $labelPage = $pages->get('name='.$labelValue);
                  array_push($labelIDS, $labelPage->id);
                  
              }
              //add labels to label field in post
              $blog_page->labels = $labelIDS;
              
              //save page
              $blog_page->save();
          
      }
    • By hellomoto
      I have the following import script being included in the homepage template file:
      <?php $mmpid = wire('pages')->get('template.name=makes')->id; // Manufacturers: $file = __DIR__.'/manufacturers.csv'; importCSV($file, 'mamo_manufacturer', $mmpid); // Models: $file = __DIR__.'/models.csv'; importCSV($file, 'mamo_model', 0, $mmpid); function importCSV($filepath, $template, $parent_id = null, $grandparent_id = null) { $csv = array_map('str_getcsv', file($filepath)); array_walk($csv, function(&$a) use ($csv) { $a = array_combine($csv[0], $a); }); array_shift($csv); # remove column header //echo '<pre>'; print_r($csv); echo '</pre>'; foreach($csv as $r) { $p = new Page(); $p->name = wire('sanitizer')->pageName($r['title']); $p->template = $template; if($parent_id !== 0||null) { $p->parent_id = $parent_id; } elseif($parent_id == 0||null) { //$parent = wire('pages')->get('title=' . $r['parent']); //echo $parent.' ';// echo $r['parent'].' '; echo $grandparent_id.' '; $parent = wire('pages')->get('title=' . $r['parent'] . ', parent_id=' . $grandparent_id)->id; echo $parent.' '; $p->parent_id = $parent; unset($r['parent']); } $p->save(); foreach($r as $k=>$v) $p->$k = $v; $p->save(); echo '<br>'; } } Output =
      Why is it running the ELSE when the condition for the IF is met? (the first 9 lines)
      All 14 models (lines past 9) are created under the first manufacturer. I've been messing with it, been able to get them to display the page IDs proper at one point for the models but still there's the standing issue of all of them being created under the first manufacturer nonetheless and also the ELSE running despite not being a condition of ELSE.
      What's up please...
    • By szabesz
      CodeRunner 2 is on sale at MacUpdate: https://www.macupdate.com/app/mac/38362/coderunner
      Mostly I use it for writing shell scripts, mocking up algorithms in PHP, JavaScript/jQuery. But is also supports other programming languages as well.
      https://coderunnerapp.com/
      "An advanced, highly flexible, and easy-to-use programming editor for your Mac. CodeRunner supports a large number of languages, and delivers big IDE features while remaining lightweight and clutter-free."