Hey mfal55
I'm more than happy to share my experience thus far with CMSMS and how I achieved certain effects and implementation of certain elements.
Firstly, the top animation is flash. So I overlaid a simple flash animation on top of my background image and set the wmode of the flash movie to transparent. (see SWFObject documentation)
I used the latest version of SWFObject to embed the flash.
jQuery was also used for animated elements. For example, the front page images which cycle use jQuery and the jQuery innerfade plugin. All scripts are loaded using the Google AJAX APIs -
http://code.google.com/apis/ajaxlibs/
The reason I chose to do this was primarily for performance. From previous experience, Google's CDN appears to load the javascript much quicker than requesting and serving locally. Furthermore, it allows for the dynamic events and methods to load other plugins etc, such as innerfade.
I chose the news module as the basis for the gallery of work for the following reasons:
1. I could add extra fields for a news item
2. I could create multiple templates for displaying news items and repurposing the same content for different display methods.
3. News module offers the ability to categorise items (in my case, for example, featured projects and projects displayed on the home page)
4. I like the inbuilt facility to sort news items by date,name etc... so it worked perfectly for me because I want to show newest jobs I'd completed at the start of my list.
Below is a sample of the summary page template for my work thumbnails. The filters are driven with the use of jQuery. The javascript functionality to achieve this was based on this tutorial:
http://net.tutsplus.com/tutorials/javas ... th-jquery/ but re-written from scratch because I wanted to learn how to make this functionality from scratch.
Code: Select all
<!-- filter news items by type -->
<ul id="filters">
<li><a href="javascript:;" class="showall">show all projects</a></li>
<li><a href="javascript:;" class="web">web sites</a></li>
<li><a href="javascript:;" class="emarketing">e-marketing</a></li>
<li><a href="javascript:;" class="ecommerce">e-commerce</a></li>
<li><a href="javascript:;" class="cdrom">cd-rom</a></li>
</ul>
<div id="project_container">
<ul id="projects">
{foreach from=$items item=entry}
<li class="{$entry->extra}">
<a href="my-work/{$entry->detail_link}" title="{$entry->title|escape:htmlall}" rel="uploads/images/projects/previews/{$entry->image_medium}" class="project_preview">
<img src="uploads/images/projects/thumbs/{$entry->image_thumb}" width="170" height="90" alt="{$entry->title|escape}" /></a>
<p>
<b>{$entry->title|escape}</b><br />
<a href="my-work/{$entry->detail_link}" title="{$entry->title|escape:htmlall}" class="readmorelink">read more</a>
</p>
</li>
{/foreach}
</ul>
</div>
<!-- End News Display Template -->
This was then called by placing the smarty tag into the page content:
Code: Select all
{news summarytemplate='folio item template' sortasc='true'}
Each news item linked to a full page under the 'my work' section. This was done for the sole reason of not wanting to display the url structure which news items normally use. (ie. yoursite.com/news/13/109/node-alias
Each page under 'my work' was not displayed in the menu (uncheck show in menu option in 'Options' tab when editing a page).
I hope this was useful to people, I will post more code when I have some spare time, which is non existent at the moment.
By no means are the techniques and methods I have used for this site the best way to do things, but they made sense to me and made it easy to update my list of work. I had no time or inclination to write custom modules for certain aspects. I was more focused on changing the way existing modules display content. Ultimately the goal of the site is to showcase existing work in a clear and simple way which underpins my general approach to creating clean and user friendly sites.
Thanks for your positive comments.
