Hi all I need to build a link creator where I am able to set an ID="whatever" inside a A href link via te Silverstripe CMS admin.

Once I the user has linked to whatever image they have chosen I hope to be able to update that link with the ID="myclass" via a button, or style selction dropdown etc.

Just wondering if someone can point me into what I need to do to achieve this,

any would would be great, its for a fancybox use

If you can use classes rather than IDs then you can use the 'edit link' functionality in the cms. If you select the link and right click, select "Insert/Edit Link" and select the classname from the dropdown.

Note that the class has to exist in your typography (or editor) css files.

It doesn't need any css styles but it just needs to be in that file.

Hi Willr thanks for the reply yeah that way sounds a lot better, although I don't actually 100% understand, because the ID's I were calling were fancybox javascript, well I thought it was javascript??? I am just going off how the default fancybox file operated and I just copied that process.

My custom JS classes are here and I would call <a href="myimage.jpg" ID="single_image"> for example.

Javascript:

$(document).ready(function() {

/* This is basic - uses default settings */

$("a#single_image").fancybox();

$("a#example2").fancybox({
'titleShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});

$("a#example5").fancybox({
'titlePosition' : 'inside'
});

/* Using custom settings */

$("a#inline").fancybox({
'hideOnContentClick': true
});

/* Apply fancybox to multiple items */

$("a.group").fancybox({
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false
});

});

So your saying I can put or transfer the above into CSS??? If that is so can you show me an example of how that single_image class would be written in CSS.

Thanks for the help

Well you can use ID's or classes. See the following code

$("a#single_image").fancybox(); 

$("a.single_image").fancybox();

Which will use a class rather than an ID. This JS file you need to keep as a javascript file in your project and include it as a javascript file.

You also need to add a class to your typography.css file '.single_image' - this is because to select the class in the CMS it must exist in the typography.css. So add this to the bottom of themes/yourtheme/css/typography.css

.typography .single_image {}

By adding this you can then select the classname for links in the CMS like http://skitch.com/willrossi/dyk48/

Will thats excellent so CSS can double as a JS call is that what we are doing here???

Its all working great, only thing is currently with the CMS if I have an thumbnail of an image that I would like to link to with a fancybox, well I have to select the thumbnail, click link, link to (download a file) select the fullsize image/,jpg, insert the link. Then right click on the image and select edit link where I can then set the class. Would be nice to be able set it all in in the initial link, maybe something can be done in future?

Also just noticing my fancyboxed image doesn't vertically center in Safari or Chrome. Do you know how I can get around this? Vertically centers correctly in FF and IE.

Thanks again the help is much appreciated.