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

Back to Top

Random Web Design Testimonials

“I worked with Hilary for a time and during that period I found her to be extremely helpful and articulate. Her work was of highest standard and I was also able to observe how she interacted with her clients. While providing a top class service she maintained friendly and helpful services with them, listened to what they wanted and made appropriate suggestions. Hilary also assisted me with my work and provides services to the local community at large. I have no hesitation in recommending Hilary for any work.”

Andrea Harte - Undergraduate at University of Limerick