Jump to content
Troost

[SOLVED] Lightbox with child images

Recommended Posts

Hiya PW's!

I'm currently busy with a simple portfolio theme for a girlfriend. She asked me for a lightbox, but it won't work out the way as I wanted it... (ofcourse)
I'm using the Lightbox by Lokesh Dhakar https://lokeshdhakar.com/projects/lightbox2/

The structure is:

Home
-  Portfolio
--    Item 1
--    Item 2
--    Item 3

The page echoes the 'werk' field on the item page. Which is one single image. I rendered the next string for text in the PW field.

<a href='{url}' data-lightbox='image' data-title='{title}'><img src='{url}' alt='{description}' class='masonry-content image' /> <div class='hover-text'>$project->title</div> </a>


Here's my code

<div class="row portgallery animated fadeInUp margdown100">	
		<div class="masonry-wrapper">
			<div class="masonry">
				<?php 
				$projects = $portfolio->children("template=portfolioitem, sort=-created");
				foreach ($projects as $project) {
				    if ($project->werk) {
				      echo "<div class='masonry-item animated fadeInUp'>";
				      echo "$project->werk";
				      echo "</div>";
				    }
				  }
				 ?>
			</div> <!-- /masonry -->
		</div> <!-- /masonry wrapper -->
	<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.js"></script>

The images opens in a new windows instead of the lightbox, since I've read the documentation of the Lightbox I can't find where im going wrong.
Also the div hover-text ain't echoing out the $project->title

Can someone help me out?
The goal is to open the images from the home/portfolio page in the lightbox. So that they can navigate trough the images.

Here is a link of the project
https://tinyurl.com/yxhg9xvs

Thanks in advance,
Hugo

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...