Jump to:

22976 Posts in 11667 Topics by 2826 members

General Questions

SilverStripe Forums » General Questions » jquery within content area from CMS

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: 1396 Views
  • SuperBlues
    Avatar
    Community Member
    25 Posts

    jquery within content area from CMS Link to this post

    Hi,

    I would like to use something like the jquery accordian in the body of the web page but to be editable from within the CMS. I can use jquery if I manually code this but it would be helpful if others could enter content within the accordian list items from within the CMS.

    Any ideas on how to install the jquery item into the body of the page?

    Thanks

  • zenmonkey
    Avatar
    Community Member
    524 Posts

    Re: jquery within content area from CMS Link to this post

    It really depends on a few factors, the specific jQuery plug-in you're using, as well as the type of data being displayed and the sophistication of you're users.

    If its non-page DataObjects you need displayed and you're users are fairly inexperienced at coding, you can always create a separate dataobject using the DataObjectManager module, Make sure each DataObject has a Title and content. That way the title can be your Accordion heading and you could create a stripping function to remove spaces from it and use that ID tags. Then in your template just render that data in appropriate container.

    If its Page Data it even easier since you can just use the $URLSegment as your anchor ID and just wrap it in a normal template control like <% control ChildrenOf(x) %>

    The main thing is you have to devise way to generate unique IDs for the anchors and content tags. I've done it on few FAQ pages and Press Release Pages

  • SuperBlues
    Avatar
    Community Member
    25 Posts

    Re: jquery within content area from CMS Link to this post

    Thanks for the prompt reply zenmonkey. I need to get a list of FAQs onto the on-page area of the site so will have to read up on the <% control ChildrenOf(x) %> part. At least I know it can be done, I just need to find a tutorial or some documentation that explains it.

    thanks again.

  • carlos
    Avatar
    Community Member
    41 Posts

    Re: jquery within content area from CMS Link to this post

    Hi,

    You can use any plugin you want, I've used jcarousel with very good outcomes.

    What I'd do:

    - create a new DataObject with a Title, Description and $has_one (Image) I'll call this DO "MyImage".
    - create a ModelAdmin for this DataObject. (now you can upload images and control them as a DataObject).
    - In your page controller create a function to return MyImages.

    function MyImages{
    $myimages = DataObject::get('MyImages');
    if($myimages) return $myimages;
    return null;
    }


    - now in the front-end you need to add JS files and the script.
    - the script should be something like this

    <% control MyImages %>
       <% if First %>
       <div id="mainPic" class="big">
          <img id="mainPicture" src="$MyImageUrl"/>
          <h2 id="mainPicTitle">$MyImageTitle</h2>
          <p id="mainPicDesc">$MyImageDescription</p>
       </div>
       <% end_if %>
    <% end_control %>

    <ul id="mycarousel" class="jcarousel-skin-tango">
       <% control myImages %>
          <li><img src="$MyImageUrl" width="75" height="75" alt="$MyImageTitle" id="$ID" /></li>
       <% end_control %>
    </ul>

    hope it helps

    cheers

  • SuperBlues
    Avatar
    Community Member
    25 Posts

    Re: jquery within content area from CMS Link to this post

    Thanks for the help Carlos, that is very useful. Perhaps we need a tutorial on jquery integration for newbies!

    thanks again

    1396 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.