As I don’t see something like this covered, here goes:
Firstly you’ll need the world’s most awesome slider, of course
http://nivo.dev7studios.com/
Copy jquery.nivo.slider.pack.js & jquery-1.4.3.min.js to your template’s js folder,
and also modified nivo-slider.css to the css folder.
Modified nivo-slider.css :
/*
* jQuery Nivo Slider v2.5.1
* http://nivo.dev7studios.com
*
* Copyright 2011, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* March 2010
*/
/* The Nivo Slider styles */
.nivoSlider {
position:relative;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
}
/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
opacity:0.8; /* Overridden by captionOpacity setting */
width:100%;
z-index:8;
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
position:relative;
z-index:9;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
/*============================*/
/*=== Custom Slider Styles ===*/
/*============================*/
#nivo-slider-wrapper {
margin:0 auto;
width:618px;
}
#slider {
position:relative;
background:url(images/loading.gif) no-repeat 50% 50%;
}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
#slider a {
border:0;
display:block;
}
.nivo-controlNav {
position:absolute;
left:260px;
bottom:-42px;
}
.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(images/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.nivo-controlNav a.active {
background-position:0 -22px;
}
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(images/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {
left:15px;
}
.nivo-caption {
text-shadow:none;
font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a {
color:#efe9d1;
text-decoration:underline;
}
/*====================*/
/*=== Other Styles ===*/
/*====================*/
.clear {
clear:both;
}
Also copy the following images to "images" folder that is inside your template’s css folder:
arrows.png
bullets.png
loading.gif
Link the js and css files in your template head (you can create special template for nivo if you want):
<link rel="stylesheet" media="all" type="text/css" href="path_to_your_template/css/nivo-slider.css" />
<script type="text/javascript src="path_to_your_template/js/jquery-1.4.3.min.js""></script>
<script type="text/javascript" src="path_to_your_template/js/jquery.nivo.slider.pack.js"></script>
Insert this also (for additional parameters check nivo’s documentation):
<script type="text/javascript">
$(window).load(function() {
$('#nivoslider').nivoSlider();
});
</script>
Now you’re ready to create some TVs & a chunk that will be used to "automate" slides creation:
For each slide you’ll need three TVs, one for image, one for image caption and one for the url actual slide will be linking to:
1. nivo_01_caption - Input Type: ReachText,
2. nivo_01_img - Input Type: Image, Output can be Text,
3. nivo_01_url - Input Type: Text.
Repeat the process for additional (02,03,04,...) slides.
(Do not forget to give access for all TVs to the template that holds the slider code..)
Then create chunk named "nivoslider" with the following code (as you can see, the example holds four slides) :
<div id="nivo-slider-wrapper">
<div id="nivoslider" class="nivoSlider">
<a href="[[*nivo_01_url]]"><img title="#nivo_01_caption" src="[[*nivo_01_img]]" /></a>
<a href="[[*nivo_02_url]]"><img title="#nivo_02_caption" src="[[*nivo_02_img]]" /></a>
<a href="[[*nivo_03_url]]"><img title="#nivo_03_caption" src="[[*nivo_03_img]]" /></a>
<a href="[[*nivo_04_url]]"><img title="#nivo_04_caption" src="[[*nivo_04_img]]" /></a>
</div>
</div>
<div id="nivo_01_caption" class="nivo-html-caption">
[[*nivo_01_caption]]
</div>
<div id="nivo_02_caption" class="nivo-html-caption">
[[*nivo_02_caption]]
</div>
<div id="nivo_03_caption" class="nivo-html-caption">
[[*nivo_03_caption]]
</div>
<div id="nivo_04_caption" class="nivo-html-caption">
[[*nivo_04_caption]]
</div>
(You can group all of the above in e.g. "Nivo Slides" Category for better organization if you like)
Finally call the chunk somewhere in your template with:
[[$nivoslider]]
Now it’s time to create the resource that will show the Nivo Slider:
Select the template you created for the slider, fill the TVs - add images (best to try it out with original nemo.jpg, toystory.jpg, up.jpg, walle.jpg, otherwise tweaks to included css are needed), captions (can hold additional links, etc), and urls to the resources (e.g. in [[~id]] format)...
If both you and me are not forgetting something (I maybe am, since I’m reverse-engineering already done process..), Preview should show not only the most awesome but also easily configurable slider modx community ever witnessed
Hope this will be helpful for some, so try it and of course let us all know if you have some ideas on improving it further.
☆ A M B ☆
☆ A M B ☆