CSS notes
Behavior code
Moo Tools marquee slide show
<div id="wrapper">
<div class="gallery gallery1">
<div class="holder">
<ul>
<li><img src="moo/images/img1.JPG" alt="image" width="240" height="180" /></li>
<li><img src="moo/images/img2.JPG" alt="image" width="240" height="180" /></li>
<li><img src="moo/images/img3.JPG" alt="image" width="240" height="180" /></li>
<li><img src="moo/images/img4.JPG" alt="image" width="240" height="180" /></li>
<li><img src="moo/images/img5.JPG" alt="image" width="240" height="180" /></li>
<li><img src="moo/images/img6.JPG" alt="image" width="240" height="180" /></li>
<li><img src="moo/images/img7.JPG" alt="image" width="240" height="180" /></li>
<li><img src="moo/images/img8.JPG" alt="image" width="240" height="180" /></li>
</ul>
</div>
<div class="control">
<a href="#" class="prev">prev</a>
<a href="#" class="next">next</a>
<a href="#" class="start">play</a>
<a href="#" class="stop">stop</a>
</div>
</div>
</div>
Download this file and unzip it to a location of your choice but not in the VSD mywebsitename_website folder
After unzipping moo zip you need to add all the files that it created to VSD.
Start by hitting ctrl + alt + f then add a folder to VSD Root and name it moo. Now click on that folder and add a sub folder and name it buttons then browse to the buttons folder inside of moo on your pc and select all the .png images in the folder.
Now click on moo again in the add files and add a new folder and name it css. Now click on that folder and browse to the css folder inside of moo on your pc and select the moo.css file to add it to the folder.
Now click on moo again in the add files and add a new folder and name it images. Now click on that folder and browse to the images that you renamed that you want to show in the gallery or to the images folder that was unzipped on your pc which has enough images to test with.
Now click on moo again in the add files and add a new folder and name it js. Then browse to the js folder inside the moo folder on your pc and and select the two .js files in it to add them to the js folder in VSD. mootools-core-1.3-full-compat-yc.js and slideGallery.js
Add a HTML box to your page and paste the code below to the Body HTML Keep the box open for step 8
Step 1
Step 2
Step 3
Step 4
Step 5
Step6
Step 7
Step 8
Now in the same HTML box as above paste the code below to the Header HTML
<link media="all" type="text/css" rel="stylesheet" href="moo/css/moo.css" />
<script type="text/javascript" src="moo/js/mootools-core-1.3-full-compat-yc.js"></script>
<script type="text/javascript" src="moo/js/slideGallery.js"></script>
<script type="text/javascript">
window.addEvent("domready", function() {
/* Example 1 */
var gallery1 = new slideGallery($$(".gallery1"), {
steps: 2,
mode: "circle",
random: true,
autoplay: true,
stop: ".stop",
start: ".start",
duration: 4000,
speed: 800
});


/* Examples panel */
var panel = true;
$$(".toggler").addEvent("click", function() {
if(panel) {
this.set("text", "show").getNext().setStyle("display", "none");
panel = false;
}
else {
this.set("text", "hide").getNext().setStyle("display", "block");
panel = true;
}
return false;
});
});
</script>
Step 8
Preview to see if it works then publish
Back to Progrower.coffeecup.com
moo.zip
<div id="wrapper">
<div class="gallery gallery1">
<div class="holder">
<ul>
<li><a href="moo/images/img1.JPG" target="_blank" title="Cute puppy 1"><img src="moo/images/img1.JPG" alt="image" width="240" height="180" /></a></li>
<li><a href="moo/images/img2.JPG" target="_blank" title="Cute puppy 2"><img src="moo/images/img2.JPG" alt="image" width="240" height="180" /></a></li>
<li><a href="moo/images/img3.JPG" target="_blank" title="Cute puppy 3"><img src="moo/images/img3.JPG" alt="image" width="240" height="180" /></a></li>
<li><a href="moo/images/img4.JPG" target="_blank" title="Cute puppy 4"><img src="moo/images/img4.JPG" alt="image" width="240" height="180" /></a></li>
<li><a href="moo/images/img5.JPG" target="_blank" title="Cute puppy 5"><img src="moo/images/img5.JPG" alt="image" width="240" height="180" /></a></li>
<li><a href="moo/images/img6.JPG" target="_blank" title="Cute puppy 6"><img src="moo/images/img6.JPG" alt="image" width="240" height="180" /></a></li>
<li><a href="moo/images/img7.JPG" target="_blank" title="Cute puppy 7"><img src="moo/images/img7.JPG" alt="image" width="240" height="180" /></a></li>
<li><a href="http://coffeecup.com" target="_blank" title="Coffeecup"><img src="moo/images/img8.JPG" alt="image" width="240" height="180" /></a></li>
</ul>
</div>
<div class="control">
<a href="#" class="prev">prev</a>
<a href="#" class="next">next</a>
<a href="#" class="start">play</a>
<a href="#" class="stop">stop</a>
</div>
</div>
</div>
This code is an example on how to link the images in the slide show
I have two images linked. If you would like to see how to do this go to the bottom of the page.