The SlidePanel User Control

The SlidePanel User Control

The HTML module in mojoPortal content management system incorporates the jQuery Cycle Plugin as a way to implement a slideshow of images and/or text. mojoPortal also encapsulates this functionality in the SlidePanel user control, which can be embedded directly into the layout.master file of a skin. The SlidePanel control can be used as an alternative to Flash, showing a slide show or simple animation within the header (or anywhere else) on each page of your site.

As an instructive example, the delivered andreasviklund-02-alt1 skin incorporates the SlidePortal control within the header. It does this by embedding these declarations, which set up a rotation of three images and one div with a thumbnail image and text:

<portal:SlidePanel id="spanel1" runat="server" CssClass="rotatecontainer">
   <portal:SkinFolderImage ID="imgs1" runat="server" ImageFileName="head1.jpg" CssClass="rotateitem" AlternateText=" " />
   <portal:SkinFolderImage ID="imgs2" runat="server" ImageFileName="head2.jpg" CssClass="rotateitem" AlternateText=" " />
   <div class="rotateitem">
      <asp:Image id="img4" runat="server" CssClass="floatrightimage" AlternateText=" " Height="60" ImageUrl="~/Data/logos/mojothumb.jpg" />
         <p>
            lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor lorem ipsum dolor
         </p>
   </div>
   <portal:SkinFolderImage ID="imgs3" runat="server" ImageFileName="head3.jpg" CssClass="rotateitem" AlternateText=" " />
</portal:SlidePanel>

The SlidePanel control accepts a large number of parameters that can override default settings. The complete set of parameters is documented on the jQuery Cycle Plugin options page. Below are the parameters that are implemented in the mojoPortal control. A notation has been made in cases where the mojoPortal parameter name differs from that of the plugin. To override any of these parameters, modify the portal declaration for the SlidePanel, like this:

<portal:SlidePanel id="spanel1" runat="server" CssClass="rotatecontainer" Speed=2000 TransitionInterval=8000>

Basic Parameters

TransitionEffect (JCP parameter: fx, default = "fade") - Use the name of a transition effect, or a comma-separated name of an effect to use multiple. effect names. [example: TransitionEffect="slideX,slideY"]. See this page for names and previews of each of the transition effects.

RandomizeEffects (default = true) - Randomize the transition effects used, when multiple effects are specified in the TransitionEffect parameter. If set to false, the effects will occur in the order they are specified.

ReverseTransitions (JCP parameter: rev, default = false) - When set to true, causes the animations to transition in reverse.

AnimIn (default = null) - Transition effects to be used during the incoming animation

AnimOut (default = null) - Transition effects to be used during the outgoing animation

Speed (default = 1000) - Duration, in milliseconds, of the transition effect.

SpeedIn (default = 0) -  Duration, in milliseconds, of the "in" transition

SpeedOut (default = 0) -  Duration, in milliseconds, of the "out" transition

TransitionInterval (JCP parameter: timeout, default = 3000) - Duration, in milliseconds, of the pause between transitions.

Delay (default = 0) - Delay, in milliseconds, before the first transition will occur.

PauseOnHover (default = false) - When enabled, pauses the slideshow while the mouse cursor is hovering over it.

Continuous (default = false) - When true, this will cause each transition to begin immediately after the previous one has finished (i.e. the TransitionInterval value will be ignored).

NextSelector (JCP parameter: next, default = null) - DOM element or jQuery selection string which, when clicked, will move to the next image. Using this parameter with Timeout=0 will make the slideshow manual.

PreviousSelector (JCP parameter: prev, default = null) - DOM element or jQuery selection string which, when clicked, will move to the previous image. Using this parameter with Timeout=0 will make the slideshow manual.

Shuffle (default = null) - Coordinates for the shuffle animation type (e.g. {top:15,left:200})

CssBefore (default = null) - Properties that define the initial state of the slide before transitioning in

CssAfter (default = null) - Properties that define the initial state of the slide before transitioning out

ContainerHeight (JCP parameter: height, default = "auto") - Height of the container.

Fit (default = false) - Force slides to fit within the container.

ContainerResize (default = true) - Resizes container to fit the largest slide.

StartingSlide (default = 0) - Zero-based slide number used to begin the slide show.

Sync (default = true) - In/out type transitions will occur in an overlapping manner unless if this is set to true.

Random (default = false) - If set to true, at each transition will randomly select a slide to show from the group. When false, slides will be shown in sequence.

Autostop (default = false) - When set to true, will stop slideshow after all slides are shown, or the value specified in AutostopCount is reached (see below).

AutostopCount (default = 0) - Number of slides after which the slideshow will stop if Autostop=true.

SlideExpr (default = null) - Expression for selecting slides. This can be used to manually set the slide containing element where necessary. See this page for an example of where you might need to use this. If you have problems with identification of the enclosing element, you may want to try SlideContainerClass first (see the mojoPortal-Specific Parameters section below).

CleartypeNoBg (default = false) - Set to true to disable extra fixing for cleartype.

Nowrap (default = false) - Set to true to prevent slide show from wrapping.

RequeueOnImageNotLoaded (default = true) - Requeues the slide show if any of the image slides are not let loaded.

RequeueTimeout (default = 250) - Requeue time, in milliseconds.

mojoPortal-Specific Parameters

EnableSlideShow (default = true) - set to false to turn off animation

SlideContainerClass (default = null) - This can be used to supplement the id selector, so the slide container is not the outer div, but any div inside the outer div with a particular CSS class.

Advanced Parameters

The following parameters are recommended for advanced users only. Using these will require the use of additional custom written JavaScript functions, and/or much CSS to implement. As an example, see this page for a sample way to use the TransitionIntervalCallback parameter.

TransitionIntervalCallback (JCP parameter: timeoutFn, default = null) - Callback function name that assigns transition times per slide.

PrevNextClick (default = null) - Callback function name for previous/next clicks

Pager (default = null) - Selector for the element to use as the pager container.

PagerClick (default = null) - Callback function for pager clicks

pagerEvent (default = "click") - Name of event that drives pager navigation

PagerAnchorBuilder (default = null) - Callback function for building anchor links

PauseOnPagerHover (default = false) - When enabled, pauses the slideshow while the mouse cursor is hovering over the pager link.

FastOnEvent (default = 0) - Time in milliseconds for transitions that happen when triggered manually via pager or previous/next click.

ManualTrump (default = true) - When false, manual transitions will be ignored in favor of active ones.

Before (default = null) - Transition callback function, with scope set to the element to be shown

After (default = null) - Transition callback function, with scope set to the element just shown

End (default = null) - Callback function invoked at the end of the slideshow

FxFn (default = null) - Function used to control the transition

Created by Jamie Eubanks 2011-02-28