Header Slider

[amartorana]

I am a newbie and was hoping someone can tell me how I may use a slider for my header in the Imbalance theme. I love the theme for its rollover effect, but need to have a 900 wide by 250 high header that slides 5 different images. Can anyone help me on this please?

[shinobisan]

Hi amartorana, if you want to integrate an image slider to imbalance theme you should follow these simple steps:

1.- Download/Install Easing Slider Plugin. http://wordpress.org/extend/plugins/easing-slider/

2.- Activate and Configure the Plugin. In Easing Slider Settings you should define the 5 different images you want to use. I used Custom Images, just upload and insert path in image fields.

3.- Once you have your Slider configured, you will need to modify the theme depending on what you want to achieve. If you want to have your Slider displayed between your Logo/Menu and Posts you will need to edit Appearance/Themes/Editor/Main Index Template (index.php). Add this code under <?php get_header(); ?> tag:

<div align="center">
<?php if (function_exists('easing_slider')){ easing_slider(); }; ?>
</div>

<?php if (function_exists('easing_slider')){ easing_slider(); }; ?>
This line is used to embed the slider in your Theme.

The <div></div> is an HTML tag used to define a division or section inside your HTML document. This is very important since you have to specify where the embedded slider's division will start and end. If you just use the embed line without div tag you will see that the grid that holds your posts will be broken.

The align="center" Centers the content of the division.

You can further customize the way your Slider is displayed by configuring its settings(EasingSlider) or by using CSS Style.

Example:

HTML

<div id="slider">
<?php if (function_exists('easing_slider')){ easing_slider(); }; ?>
</div>

CSS

#slider {
	align:center;
}

Once you have made these changes to your files, update them and preview your site.

If you have any questions don't hesitate to comment below.

;)

[amartorana]

Hi Again:

I have 2 questions:
1) How can I have the slider header appear the full width of the home page?
2) Can you recommend an easy image plugin that will allow a 250 X 250 image and then have two small thumbnails on the side of the 250 X 250 image that when you hoover over the thumbnail, it shows in the 250 X 250 image box?

We are using the site to sell scarves and need to show the image of the scarf, and then the details of the scarf in 2 additional pictures.

Thanks in advance.

Audrey

[shinobisan]

Hello,

I take it you got the slider working :).

1.- For full width header just resize your images to fit imbalance theme. I think 945px wide is the full size. You can use CSS to add padding where needed but you should leave right,left-padding to 0px in order to adjust the width.

2.- I haven't used any plugin for this, might be worth doing a search, but you could easily add more images descriptions to your products using featured image for thumbs and posting the rest of the images inside the post. If you are looking for ways to group, manage and post multiple images groups you should checkout NextGen gallery plugin.

Hope this helps!

[Preecer]

Thanks for this, it works a treat.

[symmetricforest]

Wow, thank you all for the support!

[maruy]

Great help! I did it ;)