Instructions
Download ZIP [1.2MB]
I didn't make any changes to JonDesing's SmoothGallery, so installation instructions and customization remain the same. The ZIP file incldudes all original SmoothFGallery files (some demo pages, and images).
To modify the way it looks, change index.html, ravelry.css and ravelry.js
-
Include the following lines in your header (make sure to change the last line to use your api key and username):
<script src="scripts/mootools.v1.11.js" type="text/javascript"></script>
<script src="scripts/jd.gallery.js" type="text/javascript"></script>
<script src="scripts/ravelry.js" type="text/javascript"></script>
<script type="text/javascript" src="http://api.ravelry.com/projects_change_to_match_your_api_key_and_stuff_here"></script> -
Then, include the css in the header too:
<link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/ravelry.css" type="text/css" media="screen" />
- In the header add, and modify as nedded:
<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true, // 'true' for slideshow, 'false' for static
slideInfoZoneOpacity: 0.85, // How transparent you want the gray bar with the data
delay: 8000, // If 'timed' is set to 'true', how fast do you want the slideshow (1000 = 1sec.)
thumbWidth: 75 // Default is 100, Ravelry's thumbs are 75
});
}
window.addEvent('domready',startGallery);
</script> - In the body of the document, add the following line where you want the gallery to show:
<script type="text/javascript"> RavelryThing.drawProgressBars({photos: true, width: 150}); </script>