Fade In Fade Out Slideshow

Fade In Fade Out Slideshow screenshot

Preview: Downloads: 14294

Posted on: Mon, Nov 9th 2009, 01:10

Simple, easy to use fade effect slideshow image gallery, controlled by XML input.

Fade in and fade out between any number of images, with this simple to use slideshow. You can control the loop function, the use of random playback of images, the transition time between slides as well as the display time of an image. All from the XML configuration file.

If you use the component inside a website, you can set the component width and height in the HTML. Otherwise you can easily use it in other Flash projects by drag and drop.

Features:

1. Customizable links.
2. Customizable transition time.
3. Customizable slideshow time.
4. Random play and looping are set in XML.

janza

on 2/12/11

Is it possible to fade in / fade out images with different sizes ? At least quick test showed that images are scaled to fit. If you have portrait & landscape pics mixed this bad since the fade effect will also flicker. Any chances to add option to have fadein & fadeout for each pic instead of crossfade between next & previous ?

Corneliu Chitanu

on 5/12/11

Hello,

You can use portrait & landscape images. The component just resizes the images to fit the width and/or height of the component. So if you'd have a portrait image, the component will resize it to fit the height of the component.

If you need more options for the component, we can help you by doing some custom work. Please send an email at [email protected], if you're interested.

micklonath

on 21/12/11

Hi Just discovered your website and downloaded Fade In Fade Out Slideshow. I have a couple of websites: (2) wordpress free version and (2) designed by a programmer. How can I insert this feature into the sites? Is there a code I can copy? Thank you :)

Corneliu Chitanu

on 23/12/11

Hello,

For the free wordpress website you have, you'll need to find some hosting and apply this article to embed the component in an article or page:

http://www.flabell.com/blog/1829/how-t...

You'll need to use absolute paths, like this forum post explains:

http://www.flabell.com/topics/view/492

If it gives you any trouble, try using the Firebug tool on Firefox, Developer tool on Chrome or Activity tool on Safari. This tutorial explains how to use the Activity on Safari, but the same would apply for the rest:

http://www.flabell.com/blog/1184/step-...

If you need our help, please buy a support ticket and share a link to your component. We'll be back on January 3rd to take a look and find a solution.

Happy Holidays!

Chris Revels

2 weeks ago

I am using the free version of fade in and out slideshow but I have also purchased the one with navigation. Not sure if I want to use the one with navigation yet.

I have gotten the preview animation to load but still getting the error swfobject not defined. Can you take a look at my code?

                
<td class="data"><SCRIPT type=text/javascript src="../assets/slideshow/deploy/js/swfobject.js">
</SCRIPT>



<SCRIPT type=text/javascript>
// JAVASCRIPT VARS
   // cache buster
   var cacheBuster = "?t=" + Date.parse(new Date());  
   
   // stage dimensions
   // if you define '100%' then the swf will have the browser dimensions
   var stageW = "560";//"100%";
   var stageH = "373";//"100%";
   
   
   // ATTRIBUTES
      var attributes = {};
      attributes.id = 'FlabellComponent';
      attributes.name = attributes.id;
      
   // PARAMS
   var params = {};
   params.bgcolor = "#ffffff";
   
      /* FLASH VARS */
   var flashvars = {};    
   
   /// if commented / delete these lines, the component will take the stage dimensions defined 
   /// above in "JAVASCRIPT SECTIONS" section or those defined in the settings xml   
      
   /// path to the content folder(where the xml files, images or video are nested)
   /// if you want to use absolute paths(like "http://domain.com/images/....") then leave it empty("")
   
   flashvars.pathToFiles = "../assets/slideshow/deploy/";
   flashvars.xmlPath = "../assets/slideshow/deploy/fadeinout/xml/fadeinout.xml";      
   
swfobject.embedSWF("../assets/slideshow/deploy/preview.swf"+cacheBuster, attributes.id, stageW, stageH, "9.0.124", "../assets/slideshow/deploy/js/expressInstall.swf", flashvars, params);

   
   </SCRIPT>

<TABLE cellSpacing=0 cellPadding=0 width="100%" height="100%">
<TBODY>
<TR>

<TD align=middle>
<div id="FlabellComponent"></div>
</TD></TR></TBODY></TABLE>

Thank you for any help

Corneliu Chitanu

1 week, 4 days ago

Hello,

We took a look at the code and the problem is the xmlPath flashvar. It should be relative to the pathToFiles flashvar. The complete path to it would be: pathToFiles + xmlPath. So by adding your values would not be correct:

"../assets/slideshow/deploy/../assets/slideshow/deploy/fadeinout/xml/fadeinout.xml"

The xmlPath should be:

                
flashvars.xmlPath = "fadeinout/xml/fadeinout.xml";

The same would apply for the paths to the images. They should be relative to the pathToFiles folder. This way, if you're going to move the folder somewhere else, you won't need to change all the paths to the XML files or images. You're going to change only the pathToFiles flashvar.

This should solve the problem.

Chris Revels

1 week, 4 days ago

Maybe I am just not getting it. I changed the paths back to what you suggested. Now I dont see the loading animation at all and both IE and Firefox report SWFObject not defined. Here is the code now.

                <SCRIPT type=text/javascript src="js/swfobject.js">
</SCRIPT>



<SCRIPT type=text/javascript>
// JAVASCRIPT VARS
   // cache buster
   var cacheBuster = "?t=" + Date.parse(new Date());  
   
   // stage dimensions
   // if you define '100%' then the swf will have the browser dimensions
   var stageW = "560";//"100%";
   var stageH = "373";//"100%";
   
   
   // ATTRIBUTES
      var attributes = {};
      attributes.id = 'FlabellComponent';
      attributes.name = attributes.id;
      
   // PARAMS
   var params = {};
   params.bgcolor = "#ffffff";
   
      /* FLASH VARS */
   var flashvars = {};    
   
   /// if commented / delete these lines, the component will take the stage dimensions defined 
   /// above in "JAVASCRIPT SECTIONS" section or those defined in the settings xml   
      
   /// path to the content folder(where the xml files, images or video are nested)
   /// if you want to use absolute paths(like "http://domain.com/images/....") then leave it empty("")
   
   flashvars.pathToFiles = "fadeinout/";
   flashvars.xmlPath = "fadeinout/xml/fadeinout.xml";      
   
swfobject.embedSWF("preview.swf"+cacheBuster, attributes.id, stageW, stageH, "9.0.124", "js/expressInstall.swf", flashvars, params);

   
   </SCRIPT>

<TABLE cellSpacing=0 cellPadding=0 width="100%" height="100%">
<TBODY>
<TR>
<TD align=middle>
<div id="FlabellComponent"></div>

</TD></TR></TBODY></TABLE>

Corneliu Chitanu

1 week, 3 days ago

Like I mentioned in the comment above, you don't need to include the folder you specified in the pathToFiles, in the xmlPath flashvar. I explained how the full path is built above. Please read carefully. Your xmlPath flashvar should be:

flashvars.xmlPath = "xml/fadeinout.xml";

If the browser says that the swfobject is undefined, the path to the swfobject.js file is incorrect. I took a look in the webpage you sent us by email and I received an error:

"NetworkError: 404 Not Found - http://www.chattanoogacoins.com/js/swf..."

That means that the path to the swfobject.js is not correct. Please set the right path. It should work after you make the changes I was talking about above too.

Chris Revels

1 week, 3 days ago

After looking over and over and trying different things I finally figured out what was going on. (1) My folders were not at the root dir. so after fixed paths with folders at correct place got no errors but it still would not show. Just the loading animation. So I finally figured out that I had renamed the images in the XML to something different then 1, 2, 3, 4 ect. After fixed the file names and reloading IT WORKS ! ya! Thanks for your patience guys.

Corneliu Chitanu

1 week, 2 days ago

You're welcome. We're glad you made it work. Enjoy the component!

9 8 7...1