I'm not completely sure how this would work, but probably you could do it with

<xsl:value-of select="umbraco.library:Replace(bodyText, '&lt;img ', '&lt;img rel=&quot;fancybox&quot; ')"/>

The best would be to control the situation a bit more. Fx add a mediapicker-datatype (set it to advanced) or the upload-datatype.

Hi froad

For it to work you need to add an anchor around the img...

I don't think that XSLT will be the most proper way to achieve this. Since users with JavaScript disabled won't benefit from the gallery anyway it should be fairly easy to achive this using Jquery.

I don't know if you have a class or an id for the content in your webpage like

But asuming that you do I think you should be able to write something like this...(from the top of my head).

$('#content img').each(function(){
var imgSrc = $(this).attr('src').text();
$('').insertBefore($this);
$('').insertAfter($this);
});

I'm not sure this will work straight away, probably some typos in there but I hope you get the idea? :-)

/Jan

Argh...the code formatting was messed up...

The code

$('#content img').each(function(){
var imgSrc = $(this).attr('src').text();
$('<a rel="fancybox" href="/forum/'&amp; imgSrc &amp;'">').insertBefore($this);</a>
<a rel="fancybox" href="/forum/&amp; imgSrc &amp;">$('</a>').insertAfter($this);
});

/Jan

Thx!

One more thing... I would like to show the small image as clickable but a bigger version when clicked; image_400.jpg.

Im no js-guru, could the imagename be splitted like we do in xslt to get the bigger image..?

Yes that should be possible. If you know that all images are fixed with the ending "_400.jpg

You should be able to do something like this...

$('#content img').each(function(){
var imgSrc = $(this).attr('src').text();
var imgName = imgSrc.split('.');
$('<a rel="fancybox" href="'&amp; imgName[0] &amp;'_400.jpg">').insertBefore($this);
<a rel="fancybox" href="/forum/&amp; imgSrc &amp;">$('</a>').insertAfter($this);
});

Hope this helps...

/Jan

Argh...really having trouble with the formatting of the code. THIS should be correct without any typos etc.

$('#content img').each(function(){
var imgSrc = $(this).attr('src').text();
var imgName = imgSrc.split('.');
$('<a rel="fancybox" href="'&amp; imgName[0] &amp;'_400.jpg">').insertBefore($this);
$('</a>').insertAfter($this);
});

Thx, Jan.

I reeeeealy like you :)

You're welcome. Hope that it works...otherwise let me know and we will get it to work ;-)

/Jan

Theres something fishy with this line:

$(
 
'<a rel="fancybox" href="'&amp; imgName[0] &amp;'_500.jpg">').insertBefore($this); 

I cant find the error, can you?

We use macro's for this, we have created 2 XSLT files:

* one that expects you to select an image in the media section, and you get a input dialog for desired width & height of the thumbnail

* one that expects a folder in the mediaselection to be selected (contentpicker) and loops through all the images below it (creating a mini-gallery of thumbnails)

We automatically create resizes of all the images so we don't have people download large images if they don't have to.

A walkthrough (this was made for 4.0.3 - DOES NOT WORK FOR 4.5):

The solution with macro is ok, but then you miss the preview of the image and the layout in the editor gets messed up.

Im trying the javascript solution but I still get error.

<script type="text/javascript"> 
$('#content img').each(function(){
var imgSrc = $(this).attr('src').text();
var imgName = imgSrc.split('.');
var imgName2 = imgName + '_500.jpg';
$('<a rel="fancybox" href="' + imgName2 + '">').insertBefore($this);
$('</a>').insertAfter($this);
});
</script>

Ive added this to the bottom of my document. The browser complains on the 3rd row: "Object doesn't support this property or method"

keep in mind that

* the way you suggest doesn't allow you to put hyperlinks on images (say you have a page with some logo's of partner websites in de page content area
* you can't deny specific images to have a popup either

If you're working for a customer, this could become an issue (depends on how and where you use this javascript...

As for your script, don't you need to include this?:

Also get rid of the .txt() after src

Thx!

What do you mean with it doesnt allow to put hyperlink to an image?

I finalyy made the code not to produce an error but the insertbefore and after doesnt seem to work:

<script type="text/javascript"> 
$(document).ready(function() {
$('#content img').each(function(){
alert(this);
var imgSrc = $(this).attr('src');
var imgName = imgSrc.split('.');
var imgName2 = imgName + '_500.jpg';
$('<a rel="fancybox" href="' + imgName2 + '">').insertBefore(this);
$('</a>').insertAfter(this);
});
});
</script>

>> "What do you mean with it doesnt allow to put hyperlink to an image?"

You can't put a logo in the page content area and have it link to an external/internal page or website

Im still wrestling with this problem.

Now I at least get some rendering with this code:

$('.ContentPane img').each(function(){
var imgSrc = $(this).attr('src');
var imgName = imgSrc.split('.');
var imgName2 = imgName + '_500.jpg';
$('<a class="group" href="' + imgName2 + '">').insertBefore($(this));
$('</a>').insertAfter($(this));
});

The problem is that the .insertAfter doesnt work as I want. The output looks like this:

<a href="/media/244/Exbild,jpg_500.jpg" class="group"></a>
<img height="247" width="248" alt="Exbild.jpg" src="/media/244/Exbild.jpg">

As you see the </a> is not inserted after.

Why?

Finally solved it:

$('.ContentPane img').each(function(){
var imgSrc = $(this).attr('src');
var imgName = imgSrc.split('.');
var imgName2 = imgName + '_500.jpg';
var str = '<a class="group" href="' + imgName2 + '">' + '<img src="' + imgSrc + '"/>' + '</a>';
$(this).replaceWith(str);
});

is working on a reply...