Read more about web design Cork and drop us a message!

Using edits to the great jmd_img_selector

I’ve edited the existing Textpattern plugin for inserting images into the body of a Textpattern article to allow the insertion of lightbox style images. I have used Jquery and Magnific Popup to achieve the effect.

No rel=lightbox what gives?

The rel=lightbox attribute is on the verge of being deprecated and so this will result in an error via the w3c validator and be considered bad practice in the future. This method is future proof, especially as we are going to use Textpattern forms to output the code for the lightbox meaning you can change and update it at any point in the future and this will reflect across all images on the website with one change of code in the form.

Step 1 – Update the plugin code

Please note this will override your existing plugin code for jmd_img_selector so if in doubt set up on your local server first.

jmd_img_selector_v1.0b2.txt

Once plugin is published, see the extensions tab and click ‘create css’, note I have made the width and height percentage based so the thickbox width/height does not apply. I also had trouble with the css implementing when ‘create css’ was not clicked so I have removed the code check which hid this option, create css is now always visible, also handy if you delete the style by mistake as it didn’t seem to work properly for me and stayed hidden even after the style was deleted.

Create css for plugin

Step 2 – Insert your lightbox code, this example uses Magnific Popup (Responsive Lightbox Effect)

Download Magnific Popup

Magnific Popup Docs

Handy Google link for Jquery:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="<txp:site_url />magnific-popup/magnific-popup.css">

<!-- Magnific Popup core JS file -->
<script src="<txp:site_url />magnific-popup/jquery.magnific-popup.js"></script>

Step 3 – Create your form code to output lightbox images using plugin

Create a form in Textpattern called jmd_images:

My form code is as below, you can customise yours however you like depending which lightbox solution you’re using and which class you’ve applied to those images to trigger the lightbox. You can apply caption and any other Textpattern attributes available to you.

<a href="<txp:image_url />" title="Click to view original" class="jmd_image"> <txp:thumbnail /> </a>

Step 4 – You need to make a call to initialise the popup after document.ready

$('.jmd_image').magnificPopup({ gallery: { // options for gallery enabled: true }, type: 'image' // other options });

If you’re using a different class name in the form code be sure to change it above.

That’s it! You now have access to the lightbox feature on the jmd_img_selector plugin :)

- Posted - Categories

Back to Top

Random Web Design Testimonials

Hilary at her Company Proximo Design created a webpage for me at Gourmet Burger Bistro this year. I wanted to get it up and running quickly and I could not have been more satisfied with the speed and quality of her results.
Best of luck in the future Hilary and I look forward to continuing our business relationship.
Michael Condon
Gourmet Burger Bistro

Michael Condon Owner, Gourmet Burger Bistro