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.
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.
Step 2 – Insert your lightbox code, this example uses Magnific Popup (Responsive Lightbox Effect)
Download Magnific Popup
Handy Google link for Jquery:
<!-- 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">
Step 4 – You need to make a call to initialise the popup after document.ready
// options for gallery
// 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 :)