Rotating page header images

 

You may visually enhance your page headers by using rotating images inside. Rotating images will allow you to display a lot of visuals in a limited area and support the information on your web page in a very attractive manner.

 

With Slideroll you may rotate all your images inside a slideshow embedded in your page header. Or, with a simple HTML solution you may rotate your images only when the page is reloaded.

  

Rotating page images with Slideroll

 

With Slideroll you may create rotating page header images by just selecting the images from your computer. Slideroll will generate a flash file that rotates these images and you may integrate this file in your site using the HTML snippet.


Slideroll has a Basic and Pro version. The Basic option will allow you to create up to 10 slide shows with a maximum size 360 x 240 pixels, and use up to 100 images for your slideshow. The Pro version allows slideshow size up to 800 x 600 pixels, and up to 5000 photos (No Slideroll logo in the corner of your slideshow nor in your videos).

 

Due to the above size limitation, if your page header has width larger than 800 pixels, the rotating images will take up only part of the page header image.

 

To create a rotating visual with Slideroll, please follow these steps:

 

1. Create an account with Slideroll 

  

2. After you have logged in click Slideshow Creator
   

 

3. Click Upload Photos

   

 

4. Click Select Photos to Upload or use the Drag and Drop upload (in the screenshots below we used the Drag and Drop upload). After done click Done/OK.

   

 

5. In the Slideshow Properties popup enter the slideshow size and how it will play. Set the width and height to that of the header image of your site (keep in mind that you can only adjust to a size that your account type allows).

  

    

6. Drag the photos from the slide tray to the timeline and position which part of the photo will show in the slideshow using the window where you see the large view of the photo. Click Save.

   

  

7. Click Publish at bottom right. Select high quality, loop, and autoplay from the popup. Click Publish in the popup.

     

    

8. If you have popups enabled your slideshow will appear in a new window (if you have popups disabled select Play Again to get the popup). Select Get Link and copy the part of the link highlighted here (1):

           

 

9. To add the slideshow as your page header add an HTML snippet below your page header. Paste in the HTML snippet box one of the following two codes, depending on what design you are currently using. Replace the highlighted part of the code with the piece of the link you copied (step 8):

         

Design
Code to be used

Sirius, Vega, Atria, Kuma

<script type="text/javascript">
var so = new SWFObject("http://www.slideroll.com/player.swf?s=abc12def ", "flashmovie", "100%", "100%", "7");
so.addParam("quality", "high");
so.addParam("wmode", "transparent");
so.addParam("base", "http://www.slideroll.com");
so.addParam("scale", "noscale");
so.addParam("salign", "tl");
so.addVariable("encoding", SK.Singletons.env.get('encoding'));
so.write("fm_page_image");
</script>

Pasta, Cocoa, Futuretech, Aurora

<style type="text/css">
#pageImageBar { background-image: none; }
</style>
<script type="text/javascript">
var so = new SWFObject("http://www.slideroll.com/player.swf?s=abc12def", "flashmovie", "100%", "100%", "7");
so.addParam("quality", "high");
so.addParam("wmode", "transparent");
so.addParam("base", "http://www.slideroll.com");
so.addParam("scale", "noscale");
so.addParam("salign", "tl");
so.addVariable("encoding", SK.Singletons.env.get('encoding'));
so.write("pageImageBar");
</script>

10. On the published page your page header will display a slideshow similar to this one: