CODEWITHSUNDEEP
javascriptjqueryplone
feesh
feesh

Reputation: 1248

Plone's captioned images source?

I use one of those jQuery libraries, Fancybox, to make images show up in a modal pop-up style thing on top of the text. This works fine for mostly everything, however! When placing an image in TinyMCE and selecting "caption" and then making the image a link, the code Plone generates ends up having two of the same links, which result in a weird "Fancybox gallery slideshow" of the same image repeated twice. Here's why —

HTML from within TinyMCE:

<p><a class="internal-link" href="resolveuid/af2954f5af084d5aa359a480b33c5368" target="_self" title="Test test test"><img class="image-left captioned" src="resolveuid/af2954f5af084d5aa359a480b33c5368/@@images/image/med" /></a>

HTML generated when viewing the page:

<dl class="image-left captioned" style="width:300px;">
<dt>
<a class="internal-link" target="_self" href="http://127.0.0.1:8081/CAES/images/alison-king.jpg" title="Test test test" rel="gallery"><img width="300" height="200" title="alison king" alt="alison king" src="http://127.0.0.1:8081/CAES/images/alison-king.jpg/@@images/98443898-0834-45ea-b724-8f40a0c92e0c.jpeg"></a>
</dt>
<a class="internal-link" target="_self" href="http://127.0.0.1:8081/CAES/images/alison-king.jpg" title="Test test test" rel="gallery"><dd class="image-caption" style="width:300px;">test</dd>

I get why this happens and it's clever, but doesn't work for my purposes. Does anyone know where this code is generated in the ZMI? Or, any ideas on a jQuery solution to target all links except for that second one? Here's my existing Fancybox code:

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

It will work with the following code, but then it only applies Fancybox to the first image link of a captioned image, and won't apply to any other non-captioned images. 

<script type="text/javascript">
  $(document).ready(function() {
    $("dl.captioned dt a").attr('rel', 'gallery').fancybox();
  });
</script>

And lastly, I tried to apply Fancybox to everything and then afterwards remove it from just the second dl.captioned link with jQuery, but can't quite get it, this still resu:

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

Thanks!

Upvotes: 2

Views: 239

Answers (1)

Ida
Ida

Reputation: 3965

I cannot exactly reproduce the output you get, however can reproduce the doubled images in the gallery.

The doubling results, because the inserted image will be wrapped in a link to the image-file automagically (another JS, assumingly applied by TinyMCE), when you enable the captioning.

So, to resolve your request, it should be sufficient to NOT mark the images as links manually, when using the captioning anyway.

Nota: As you are using the <script>-tag, it seems you insert the JS in a template, yet it is recommended to embed it as a link in the header via JS-registration, especially, if you want this to happen globally. Alternatively add an expression-attribute in the registration, to restrict when the script should be delivered. If you have special reasons to only have this in a certain template, it is recommended to use the javascript-slot. Insert JS via a <script>-tag at the bottom of a document in order to execute it after the DOM is loaded, isn't necessary anymore, respectively discouraged, we can use document.ready (or window.onload) instead.

Steps I took to reproduce: Create a site, enable captioning via TinyMCE's controlpanel, install collective.fancybox, install a product of my own with a registered Javascript and insert:

(function($) {
    $(document).ready(function() {
        // Look for all links in content-area, 
        // add rel-attribute to make it a gallery.
        // Skipped distinction of whether it's an image or not, 'cause I'm
        // louzy lazy and you know how to DIY anyway ;)
        $("#content-core a").attr('rel', 'gallery').fancybox();
    });
})(jQuery);

Upvotes: 1

Related Questions