We have installed the jQuery cycle with our store shop. jQuery cycle comes up with many different options and effects. We can bring attractive changes to our product images with these options and effects.
1. Getting started
We need jQuery enabled for the jQuery cycle to work with our store shop. We have already shown how to install jQuery in an earlier recipe.
2. How to do it
Following is the list of available jQuery cycle options.
Let’s discuss each option:
- fx: The name of the transition effect. We can use comma-separated names, e.g.:
fade, scrollUp, shuffle:
fx: ‘fade’,
- timeout: We set the time between slide transitions. It is in milliseconds and 0 to disable auto advance:
timeout: 4000,
- timeoutFn: This is the callback for determining per-slide timeout value: function(c urrSlideElement, nextSlideElement, options, forwardFlag):
timeoutFn: null,
- Continuous: We can set this to true to start the next transition immediately after the current one completes:
continuous: 0,
- Speed: This is the speed of the transition. This can be any valid fx speed value:
speed: 1000,
- speedIn: This is the speed of the in transition:
speedIn: null,
- speedOut: This is the speed of the out transition:
speedOut: null,
- Next: We use this as the selector for the element to use as a click trigger for the next slide:
next: null,
- Prev: We use this as the selector for the element to use as click trigger for the previous slide:
prev: null,
- prevNextClick: Callback function for prev/next clicks: function(isNext, zeroBasedSlideIndex, slideElement)
prevNextClick: null,
- prevNextEvent: This is the event that drives the manual transition to the previous or next slide:
prevNextEvent: ‘click.cycle’,
- Pager: This is the selector for element to use as pager container:
pager: null,
- pagerClick: We can set callback function fn for pager clicks: function(zeroBase dSlideIndex, slideElement).
pagerClick: null,
- pagerEvent: The name of the event that drives the pager navigation:
pagerEvent: ‘click.cycle’,
- allowPagerClickBubble: This allows or prevents click event on pager anchors from bubbling:
allowPagerClickBubble: false,
- pagerAnchorBuilder: This is the callback function for building anchor links:
function(index, DOMelement).
pagerAnchorBuilder: null,
- before: The transition callback (scope set to element to be shown): function(currSlideElement, nextSlideElement, options, forwardFlag).
before: null,
- after: This is the transition callback (scope set to element that was shown): function(currSlideElement, nextSlideElement, options, forwardFlag).
after: null,
- end: This callback is invoked when the slideshow terminates (use with autostop or nowrap options): function(options).
end: null,
- easing: This is the easing method for both in and out transitions:
easing: null,
- easeIn: Easing for in transition:
easeIn: null,
- easeOut: Easing for out transition:
easeOut: null,
- shuffle: We set co-ordinates for shuffle animation, e.g.: {top: 15, left: 200}.
shuffle: null,
- animIn: This property defines how the slide animates in:
animIn: null,
- animOut: This property defines how the slide animates out:
animOut: null,
- cssBefore: This property defines the initial state of the slide before transitioning in:
cssBefore: null,
- cssAfter: This property defines the state of the slide after transitioning out:
cssAfter: null,
- fxFn: This function is used to control the transition: function(currSlideElement, nextSlideElement, options, afterCalback, forwardFlag).
fxFn: null,
- height: We set the container height:
height: ‘auto’,
- startingSlide: Zero-based index of the first slide to be displayed:
startingSlide: 0,
- sync: We set true if in/out transitions should occur simultaneously:
sync: 1,
- random: We set true for random, false for sequence (not applicable to shuffle fx):
random: 0,
- fit: We force slides to fit container:
fit: 0,
- containerResize: We can resize the container to fit the largest slide:
containerResize: 1,
- pause: We set true to enable pause on hover:
pause: 0,
- pauseOnPagerHover: We set true to pause when hovering over the pager link:
pauseOnPagerHover: 0,
- autostop: We set true to end slideshow after X transitions (where X == slide count):
autostop: 0,
- autostopCount: This is the number of transitions. This is optionally used with
autostop to define X.
autostopCount: 0,
- delay: The additional delay (in ms) for first transition. This can be negative.
delay: 0,
- slideExpr: This expression is for selecting slides; if something other than all children is required:
slideExpr: null,
- cleartype: We set true if clearType corrections should be applied for IE.
cleartype: !$.support.opacity,
- cleartypeNoBg: We set true to disable extra cleartype fixing; leave false to force background color setting on slides:
cleartypeNoBg: false,
- nowrap: We can set true to prevent the slideshow from wrapping:
nowrap: 0,
- fastOnEvent: This forces fast transitions when triggered manually via pager or prev/ next; value is time in milliseconds:
fastOnEvent: 0,
- randomizeEffects: This is valid when multiple effects are used; true to make the effect sequence random:
randomizeEffects:1,
- Rev: This causes animations to transition in reverse:
rev: 0,
- manualTrump: This causes manual transition to stop an active transition instead of being ignored:
manualTrump: true,
- requeueTimeout: We set the delay time for requeue. It is in milliseconds.
requeueTimeout: 250,
- activePagerClass: This is the class name used for the active pager link:
activePagerClass: ‘activeSlide’,
- updateActivePagerLink: We set a callback function fn. It is invoked to update the active pager link (adds/removes activePagerClass style):
updateActivePagerLink: null
Now, we will see addition of some effects with our store shop.
- First, let’s see the shuffle effect in our In the jQuery cycle initialization code block, we add the following code chunk:
<script type=”text/Javascript”>
$(document).ready(function() {
$(‘.slideshow’).cycle({
fx:’shuffle’, delay: 20
});
});
</script>
- In the browser, we can find the following changes:
- Now, we will see the zoom effect for the cycle We need to add the following code block in our initialization:
<script type=”text/Javascript”>
$(document).ready(function() {
$(‘.slideshow’).cycle({
fx: ‘zoom’,
sync: false, delay: 20
});
});
</script>
- If we go to the browser, then we can find zoom in action:
- Again, we see the toss transition effect with our We need to add the following codes:
<script type=”text/Javascript”>
$(document).ready(function() {
$(‘.slideshow’).cycle({
fx: ‘toss’,
sync: true, speed: 2000,
delay: 20
});
});
</script>
- We see the following effect in our store:
- Now, let’s see the effects of growY with our latest We add the following codes in our latest.tpl file:
<script type=”text/Javascript”>
$(document).ready(function() {
$(‘.slideshow’).cycle({
fx: ‘growY’,
sync: true, speed: 2000,
delay: 20
});
});
</script>
- And in the browser, we see the changes:
3. There’s more…
We can also set different transition effects. We are showing it here, so you can use your favourite options for the cycle. The following is a list of transition effects in our store shop:
⯈ blindX
⯈ blindY
⯈ blindZ
⯈ cover
⯈ curtainX
⯈ curtainY
⯈ fade
⯈ fadeZoom
⯈ growX
⯈ growY
⯈ none
⯈ scrollUp
⯈ scrollDown
⯈ scrollLeft
⯈ scrollRight
⯈ scrollHorz
⯈ scrollVert
⯈ shuffle
⯈ slideX
⯈ slideY
⯈ toss
⯈ turnUp
⯈ turnDown
⯈ turnLeft
⯈ turnRight
⯈ uncover
⯈ wipe
⯈ zoom
You can use any of the above in the jQuery cycle. In this recipe, we will see some transition effects in action.
You can also use the other available options of the jQuery cycle in our OpenCart store. You can add them in the above mentioned way.
4. See also
⯈ Installing jQuery and jCarousel
Source: Hasan Tahsin (2011), OpenCart 1.4 Template Design Cookbook, Packt Publishing.