Using Foobox with blog posts

@marksmithhfx,
Sorry I missed your issue a few days back. If you are able to edit the html that is output you will be able to do what you are wanting, by adding a rel attribute to the image links. If you can edit the HTML output by your theme, then let me know and I can provide more detail.

If you have no control over the html, then FooBox free is not able to add custom selectors, like you can do with FooBox PRO, so unfortunately that advanced usage is not possible with the FREE version.

@bradvin – I’ll give this another go. BTW, no way to delete messages here? Anyway, I am wondering if my html post will benefit from putting the “code” character in first. We will try that and see. Here’s the html if it works….

<a href="https://inquotationmarks.com/en/wp-content/uploads/2017/06/22Carry-out-a-random-act-of-kindness-with-no-expectation-of-reward-safe-in-the-knowledge-that-one-day-someone-might-do-the-same-for-you.22-Princess-Diana.png"><img src="https://inquotationmarks.com/en/wp-content/uploads/2017/06/22Carry-out-a-random-act-of-kindness-with-no-expectation-of-reward-safe-in-the-knowledge-that-one-day-someone-might-do-the-same-for-you.22-Princess-Diana-300x300.png" alt="" width="300" height="300" class="alignnone size-medium wp-image-483" /></a>

Voila, success ?? (now if only I could delete the badly formed messages)

• This reply was modified 7 years, 5 months ago by marksmithhfx.

@marksmithhfx – I see you found the “code” tick; thanks for using it. There’s also a “code” button in the toolbar. You can highlight your code and click that to format the code block. I’ve also removed your other replies to clean up the thread.

@bradvin Hi Brad, please have a look at the code I posted above and let me know if you think it can be modified to add the rel attribute you mentioned. I am anxious to get this working in Foobox.

Thanks

Mark

hi Mark

you just need to add a common rel attribute to your anchor tags, that foobox will then use to load them all into the same lightbox.

Using your code as an example (I removed the full URL’s and formatted the html for readability):

<a rel="blog-post-foobox" href="Princess-Diana.png">
  <img src="Princess-Diana-300x300.png" 
       alt="" width="300" height="300" 
       class="alignnone size-medium wp-image-483" />
</a>

Brad, thanks so much! That really worked well. I don’t suppose there is a trick to get it to work across page boundaries? <g>

Thanks!! Mark

hey Mark

It will work with any image link on the page as long as the HTML exists on the page at the time that FooBox runs.

Hi Brad, old thread but I thought I would update you and also throw in a feature request. Your suggestion was brilliant and works great. The positioning of the rel=”” is important when dealing with getresponse as an rss feed. When I put it in the position you suggested, before the href, the feed was blocked from going out (or at least the image was). It’s been awhile so I could retest this if you want. I moved it to after the href=”” just before >< and it worked great. No issues.

When I open the image in the lightbox it displays image 1 of 10, then 2 of 10, etc at the bottom centre of the image. Nothing is displayed to the right (ie in the lower right corner). As it turns out, my images are “paged” so at the bottom of the list there is a little page counter that lists 1, 2, 3, up to 23 currently. I was wondering if that could be incorporated in foobox in the lower right just to the right of the image counter… a page counter? And when you get to image 10 of 10 it skips to the next page.

I hope I have described that well. Probably hard to do but thought I would ask anyway. For reference, the site is https://www.inquotationmarks.com (PS if it’s not clear I could mock up an image describing what I am requesting).

Thanks
Mark