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

jquery within content area from CMS


Reply


5 Posts   1488 Views

Avatar
SuperBlues

Community Member, 25 Posts

27 February 2010 at 2:53am

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

Avatar
zenmonkey

Community Member, 528 Posts

27 February 2010 at 10:00am

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

Avatar
SuperBlues

Community Member, 25 Posts

27 February 2010 at 11:27am

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.

Avatar
carlos

Community Member, 41 Posts

3 March 2010 at 3:12pm

Edited: 03/03/2010 3:16pm

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

Avatar
SuperBlues

Community Member, 25 Posts

4 March 2010 at 6:18am

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

thanks again