Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Fancybox building the link creator that puts a ID="myclass" into the A href


Reply


5 Posts   2707 Views

Avatar
TF-35Lightning

Community Member, 137 Posts

23 April 2010 at 1:01am

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

Avatar
Willr

Forum Moderator, 5513 Posts

23 April 2010 at 8:40pm

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.

Avatar
TF-35Lightning

Community Member, 137 Posts

23 April 2010 at 11:59pm

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

Avatar
Willr

Forum Moderator, 5513 Posts

24 April 2010 at 10:21am

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

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


You would need to change it to

$("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/

Avatar
TF-35Lightning

Community Member, 137 Posts

24 April 2010 at 3:15pm

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.