I did understand that. I think you missed what I was trying to address. If you click once or twice on an image of set two, set one adopts the image behaviour of set two. So by doing that set one also gets the close button all of a sudden. Not a big deal, but likely not intended 
Hello @Mohammad
I like your lightbox examples and I also like the Shiraz flexigrid-image macro.
https://kookma-lightbox.tiddlyhost.com/##thumbnail-tagged%20images-8
https://kookma.github.io/TW-Shiraz/#examples%2Fadvanced%2Fflexgrid-gallery
I have a number of photos tagged as jpg and Spain, which have a caption field and original-date field. These are in a folder (wiki/files_photo/spain) alongside the wiki in folder (wiki)
A ViewTemplate displays the details including original-date and caption fields.
My problem is I would like to combine all three methods so as the “My Photos of Spain” tiddler shows the image caption and original-date below the image and when selected the lightbox shows the image as in your examples.
At present, the details are only shown when the individual tiddlers are selected/viewed.
Could you offer any help please
Thanks,
Scot
$ _user_flexigrid-image_macro.json (1.3 KB)
My Photos of Spain.json (183 Bytes)
$ _user_photo_ViewTemplate.json (436 Bytes)
Hi Scot,
If I summarize your problem, you like to have a central tiddler (my photos of spin) to show images using flexgrid, you also want to have caption and original date below each photo and on click have the lightbox effect!
Hello @Mohammad
Yes that is exactly what I would like.
“My Photos of Spain” should show both the caption and original-date at the bottom of the images. (As in the ViewTemplate for all Tiddlers tagged jpg).
I am just not sure how the filter should be written.
Scot
Assume you have all macros and stylesheet, the below macro shall be changed to show caption and original date
\define flexgrid-image4(filter)
<div class="flex-row">
<$list filter=<<__filter__>> counter=counter>
<div class="flex-col-4" style="min-height:180px">
<$macrocall $name=lbox img=<<currentTiddler>> id=counter/>
<$link to=<<currentTiddler>> >
<h3><<currentTiddler>></h3>
</$link>
{{!!caption}} - {{original-date}}
</div>
</$list>
</div>
\end
Note to the macrocall and lbox.
Hello @Mohammad
thanks for your quick reply.
I changed the flexigrid-image macro to read
\define flexgrid-image4(filter)
<div class="flex-row">
<$list filter=<<__filter__>> counter=counter>
<div class="flex-col-4" style="min-height:180px">
<$macrocall $name=lbox img=<<currentTiddler>> id=counter/>
<$link to=<<currentTiddler>> >
<h3><<currentTiddler>></h3>
</$link>
{{!!caption}} <br>
{{!!original-date}}
</div>
</$list>
</div>
\end
note: {{!!original-date}}
This works fine, showing the image as required but it also lists the filename of the image (Tiddler Title) as well as the caption and original-date.
E.g.
CIMG0001.JPG
Calpe Spain June 2017
20170215
If its not too much trouble, could I request another change.
Is it possible to link the caption (Calpe Spain June 2017) to the title (CIMG0001.JPG) and to format the original-date field as
Date Taken : <$link to={{!!title}}><$view field="original-date" format="date" template="DDD DDth MMM YYYY"/></$link>
Scot
Yes, you almost did it! Change the below part:
<$link to=<<currentTiddler>> >
<h3><<currentTiddler>></h3>
</$link>
{{!!caption}} <br>
{{!!original-date}}
to what information/link you like to be shown under image! So you can put your wikitext instead of what I uses
Date Taken : <$link to={{!!title}}><$view field="original-date" format="date" template="DDD DDth MMM YYYY"/></$link>
so the revised macro should be like (assuming you keep caption)
\define flexgrid-image4(filter)
<div class="flex-row">
<$list filter=<<__filter__>> counter=counter>
<div class="flex-col-4" style="min-height:180px">
<$macrocall $name=lbox img=<<currentTiddler>> id=counter/>
{{!!caption}} <br>
Date Taken : <$link to={{!!title}}><$view field="original-date" format="date" template="DDD DDth MMM YYYY"/></$link>
</div>
</$list>
</div>
\end
1 Like