PixyBlog Lightbox   |   Basket   |   Login   |   Register
Pixy® Blog - Expose Yourself
  PixyBlog.comPhotoblog DiscussionPhotoblog Wiki
  • Log in / create account
Fading Images
  • Page
  • Discussion
  • View source
  • History

Fading Images

From PixyWiki

Jump to: navigation, search

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"
This page was last modified 10:03, 23 March 2008. This page has been accessed 553 times.
  • Privacy policy
  • About PixyWiki
  • Disclaimers
  • Powered by MediaWiki
  • Design by Paul Gu
Terms and Conditions | Privacy Policy | About | Contact us | Copyright © 2006-2008 Pixy® Ltd. All rights reserved.