TinyMCE + Insert image + Modal window

[nikola]

Would it be possible to add another checkbox beside "Link to larger version?" that would call fancybox or some similar script "in "Edit image" modal window that appears after you select your image in "Select image" modal window?

It would also need some sort of input field somewhere where you can define what class or rel triggers that script.

I want to avoid using bramus cssextras plugin for tinymce...

[ryan]

Anything is possible, but not sure I totally understand. What would the additional checkbox be for? What does the cssextras plugin do that you are wanting to duplicate?

[nikola]

Let's say I'm adding an image, then I set width and height and then I check "Link to larger version?".

This way image is opening in normal browser window. I would like to have an extra checkbox, for example "Use Fancybox" and when this is checked it would assign specified class or rel to that image so it can open in Fancybox window or with similar script.

An input field would exist somewhere where I would specify class or rel applied to an image.

Thx Ryan.

[ryan]

The "link to larger version" is actually intended to be without implementation so that you can implement it with a lightbox of your choice. Rarely in my sites do I actually leave it as literally linking to the larger version. Instead, I'll usually put in some javascript like this:

$(document).ready(function() {
    $("#bodycopy a:has(img)").fancybox();
}); 

Or if you want to add some attributes and do it that way:

$(document).ready(function() {
    $("#bodycopy a:has(img)").addClass('lightbox').attr('rel', 'gallery'); 
    $("a.lightbox").fancybox(); 
}); 

Now if you want to be able to support more then one way of linking to a large image (i.e. have one link to the larger version and another opening in a lightbox) then you'd probably need to take another approach (or maybe make a module). Let me know if that is your need.

[nikola]

I actually thought about that approach, but it would apply fancybox or similar effect to all image links throughout the content area (bodycopy). For instance, if I have an image linking to some url, page or file, the effect would be applied nevertheless to that link.

[ryan]

That's not a problem, you can just tell jQuery to only target <a> links that have an href pointing to your site's files. Something like this should work, though could be taken further too.

$(document).ready(function() {
    $("#bodycopy a[href*=site/assets/]:has(img)").fancybox();
}); 

[nikola]

Thanks Ryan, that should work for me.

[onjegolders]

The "link to larger version" is actually intended to be without implementation so that you can implement it with a lightbox of your choice. Rarely in my sites do I actually leave it as literally linking to the larger version. Instead, I'll usually put in some javascript like this:

$(document).ready(function() {
$("#bodycopy a:has(img)").fancybox();
}); 

Or if you want to add some attributes and do it that way:

$(document).ready(function() {
$("#bodycopy a:has(img)").addClass('lightbox').attr('rel', 'gallery');
$("a.lightbox").fancybox();
}); 

Now if you want to be able to support more then one way of linking to a large image (i.e. have one link to the larger version and another opening in a lightbox) then you'd probably need to take another approach (or maybe make a module). Let me know if that is your need.

Thanks Ryan, this really helped me out, is there anything your not good at?!

Is there anyway of passing a php variable to set the "rel" attribute. Ie: the $page->name and maybe the image description for the a "title" tag?

[diogo]

Is there anyway of passing a php variable to set the "rel" attribute. Ie: the $page->name?

You can put this on the header of the page:

<?php echo "<script><!-- define variables for JS -->
  var pageName = {$page->name},
  pageTitle = {$page->title},
  pageWhatever = {$page->whatever};
</script>"; ?>

and on your script:

$("#bodycopy a:has(img)").addClass('lightbox').attr('rel', pageName);

[onjegolders]

Hi thanks for that Diogo, unfortunately it's not picking up the variable.

I put the first bit of code in my head tags is that the right place?

Thanks

[diogo]

sorry, I should have mentioned that you have to put it before calling the javascript file:

<?php echo "<script><!-- define variables for JS -->
var pageName = '{$page->name}',
pageTitle = '{$page->title}',
pageWhatever = '{$page->whatever}';
</script>"; ?>

<script type="text/javascript" src="<?php echo $config->urls->templates?>scripts/main.js"></script>

edit: corrected the order and added quotation marks

[onjegolders]

Sorry Diogo, in your example there you put it after?

I've tried putting it before and I no longer get a pageName undefined error in the console but the rel isn't getting passed to the link?

[diogo]

It's before, already updated the post...

[onjegolders]

It's before, already updated the post...

Thanks I've no idea why this won't work though.

Code in full:

Within <head> tag:

<?php echo "<script><!-- define variables for JS -->
 var pageName = {$page->name}
</script>"; ?>

<script type="text/javascript" src="<?php echo $config->urls->templates?>scripts/scripts.js"></script>

In scripts.js:

$(document).ready(function() {
   $(".body_copy a:has(img)").addClass('fancy').attr({
    rel: pageName,
    title: pageName
   }); 
});

I also tried a single attribute but the values don't get passed to the anchor tag.

Strange

[diogo]

Ok, spotted! I forgot the quotation marks on javascript. Already corrected on the above code.

[onjegolders]

Ok, spotted! I forgot the quotation marks on javascript. Already corrected on the above code.

Perfect! Thanks, think the first var still needs the quotes, thanks for your assistance as ever Mr Diogo

Sorry to bug you....

Any idea how to pass the images description field to the a title attr?

These are images from within the body...

I have this currently on the scripts page

$(document).ready(function() {

var title = $(".body_copy a:has(img) img").attr("alt");

   $(".body_copy a:has(img)").addClass('fancy').attr({
    rel: pageName,
    title: title
   }); 

}); 

Which sort of works but it always passes the first image description to each anchor tag...

[diogo]

Yep, one was still missing

[onjegolders]

This seems to have done the trick

$(document).ready(function() {

$(".body_copy a:has(img)").addClass('fancy').attr({
rel: pageName,
title: "title"
});

$(".body_copy a:has(img)").attr("title", function() {
return $(this).find("img").attr("alt");
});
});

I'm sure it can be shortened and prettified but it's seems to be working - I really need to invest some time in learning jQuery!

Based on here:

http://stackoverflow...following-eleme

[diogo]

You are selecting twice the same element, and defining twice the same attribute. Not very efficient... Try this:

$(document).ready(function() {

$(".body_copy a:has(img)").addClass('fancy').attr({
       rel: pageName,
       title: function() {
                       return $(this).find("img").attr("alt");
               }
   });
});

note: I didn't test it

[onjegolders]

You are selecting twice the same element, and defining twice the same attribute. Not very efficient... Try this:

$(document).ready(function() {

$(".body_copy a:has(img)").addClass('fancy').attr({
rel: pageName,
title: function() {
return $(this).find("img").attr("alt");
}
});

note: I didn't test it

Thanks that's better though think it's lacking a });

[diogo]

You're right, I didn't close the $(document).ready(function() {

I'll do it now