To use the built-in CSS3 slideshow in Massv, follow these page steps:
1) Drag and drop your slide images (up to 6) into the RapidWeaver resources panel. It’s best to rename your image filenames to not have blank spaces or mixed casing, for example “landscape1.jpg” would make a great filename. If you’re warehousing the images on your server, we’ll cover that later.
2) Paste the code below into RapidWeaver’s sidebar *Title* field, and NOT the main sidebar content area.
<ul class="css-slideshow" data-zoom="true" data-rotate="false" data-count="5"></ul>Might seems like an odd place to put code – but for RapidWeaver it’s a perfect place. Lets explain the options within the code example above.
“data-zoom” can be set to true or false for a slideshow zoom transition.
“data-rotate” can be set to true or false for a slideshow rotate transition.
“data-count” can be a numerical value between 1 – 6 depending on how many images you wish to display, 6 is the maximum slide count. * Remember, the more slides, the longer the page load time.
3) Paste the code below into the Custom CSS box (Page Info > Header > Custom CSS):
.css-slideshow li:nth-child(1) span { background-image: url('%resource(my-image.jpg)%');}
Change “my-image.jpg” to your resource image filename. This code will set the source image for the first slide. If you had 6 images in your slideshow, rest of the css code would be as follows:
.css-slideshow li:nth-child(2) span { background-image: url('%resource(my-image.jpg)%');} .css-slideshow li:nth-child(3) span { background-image: url('%resource(my-image.jpg)%');} .css-slideshow li:nth-child(4) span { background-image: url('%resource(my-image.jpg)%');} .css-slideshow li:nth-child(5) span { background-image: url('%resource(my-image.jpg)%');} .css-slideshow li:nth-child(6) span { background-image: url('%resource(my-image.jpg)%');}
*If you’re warehousing slide images, your code would go something like this:
.css-slideshow li:nth-child(1) span { background-image: url('http://my-website.com/images/my-image.jpg');}
Just want to note, slide timing cannot be changed, it’s hard coded within the CSS. Take my word – it’s not easy whatsoever to adjust, the set time is 6 seconds per image.
If you’re still have a hard time getting this all setup, submit a support ticket and let us know what step your having trouble with. FYI, long image load times mean you’re crazy big image file sizes, use iPhoto to edit and export medium/high quality 1000px wide versions.