BannerWOW Header banner

vrijvlinder

Here is a banner slider with transition that I adapted for the banner on Vanilla. It comes from Wowslider.com a very cool app that makes it easy to create these sliders by generating the necessary files for you and embed as galleries too. It works on iphone or any device it does not use flash. You can modify to suit your needs.

This is a Header banner with a rotating animation transition. I made it out of a larger slider and adapted it for the Vanilla Banner standard size or area. 980px by 150px

You put the images in the images folder inside the data1 folder.

Inside the engine1 folder is the style.css and the other files needed for this banner to work. like js files and button images.

You can put this folder inside your theme folder You can put it anywhere actually, but I put it in there for ease of editing I was told it was ok to put extra stuff in there.

You can put it in the plugins folder or on it's own or make a folder called banners and put it in there. What is important is to put the link to the iframe file to point to it's location.

Then you simply add the iframe code in the spot where the banner would be in the default.master.tpl or default.master.php
you would place this instead of the part that says <?php render logo or {logo} depending on your type of master.

<iframe src="the full/ url/ to /iframe_banner.html"></iframe>

You can use the plugin Pockets to add the Banner or maybe Apt Ads too .

I placed some sample images for you, you can change them to whatever you want just replace the names of the images in the index.html file. I recommend you make your images banner size .

You can edit the iframe file but do it in a text editor sometimes it can fail to work if you edit in a console.

I prefer doing this versus a lot of html and js in the master cluttering the page and make it load slow. This works like a plugin but you need to plug it in manually as I describe above.

You can see it here.

http://vrijvlinder.com/cosmicjustice/themes/HeavyMetal/gallerywow/iframe_index.html

How did I get the page to be black? html, body{background:#000;} on the iframe html and index

You can edit the time between transitions and a few other things in the wowslider.js file.