CU3ER is an amazing free Flash image slider with various 3D transitions. Here is a quick guide to help you install CU3ER in your WordPress sites easily. You can see a live demo at Coltter.com.

1. Download CU3ER

First download latest version of CU3ER, you need to signup for membership to get the personal/non-commercial usage license. It’s free of charge.

2. Upload CU3ER to theme directory

Upload the whole CU3ER folder to your theme directory via FTP. For example, /webmastercrunch.com/wp-content/themes/mythemename/cu3er/. We use “cu3er” as the folder name in this tutorial. You may need to change the actual path accordingly if you use an alternative name.

3. Embed code at theme header

Embed the code to your theme header section before the header tag. At line 12, 640/480 is the image size, if you plan to use image 800×300 PX, just change the number to 800/300 accordingly.

<!-- CU3ER content JavaScript part starts here   -->
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/cu3er/js/swfobject.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/cu3er/js/CU3ER.js"></script>
<script type="text/javascript">
  // add your FlashVars
  var vars = { xml_location : '<?php bloginfo('template_url'); ?>/cu3er/CU3ER-config.xml' };
  // add Flash embedding parameters, etc. wmode, bgcolor...
  var params = { bgcolor : '#ffffff' };
  // Flash object attributes id and name
  var attributes = { id:'CU3ER', name:'CU3ER' };
  // dynamic embed of Flash, set the location of expressInstall if needed
	swfobject.embedSWF('/cu3er/CU3ER.swf', "CU3ER", 640, 480, "9.0.45", "<?php bloginfo('template_url'); ?>/cu3er/js/expressInstall.swf", vars, params, attributes );
  // initialize CU3ER class containing Javascript controls and events for CU3ER
  var CU3ER = new CU3ER("CU3ER");
</script>
<!-- CU3ER content JavaScript part ends here   -->

4. Upload your slider images

Upload your own images to cu3er/images folder. It’s default setting is 5 images totally. I would highly recommend to use the same image file name and format JPEG, so you are not necessary to further edit the CU3ER-config XML file.

5. Determine where to display the Flash slideshow

Just paster the code below to where you want the image slider to be shown. That’s it! You now have a stunning 3D Flash image slider in your WordPress blog.

<!-- CU3ER content HTML part starts here   -->
  <div id="CU3ER">
    <noscript>
      <!-- modify this content to provide users without Flash or enabled Javascript with alternative content information -->
      <p>Click to get Flash Player<br /><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
      <p>or try to enable JavaScript and reload the page
      </p>
    </noscript>
  </div>

For Advanced Users

1. You can go to CU3ER documentation to learn more about how to config the setting for CU3ER-config XML.

2. In step 5, replace the path http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif with one of your slide image in case the browser does not support Flash such as Apple mobile devices.

3. Wrap the code in step 5 using this PHP snippet, your image slider would display on homepage only.

<?php if(is_home() && $post==$posts[0] && !is_paged()) { ?>
	<!-- CU3ER content HTML part starts here   -->
<?php } ?>

Do you like this post?

 Subscribe free via RSS, or by Email to get updates.