85083

Lightbox only show's first image

Question:

I'm currently working on a website with a lightbox. (<a href="https://noelboss.github.io/featherlight/" rel="nofollow">Featherlight</a>)

Now the problem is, the lightbox only load's the first image, even when I click on another image, it still show's the first.

<a href="http://hugotroost.nl/jeff" rel="nofollow">You can try it yourself over here</a>

The code I used is

<div class="grid-sizer"></div> <?php if($page->numChildren(true)) { echo "<ul class='project'>"; foreach($page->children as $child) { if ($child->head_image) { $image = $child->head_image; echo "<li class='item'><a href='#' data-featherlight='#mylightbox'><img id='mylightbox' src='{$image->url}' class='image'></a><p class='worktitle'>$child->title

</li>"; }} echo "</ul>";} ?> </div>

The site runs on ProcessWire, I made a setup like this

<ul><li>Home</li> <li>Schilderingen <ul><li>Work 1 (Here just one work, with the information)</li> <li>Work 2 (etc)</li> <li>Work 3</li> </ul></li> <li>Tekeningen <ul><li>Work 1</li> <li>Work 2</li> <li>Work 3</li> </ul></li> </ul>

So there is no going left or right, just that one single image that has to popup.

Does someone have any idea how to fix this, that each single image works.

Thanks in advance!

Answer1:

I am not sure how exactly Featherlight library works, but it is probably connected with HTML IDs. You can have each id used only once, but you duplicate id "mylightbox" for every image in foreach.

Try to change the foreach to something like this:

foreach($page->children as $childIndex => $child) { if ($child->head_image) { $image = $child->head_image; echo "<li class='item'><a href='#' data-featherlight='#mylightbox" . $childIndex . "'><img id='mylightbox" . $childIndex . "' src='{$image->url}' class='image'></a><p class='worktitle'>$child->title

</li>"; } }

Recommend

  • Getting numChildren for large data sets
  • XSL split a string based on delimiter BUT leave all other tags the same
  • Why is Grails hasMany List size wrong?
  • (PyQt) QTreeView - want to expand/collapse all children and grandchildren
  • Function JavaScript : on Menu CSS HTML
  • Can't delete li from to-do list
  • Cut the background to expose the layer below
  • Does Apportable support to build library binary (.a/.so)?
  • Jenkins: FATAL: Could not initialize class hudson.util.ProcessTree$UnixReflection
  • Stop Bash Script if Hive Fails
  • How to add git credentials to the build so it would be able to be used within a shell code?
  • How do I pass the string value parameter of the selected list item from an auto-populated dropdown l
  • Switching to Release Build causes runtime error in Web Reference
  • DomPDF {PAGE_NUM} not on first page
  • Using jQuery closest() method with class selector
  • FB SDK and cURL: Unknown SSL protocol error in connection to graph.facebook.com:443
  • Can Jackson SerializationFeature be overridden per field or class?
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • javascript inside java/jsp code
  • htaccess rewriting URLs with multiple forward slashes
  • Display Images one by one with next and previous functionality
  • Upload files with Ajax and Jquery
  • Web-crawler for facebook in python
  • Do I've to free mysql result after storing it?
  • Jquery - Jquery Wysiwyg return html as a string
  • QuartzCore.framework for Mono Develop
  • A cron job substitute?
  • json Serialization in asp
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • sending mail using smtp is too slow
  • Busy indicator not showing up in wpf window [duplicate]
  • costura.fody for a dll that references another dll
  • Why is Django giving me: 'first_name' is an invalid keyword argument for this function?
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • How can I use `wmic` in a Windows PE script?
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?
  • How to push additional view controllers onto NavigationController but keep the TabBar?