Get Fancybox to cooperate with Plone's News Item image

问题

I had a problem with Plone and Fancybox not playing nicely on News Items. So, for News Items, the image is uploaded directly with the content item and is stored at http://yoursite.com/the-news-item/image. The image is displayed with a default link to /the-news-item/image_view_fullscreen.

I have Fancybox working on most other images fine, but couldn't get the .js to work with this image. My .js call looked like:

<script type="text/javascript">
  $(document).ready(function() {
    /* Simple image gallery. Uses default settings */
    $("a[href$='.jpg'],a[href$='.png'],a[href$='.gif'],a[href$='/image']").attr('rel', 'gallery').fancybox();
  });
</script>

And I changed the default link to /the-news-item/image. With this method, the link remained as just a static link that opened up the image in a new page.

回答1:

Nachtigall's proposal works, if the link hasn't been customized.

As you have customized it to '/image', add that to your href-selector-chain and additionally tell fancybox which MIME-Type it is dealing with, by applying the class 'fancybox.image' to the link in the news-item's template.

Quoting the docs:

"Script uses the href or data-fancybox-href attribute of the matched elements to obtain the location of the content and to figure out content type you want to display. You can specify type directly by adding classname (fancybox.image, fancybox.iframe, etc)"

来源：https://stackoverflow.com/questions/20555635/get-fancybox-to-cooperate-with-plones-news-item-image