Fading Images

From pixyWiki

pixyBlog uses the excellent script.aculo.us scripts to supply some of the dynamic features to our Themes, these include the fading-in of photos on the front page of your photoblog.

The script.aculo.us scripts are dependent on the prototype javascript framework, so all-in-all you will need to include the following javascript files in the <head> tag of your HTML page (the order is important):

## load the scriptaculous JS libraries
<script type="text/javascript" src="$url.site/theme/scripts/scriptaculous/prototype.js"></script>
<script type="text/javascript" src="$url.site/theme/scripts/scriptaculous/effects.js"></script>
<script type="text/javascript" src="$url.site/theme/scripts/scriptaculous/scriptaculous.js"></script>
	
## load other JS libraries
<script type="text/javascript" src="$url.site/theme/scripts/pixy.js"></script>

Then in the Blog template you will need to add the following javascript at the bottom of the page (but above the _footer include):

<script type="text/javascript">
<!--
   window.onload = function() {fadeIn('photo');}
//--!>
</script>

Finally in the _day template you will need give the element you want to fade-in (the photo) the name attribute of "photo" and also set the element to invisible by setting the style attribute to "display:none;", like so:

<img src="$preview.url" width="$preview.width" height="$preview.height" name="photo" style="display:none;"/>

To remove the fading-in of photos you can simply reverse the above steps, so:

remove the name and style attributes from the <img> element in the _day template.
remove the fade-in <script> tag and contents from the Blog template.

Retrieved from "http://wiki.pixyblog.com/Fading_Images"