Jump to:

23367 Posts in 18143 Topics by 2863 members

General Questions

SilverStripe Forums » General Questions » Fancybox building the link creator that puts a ID="myclass" into the A href

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

Page: 1
Go to End
Author Topic: 2620 Views
  • TF-35Lightning
    Avatar
    Community Member
    137 Posts

    Fancybox building the link creator that puts a ID="myclass" into the A href Link to this post

    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

  • Willr
    Avatar
    Forum Moderator
    5489 Posts

    Re: Fancybox building the link creator that puts a ID="myclass" into the A href Link to this post

    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.

  • TF-35Lightning
    Avatar
    Community Member
    137 Posts

    Re: Fancybox building the link creator that puts a ID="myclass" into the A href Link to this post

    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

  • Willr
    Avatar
    Forum Moderator
    5489 Posts

    Re: Fancybox building the link creator that puts a ID="myclass" into the A href Link to this post

    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/

  • TF-35Lightning
    Avatar
    Community Member
    137 Posts

    Re: Fancybox building the link creator that puts a ID="myclass" into the A href Link to this post

    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.

    2620 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.