how to ignore non-image <a href tag

[bsack23]

First, i am really impressed by this library and it's a vast improvement over the lightbox script i was using previously. great work!

my issue is something that others have probably encountered before and i'm sure there's a way around it, i just can't figure it out ...

i have a page with thumbnails of posters for events, with links to a page about the event just below them, like this

<div><a href="/visual-images/ScienceArt17.jpg" title="" ><img src="/visual-images/thumbs/ScienceArt17.jpg" width="150" height="150" alt="" /></a>
  <span><a href="science-art/5736.html"><strong>17.0: <em>Signal to Noise</em><br />03.09.16</strong></a>
  </div>

the problem is that the script tries to load the second <a as though it were an image, which, of course, it is not.
this is the jQuery script i'm using on the page:
$(document).ready(function() { $('.sciartgrid').magnificPopup({ delegate: 'a', type: 'image', tLoading: 'Loading image #%curr%...', mainClass: 'mfp-img-mobile', gallery: { enabled: true, navigateByImgClick: true, preload: [0,1] // Will preload 0 - before current, and 1 after the current image }, image: { tError: '<a href="%url%">The image #%curr%</a> could not be loaded.', titleSrc: function(item) { return item.el.attr('title') + ''; } } }); });

how do i convince this script to ignore my non-image links?

thank you,
bill

[bsack23]

this is the page in place ...
https://www.hallwalls.org/science-art-new.php