Using A Dreamweaver Generated Slideshow In Wordpress

One of our customers asked: can I use your Image Show Pro Dreamweaver extension to create a header slideshow in Wordpress? Good thing that I’m a big Wordpress fan and I could quickly drop a slideshow on one of my blogs and see what’s needed to make it work. If you want to have cool flash slideshows with your Wordpress blog or website and you do not have the skills to implement jquery animations or simple you are not a big fan with the coding part, this tutorial will show you how to generate a slideshow in Dreamweaver with Image Show Pro Dreamweaver extension and make it work in a typical Wordpress installation.

It’s easier than you think if you don’t use URL rewrite permalinks.

• copy the slideshow “/includes” files from the Dreamweaver location to the Wordpress folder (Image Show Pro creates a folder called “includes” in the Dreamweaver site);
• you will need to manually edit the header.php file (location /wp-content/themes/[your template name]/header.php) and add the 3 JavaScript include files to the head section (please copy the ones from Dreamweaver, below are just samples).

<script type=”text/javascript” src=”/includes/ImageShowPro/flash_detect_min.js”></script>
<script type=”text/javascript” src=”/includes/ImageShowPro/xtdProBanner1.js”></script>
<script type=”text/javascript” src=”/includes/ImageShowPro/xtdProBannerLayout.js”></script>

• edit the file where you want the slideshow to appear and add the rendering script (for example if you want to replace the typical Wordpress theme with the slideshow, edit the header.php file and add the rendering script there (again, below it’s just a sample):

<!– Banner xtdProBanner1 begin –>
<div id=”xtdProBanner1″ style=”width:760px; height:200px; overflow:hidden;”> <img src=”/slides/picture1.jpg”/> <img src=”/slides/picture2.jpg”/> <img src=”/slides/picture3.jpg”/> </div>
<!– Banner xtdProBanner1 end –>
<!– Banner xtdProBanner1 rendering scripts start –>
<script type=”text/javascript”> xtdProBannerLayout(“xtdProBanner1″,”") </script>
<!– Banner xtdProBanner1 rendering scripts end –>
</div>
<!– BannerPro render begin –>
<script type=”text/javascript” > render_xtd_ispro(); </script>
<!– BannerPro render end –>

If you use URL rewrite permalinks (Day and name, Month and name, numeric or custom) you need to use absolute URLs

You need to change the relative paths to absolute paths (that’s the quickest way to make sure the slideshow will work on all page types: category, post detail, page). Short version: copy the files from Dreamweaver in the Wordpress folder and change the paths to the included JavaScript files and the rendering script with absolute paths; then in one of the JavaScript files, you need to change the paths to the images you use for the slideshow with absolute paths as well.

That’s not very complicated either, but I did write a full tutorial that will go through the Wordpress installation part (just like any good Wordpress fan would do).

You can read the full tutorial here.

• Bookmark on Delicious
• Digg this post
• Recommend on Facebook
• Buzz it up
• Buzz it up
• Share on Linkedin
• share via Reddit
• Share with Stumblers
• Tumblr it
• Tweet about it
• Subscribe to the comments on this post
• Tell a friend