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

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Joachim
      Long time user and huge fan of PW, but this time I can't find an answer to my question this time:
      For my social media buttons, I have a Repeater field called var_link_web with two fields: one is for the URL, and the other is an Images field containing two images that are used as a background-image for a <div>, of which the second is the ':hover' version (although activated through JavaScript here). 
      There are four instances of this Repeater, of which two are 'turned off'.
      I use the following PHP in my _main.php to call them, wrapped in <p><?php == ?></p>:
      $s_m_button = $variables->var_link_web; foreach($s_m_button as $button){ $button_image = $button->var_link_image->first->height(80); $button_image2 = $button->var_link_image->eq(1)->height(80); echo " <a href='$button->var_link_url'> <div class='image_link' style='background-image:url({$button_image->url})' onMouseOver='this.style.backgroundImage=url({$button_image2->url})' onMouseOut='this.style.backgroundImage=url({$button_image->url})'> </div> </a>"; }; ($variables leads to an unpublished page with several fields I want to have easy access to, and is defined in _init.php.)
      However, this gives me the following result:

      I have no idea where the extra <p>'s come from. The URL field has the 'HTML Entity Encoder' turned on. What's even weirder is that the HTML source file seemingly renders correctly:
      <p> <a href='https://www.facebook.com/'> <div class='image_link' style='background-image:url(/site/assets/files/1045/icons-facebook-square.0x80.png)' onMouseOver='this.style.backgroundImage="url(/site/assets/files/1045/icons-facebook-square2.0x80.png)"' onMouseOut='this.style.backgroundImage="url(/site/assets/files/1045/icons-facebook-square.0x80.png)"'> </div> </a> <a href='https://www.instagram.com/'> <div class='image_link' style='background-image:url(/site/assets/files/1046/icons-instagram-square.0x80.png)' onMouseOver='this.style.backgroundImage="url(/site/assets/files/1046/icons-instagram-square2.0x80.png)"' onMouseOut='this.style.backgroundImage="url(/site/assets/files/1046/icons-instagram-square.0x80.png)"'> </div> </a> </p> Removing the JavaScript has no effect. I'm probably missing something obvious, but am at a loss here.
       
      Thank you in advance!
    • By Marvin
      Hello, excuse me
      I'm new at processwire, i want to ask about a master detail system (Inheritance system) using a processwire. Can we create a Inheritance table using a processwire, and how we create it? Thank you for the help
    • By Marvin
      Hi,
      I'm still new at processwire, i want to ask, i was create a website with sign in system, but i want to add a access roles/permission for each user at my website. For now, i just can create a login user without any permission and the user data became as a pages in my processwire.
      Here i attach my code for login
      <?php $note = $note2 = $hidden =""; if($input->get->id == "logout") { $session->remove('login_id'); } if($input->post->submit) { $email = $sanitizer->email($input->post->email); $pass = $sanitizer->text($input->post->pass); $result = $pages->find("email=$email, text_1=$pass"); if(!$email || !$pass) { $note = "Data belum lengkap"; } else { if($result->count > 0) { $session->login_id = "$result"; $hidden = "style = 'diplay:none'"; $url=$pages->get("/files/")->httpUrl; header("Location:$url"); die(); } else { $note = "Akun tidak ditemukan"; } } } ?> And this code for login form
      <div class="frow-container"> <div class="frow centered mt-50"> <div class="col-md-1-3"> <div class="box p-40 shadow-light"> <h2 class="mb-20 text-center" <?=$hidden?>>Database Partitur<br>GII HIT</h2> <form method="post" <?=$hidden?>> <label>Username <input type="text" name="email"></label> <label>Password <input type="password" name="pass"></label> <input type="submit" name="submit" value="Masuk"> </form> <p class="notif"><?=$note;?></p> <div class="text-center"><?=$note2;?></div> </div> </div> </div> </div> Just for remember, my user data now is a pages, and i cannot give any permission to user data.
      Thank you very much for help.
    • By Marvin
      Hello,
      I'm new at process wire and i want to make an web using upload file and showing it at the table as a link to open it at the new tab. I wa succed while upload a file, but how i showing it as a link at the table to open it at the new tab of my browser? Any suggestion may helpfull
      Here i attach my code below :
      This code is for upload it to back-end (process wire)
      <?php $note = $note2 = $hidden =""; if($input->post->submit){ $upload_path = $config->paths->assets.'files/upload/'; if(!is_dir($upload_path)){ if(!wireMkdir($upload_path)) throw new WireException("No upload path"); } $original = $sanitizer->text($input->post->original); $indonesia = $sanitizer->text($input->post->indonesia); $other = $sanitizer->text($input->post->other); $composer = $sanitizer->text($input->post->composer); if(!$original || !$indonesia || !$other || !$composer){ $note = "Data tidak lengkap"; } else { $newFile = new WireUpload("song_files"); $newFile->setMaxFiles(1); $newFile->setOverwrite(false); $newFile->setDestinationPath($upload_path); $newFile->setValidExtensions(array('pdf','docx','doc')); $files = $newFile->execute(); if(!count($files)) { $newFile->error("No files received, so not creating page."); return false; } $newImg = new WireUpload("img_files"); $newImg->setMaxFiles(1); $newImg->setOverwrite(false); $newImg->setDestinationPath($upload_path); $newImg->setValidExtensions(array('jpeg','jpg','png','gif')); $files = $newImg->execute(); if(!count($files)) { $newImg->error("No files received, so not creating page."); return false; } $newPage = new Page(); $newPage->template = "files"; $newPage->parent = $pages->get("/files/"); $newPage->title = $original; $newPage->text_1 = $indonesia; $newPage->text_2 = $other; $newPage->text_3 = $composer; $newPage->of(false); $newPage->save(); foreach($files as $filename) { $filepath = $upload_path . $filename; $newPage->files->add($filepath); $newPage->message("Add file : $filename"); unlink($filepath); } $newPage->save(); } } ?> and this code to showing it as a link at the table
      <table class="border"> <tr> <th>No.</th> <th>Original Song Title</th> <th>Indonesia Song Title</th> <th>Other Song Title</th> <th>Composer</th> <th>File (pdf)</th> </tr> <?php $num = 1; $song; foreach($pages->get("/files/")->children as $child) { //showing every child at files parent directory $page == $child; $song = $pages->get("/files/".$child->id."/")->files; //showing uploaded files at child directory echo $child->id; echo "<tr><td>".$num++.".</td><td>".$child->title."</td><td>".$child->text_1."</td><td>".$child->text_2."</td><td>".$child->text_3."</td><td><a href='".$song->httpUrl."'</a>".$song->name."</td></tr>"; } ?> </table> Thank you for any suggestion
    • By picarica
      so i am trying to fetch dimensions of image using getimagesize() but it returns nothing, at least i think so, i want to feed it to data attribute, bit its emtpy, i tried feeding it the image directly or just image->url
      here is my source code

       
      foreach($page->repeat_body as $r_body) { /* other code here*/ if ($r_body->gallery_check == 1) { echo "<div class='my-gallery' id='grid-gallery' itemscope itemtype='http://schema.org/ImageGallery'>"; foreach($r_body->image as $image) { $options = array('quality' => 80, 'upscaling' => true, 'cropping' => 'north', 'sharpening'=>'medium'); $thumb = $image->size(400, 400, $options); $large = $image->size(1280, 0, $options); list($width, $height) = getimagesize($image->url); echo " <figure itemprop='associatedMedia' itemscope itemtype='http://schema.org/ImageObject'> <a href='$large->url' itemprop='contentUrl' data-size='$widthx$height' data-index='0'> <img src='$thumb->url' height='$height' width='$width' itemprop='thumbnail' alt='Beach'> </a> </figure>"; } echo "</div>"; } /* other code here*/ } now, the images are outputted correctly, i can open then and browse them
×
×
  • Create New...