Artisteer v. 2.4 has support for Flash (.swf) within the "Header" tab of the UI. People within the Artisteer community, however, may want a solution to dynamically rotate their header images without Flash.
Here is the first of two methods.
At first glance this may appear involved, but each step is detailed cleary and it’s actually easy.
That being said, you may first wish to view an example and download it.
What you need:
What it does:
What you modify:
Skill level: beginner/intermediate.
Introduction:
This is a dynamic solution; that is, your site will transition header images—randomly or sequentially—while the visitor is on the same page. Therefore, it is also a static solution, for when a visitor changes to a new page, a new header image will appear.
We will work locally with standard HTML and JavaScript files, however, this tutorial can apply to a Joomla website. This tutorial assumes that you can create and export an Artisteer template and modify the necessary files.
For Joomla: Properly installed and configured; ability to install an Artisteer template in Joomla; comfort with modifying the required files in Joomla; FTP access to your site (unless you’re running a local server). Please refer to Joomla.org for more information.
Please note: For clarity, some file names and folders are enclosed in single or double quotation marks. Leave the quotes out. In addition, back up all files before editing.
Let’s begin.
Step 1: Create your design template.
Step 2: Intuitive as Artisteer is, we’re going to have to save your design a number of times when working with Artisteer’s embedded images. We’ll extract the file, 'Header.jpg' (your header image), and successively rename it. Alternately, you can work with an image editing program and simply clone 'Header.jpg' and overlay different images. The images, however, will need a transparent background to seamlessly integrate with the background of your existing header image—especially if you use Artisteer’s 'glare' or 'gradient' effects.
Of course, though I don’t recommend it, you could create entirely different header images, in which case simply start at Step 2.2, then skip to step 2.5.
Step 2.1: With your design complete, export as 'HTML' and select 'Folder'. We’ll test it locally first. You may export as a .zip archive when you are ready to work with Joomla.
Step 2.2: Navigate to your exported folder. In the 'images' folder find 'Header.jpg'. Copy this file for a backup. Rename it to 'Header_0.jpg'.
Step 2.3: Select the 'Header' tab in Artisteer. In my case, where I’m rotating people, simply select another person or object for your header. Let Artisteer update the display with the new image.
For example, from the following header...
...to the newly updated header.
Step 2.4: Save your work and again export it as 'HTML' to the same folder. Yes, it will overwrite your data, but it’s the same data with a new 'Header.jpg' file.
Step 2.5: Navigate to your exported folder. In the 'images' folder find 'Header.jpg' and rename it to 'Header_1.jpg'.
You shold now have three Header image files: the original which you copied and saved; Header_0.jpg; and Header_1.jpg.
Step 2.6: Repeat Steps 2.3 through 2.5 as many times as necessary for the number of images that you wish to rotate. For example, 'Header_X.jpg', where X ascends in numerical order.
Step 3: Create a new folder in your root directory and name it 'rotate'.
Step 3.1: Move all of your 'Header_X.jpg' files to this folder.
Step 3.2: Return to the 'images' folder and rename the original header image that you made a copy of in step 2.1 back to it’s original name, 'Header.jpg'.
Step 4: JavaScript files.
Copy the JavaScript code for 'Step 1' of the Ultimate Fade-in slideshow (see website) and paste it into a text editor. We are going to call the script from your document’s <head> tag, so in your text editor remove the first line, <script type="text/javascript">, and the last line, </script>. Save the file as slideshow.js in your folder’s root directory.
Step 4.1: Configuring fadeslideshow.js.
Again, in your text editor, enter your image paths to the 'rotate' folder that you created earlier. For example:
fadeimages[0]=["rotate/Header_0.jpg", "", ""]
fadeimages[1]=["rotate/Header_1.jpg", "", ""]
Save the file when done.
Step 5: Edit your document’s <head> tag (page.html, index.html, index.php).
Place the following script call: <script type="text/javascript" src="fadeslideshow.js"><script>
Step 5.1: Edit your document’s <body> tag, 'page.html'.
Scroll down to...
<div art-Header-jpeg"></div>
Insert the Javascript from 'Step 2' of the Ultimate Fade-in slideshow (see website). In my case, it looks like this:
<div class="art-Header-jpeg">
<script type="text/javascript">//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 884, 225, 0, 9000, 0, "R")</script>
</div>
Important: Be sure that you understand the different parameters of the Ultimate Fade-in slideshow.
For our example:
slideshow_width: 884
slideshow_height: 225
borderwidth: 0
delay: 9000 (milliseconds}
pause: 0 (1=yes if you want it to stop on a mouseover)
optionalRandomOrder: "R" (remove R for ordered sequence of images)
Be sure to set your image paths in fadeslideshow.js. Also note that you can add a background color. The reason for this is to coordinate with your web site’s color scheme, as well as soften the image transition, as opposed to a stark, white background.
Save the document.
Step 6: Edit the style sheet, 'style.css'.
Open 'style.css' and find 'div.art-Header-jpeg'. This class has the properties for your header. Make sure that the width and height parameters match the slide show parameters in step 5.1. For example, my style sheet looks like this:
div.art-Header-jpeg
{
position: absolute;
z-index:-1;
top: 0;
left: 0;
width: 884px;
height: 225px;
background: #78ab7c;
/*background-image: url('/../images/Header.jpg');
background-repeat: no-repeat;
background-position: center center;*/
}
Note that I commented out the last three lines. Though most browsers are JavaScript enabled, you can leave it as a fall-back if you wish
Save the style sheet if you made any changes.
Step 7: Test the slide show.
If you have correctly followed this tutorial and load your default page into a browser, you should see image transitions take place.
Final considerations:
I would compress all of your header image files, achieving a balance between file size and image quality. In addition, this image slideshow has a small footprint in terms of file size and overhead, which can make a difference in the initial page load time.
Share