Lightbox for individual images

The CMS Questions
1

Hi there,

I like to implement a lightbox on my website. So far I have implemented the css and js files. So far no problem. But I want while writing an new post decide whether I like to link an image with lightbox or not. So I that I could insert a image with this code in the editor:

(image: test1.jpg)

But how can I now put a link arround this image with looks like this:

<a href="images/image-1.jpg" data-lightbox="image-1" data-title="My caption">(image: test1.jpg)</a>

Is there a way to do this with the panel editor?

Thanks for your help.

Benny

2

the link tag supports a class, role and rel attribute. otherwise you could always create a custom tag yourself to support the data-lightbox.

edited:
if you are using imageset plugin be aware that it comes with an enhanced image-tag. if you create your own tag you will lose that optimization.

1 Like
3

Ah ok … thanks for your very fast answer!

So the best way would be a new custom tag i.e. “lightbox” and then configure it to look like this:

<a href="images/image-1.jpg" data-lightbox="image-1" data-title="My caption"><img source ="test.jpg"><img></a>

Sounds great … I’ll give it a try! Thanks!

4

untested… something like this…

<?php

kirbytext::$tags['lightbox'] = array(
  'attr' => array(
    'title'
  ),
  'html' => function($tag) {
  	$img = $tag->page()->image($tag->attr('lightbox'));
  	if(!$img) {
  		return 'IMAGE NOT FOUND';
  	}
    
  	$link = brick('a', $img->html())
  		->attr('href', $img->url())
  		->attr('data-lightbox', $img->name())
  		->attr('data-title', $tag->attr('title'));
  		
  	return $link->html();
  }
);

edited: fixed code.
edited #2: fixed images() to image()

2 Likes
5

Hi

thanks for your great help. I tried to modify yoour suggested code because I want to have one image in the article (perfect size et.) which is linked to a bigger sized pictured (same picture beat bigger).

So I tried this code fur the custom tag:

<?php

kirbytext::$tags['lightbox'] = array(
  'attr' => array(
	'bild'
  ),
  'html' => function($tag) {

    $img = $tag->page()->images($tag->attr('lightbox'));
	$img_big = $tag->page()->images($tag->attr('bild'));
	//Bild Datei holen
	
	return '<a href="' . $img_big->url() . '" data-lightbox="' . $img_big->name() . '" data-title="' . $img_big->name() . '"><img src="' . $img->url() . '" alt="' . $img_big->name() . '"></a>';

  }
);

Ans this is in my markdown file:

(lightbox: boss3.jpg bild: boss3_big.jpg)

I added both images to the folder for the article.

and this is what I get in the rendered html:

<p><a href="" data-lightbox="" data-title=""><img src="" alt=""></a></p>

So two questions:

  1. What is wrong with my tag php code?

  2. How do I get rid of the <p> tag?

Thanks

Benny

6
  1. my mistake. it should be image instead of images… see here
  2. thats the p wrapper created by kirbytext. i do not know how to remove that in a non-hacky way. maybe adjust your css so it does not matter or if you need a list of images try using the ul/li element starting with a -. a list is easier to find and style with css than the p.
- (lightbox: boss1.jpg bild: boss1_big.jpg)
- (lightbox: boss2.jpg bild: boss2_big.jpg)
- (lightbox: boss3.jpg bild: boss3_big.jpg)
1 Like
7

Thanks for your great help!

Now everything is working fine!

Thank you very much!

Benny