Using a Dreamweaver generated Slideshow in Wordpress

If you want to have cool flash slideshow 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 and make it work in a typical Wordpress installation. From now on, you can amaze your friends and clients with cool flash slideshows inside Wordpress. More tutorials will follow, on how to customize your wordpress website with creative products.

First step

We need to have a local testing server. If you don’t know how to setup a testing server on your computer I have made a tutorial on how to do just that here. Just use PHP & MySQL testing server.

Install Wordpress

If you completed the first step, now we need to install wordpress on our testing server. Go to www.wordpress.org and download the latest version of wordpress. Once you have downloaded the package extract the archive into your testing folder. If have installed XAMPP you should have something like this : “your path to xampp\xampp\htdocs\wordpress” (wordpress is the folder from the archive). Or if you installed WAMP Server you should have something like this: “path to wamp\wamp\www\wordpress”.

Create a database for wordpress

Start your testing server and go to your browser and enter this : http://localhost/wordpress/. The setup of wordpress should begin.

Wordpress Configuration File

The first thing when installing wordpress you need to create a configuration file, where your wordpress settings will be saved. How you customize your wordpress website: comments, header's page, footer's page, post's page and other settings.

Wordpress Database Configuration

In order to use wordpress platform, you need to have a MySQL database for wordpress where all the comments, posts and other things will be saved. This is the step where we create the database. Now start your phpmyadmin (http://localhost/phpmyadmin/ ) login with your admin user, usually it should be root and the password that you specified for that user. If you do not specified any password leave it blank and press go.

PHPMyAdmin Login Page

Now create a database for the wordpress platform, the default name should be “wordpress” . If you want to make your wordpress more secure you can give it a different name, but remember to change the name in the next step for wordpress.

Create a database

When you are done with creating the database go back to your wordpress setup and specify the requirements for wordpress to connect to your database. Make sure you have the same database name in the setup with the name of the database you previously created. Enter your admin user, it should be “root” and also enter your root password. If you have not set a password leave it blank. Leave everything how they are, meaning the host and the table prefix.

Wordpress Databse Setup

Press submit to go to the next step.

Wordpress Database Installed

If everything was correct wordpress will now install itself. Just press run the install and wait for wordpress to give you the next step.

Define your wordpress site

Now you need to set a title for your blog, and enter an e-mail where you will receive the notifications from your wordpress installation.

Wordpress final step

If you see the image above that means everything was ok and wordpress was installed on your local testing server. The default username is admin with a random password that was generated from wordpress. The first thing you should do is to change this password to something you can remember or something more stronger.

Creating a flash slideshow with Image Show Pro extension in Dreamweaver

These are the steps to install wordpress on your local testing server. The next thing that we will discuss it’s how to create a flash slideshow with Image Show Pro in Dreamweaver. If you don’t have this Dreamweaver extension please go here and download it.

In order to create a slideshow with the Creative Image Show Pro extension you need to know some of the basics of the Dreamweaver plugin. The basics of creating a slideshow are explained in this tutorial here; once you get the basics with the product you need to setup your own slideshow. Below we will discuss how to make the slideshow match the Wordpress theme.

Integrating the Dreamweaver generated slideshow in Wordpress

• Make sure you know the dimensions of the slideshow and the images from the slideshow. My testing theme was the default theme from wordpress. I have placed the Image Show Pro slideshow into the header of the theme. I will show you how to do just that. But first let's focus on the slideshow.

Wordpress header Image

In Dreamweaver

When creating the images we need to have our images with these dimensions. Place the images for the slideshow inside a folder called “slides”. Open your Dreamweaver, go to Insert Panel, select Image Show Pro, Insert Image Show Pro. And add your images for your slideshow.

Image Show Pro

•  
• Copy the folder with your images inside the wordpress installation folder. Like this "your path to xampp\xampp\htdocs\wordpress\slides". Also there is a folder called "includes" from the Image Show Pro, copy that folder in the wordpress installation folder. Like this "your path to xampp\xampp\htdocs\wordpress\includes".

Switch to code view, and find the lines with the Image Show Pro slideshow. There should be something like this:

 <!-- 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 -->
<!-- BannerPro render begin -->
 <script type="text/javascript" > render_xtd_ispro(); </script> 
<!-- BannerPro render end -->

Also, there are script files in the header that we will add to our custom header. Here are the lines for those script files:

<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>

Customizing Wordpress

Login with your data to wordpress. If you forgot the page here it is: http://localhost/wordpress/wp-admin/ . In the Appearance tab, Select Editor and in the right panel there should be header.php. Like in the picture below.

Wordpress header
 

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

This is the header configuration file. This is where we will add our new cool flash slideshow. First locate the head section where we will add those script files that we mentioned above. We should place those lines right before the CSS part begins. Between the link part and the CSS.

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"
 type="text/css" media="screen"   />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>"   />


<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> 
  
<style type="text/css" media="screen">

Now we need to add that slideshow to our header. Locate at the bottom a div called header with a role of a banner. Inside there is a div called headerimg. This is where we will place our cool slideshow. Delete the lines inside the headerimg div and paste our slideshow code. You should have something like these lines:

<div id="header" role="banner">
	<div id="headerimg">
   
<!-- 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 -->

   <!-- BannerPro render begin --> 

   <script type="text/javascript" >    render_xtd_ispro(); </script> 

   <!-- BannerPro render end -->
	</div>
</div>

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). Here is an example for absolute URLs:
src=http://www.your-domain.com/blog/includes/. Where blog is the folder where you have installed wordpress. Here is the example for the JavaScript files :

1. Editing the script files from the header

<script type="text/javascript" src=" http://www.your-domain.com/blog/includes/ImageShowPro/flash_detect_min.js">
</script>
<script type="text/javascript" src=" http://www.your-domain.com/blog/includes/ImageShowPro/xtdProBanner1.js">
</script>
<script type="text/javascript" src="http://www.your-domain.com/blog/includes/ImageShowPro/xtdProBannerLayout...
</script>

2. Editing the JavaScript file

You need to open the JavaScript file xtdProBanner1.js that is located inside the "includes/ImageShowPro" folder and search for ".jpg". We need to add absolute url links to our images. When you find the links to our images add the correct path to them, like this:
{"value":" http://www.your-domain.com/blog/slides/kubrickheader.jpg", "name":"backImage"},
\\"url\\":\\"http://www.your-domain.com/blog/slides/picture1.jpg\\"},
\\"url\\":\\"http://www.your-domain.com/blog/slides/picture2.jpg\\"},
\\"url\\":\\"http://www.your-domain.com/blog/slides/picture3.jpg\\"}]"}]}

3. Editing the div code for the slideshow

We also need to change the URLs for the images inside the div container. Remember I have told you above to place the div container for the slideshow inside the headerimg div, from the header.php file. We need to add absolute URLs to our images, so here is the example:

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

Press update file and preview your site. If everything went accordingly to our plan you should get something like in the picture below.

Final Preview

This is how your wordpress website should look like. Having our new slideshow inside our header. You can modify the theme or choose one of the many free wordpress themes that are out there. Just make sure when you implement your slideshow to resemble your new design.

Source : tutorialized.com