loading...

Sunday, October 24, 2010

Xml image slideshow for blogger

flash + XML image slideshow with slick navigation and design, fully customizable from XML, with a motion blur effect on image transition. The gallery navigation bar changes its color based on the displayed photo colors.Its much similar to integration of cu3er.Its easy to integrate to blogger you can find the tutorial below the preview.Have look at the preview below and way to install to blogger.

In order to view this object you need Flash Player 9+ support!

Get Adobe Flash player



How to install to blogger
Step1
first download the required files
Download

Step2
After extracting the files upload to server

Step3
Login to your blogger
Goto Design->page Elements
Then open a html/javascript gadget and add the following code.
make sure you copied the location of your files and replace the red highligted with yours
I have used dropbox  look here for more details.


<script src="http://dl.dropbox.com/u/13256471/xml%20_slideshow/js/swfobject.js" type="text/javascript">
</script> 

<script type="text/javascript">
 
 
   
   var cacheBuster = "?t=" + Date.parse(new Date());  
   
   
   var stageW = 560;
   var stageH = 350;
   
   
   
      var attributes = {};
      attributes.id = 'FlabellComponent';
      attributes.name = attributes.id;
      
   
   var params = {}; 
       params.allowscriptaccess = "always"; 
        params.allownetworking = "all";


   var flashvars = {};    
   
   
   flashvars.componentWidth = stageW;
   flashvars.componentHeight = stageH;
flashvars.pathToFiles = "http://dl.dropbox.com/u/13256471/xml%20_slideshow/banner/";
   flashvars.xmlPath ="xml/banner.xml";
      
   
  
   swfobject.embedSWF("http://dl.dropbox.com/u/13256471/xml%20_slideshow/preview.swf", attributes.id, stageW, stageH, "9.0.124", "http://dl.dropbox.com/u/13256471/xml%20_slideshow/js/expressInstall.swf", flashvars, params);
   
  
</script>
<table cellpadding="0" cellspacing="0" height="100%"><tbody>
<tr><td align="center">

<div id="FlabellComponent">
In order to view this object you need Flash Player 9+ support!
<a href="http://www.adobe.com/go/getflashplayer"> 
<img alt="Get Adobe Flash player" src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" /> 
</a> </div>

</td>    </tr>
</tbody></table>

Step4
you can Change the images ,titles and link location in banner.xml file
you have to change only this section of code,or to add more images use this code between <items>....</items>
<item>
            <title>your title</title>
            <path>content/images/image1.jpg</path>
            <url>your url</url>
            <target>_blank</target>
            <bar_color>0xcd0a10</bar_color>
            <bar_transparency>70</bar_transparency>
            <slideShowTime>3</slideShowTime>
        </item>
Any problem don't forget to ask me.



2 comments:

  1. This file is either removed due to copyright claim or is deleted by the uploader.

    please an other link

    ReplyDelete
  2. http://dl.dropbox.com/u/13256471/xml%20_slideshow.zip

    ReplyDelete

fuzionpro Headline

fuzionpro