WebPlus X2: How to do this animation ?

[Electrodesign]

Hi,

I'd like to know what kind of animation file is the serif website banner in the home page ?

It's not flash and doesn't seem to be animated gif...

Does anybody know how to produce it ?

Thank you !

[Ken Cope]

Originally Posted by Electrodesign Hi, I'd like to know what kind of animation file is the serif website banner in the home page ? It's not flash and doesn't seem to be animated gif... Does anybody know how to produce it ? Thank you !

I think it's a JavaScript Slider animation

*EDIT* It uses six individual jpg's with a single image fading to the next image - look in the HTML source about halfway down. You might be able to get something like it on DynamicDrive

[TomR]

I think it's a JavaScript Slider animation

Yep, I think so to.

If you can't find anything free for your needs and your willing to pay a modest fee, have a look at ScriptOcean Slideshow

I think you can add text, hyperlinks etc etc.

[Electrodesign]

Thanks Ken, I'm gonna have a look on it

[Neil J]

It's jquery innerfade script

Instructions and download can be found here

[TomR]

Instructions and download can be found here

I get a script virus alert on that link.

[Neil J]

Originally Posted by TomR I get a script virus alert on that link.

Strange, it's okay here... Seems safe too

[TomR]

Yep.....seems OK here now.

[Electrodesign]

Thank you Tom and Neil,

I'm a newbie on this kind of javascript , is it complicated to integrate in WP ?

I know how to add code but not to add "call" and scripts in the code (body ? head ?)for InnerFade... and how does it work... arf

If you have a little time to explain to me

[Saberking13]

Hi

Sometimes JS can be difficult to add into WP, but with a 'free sample" of someone else's WP file, it should be no problem.

[Electrodesign]

Yes Saberking, a WP page example in which I could see the code and reproduce it with my own values...

[Neil J]

Originally Posted by Electrodesign Yes Saberking, a WP page example in which I could see the code and reproduce it with my own values...

I'll have a bash at it tomorrow for you, shouldn't be too hard

[Connor]

I want to learn jquery and stuff, but I don't even know html

I have a jQuery slider on one of my sites, but it's a server script and not made with WP so I wont show

[Electrodesign]

Oh yes Neil

If you could make me an example page with A list with images and links with Jquery that I can modify with my values serías un muchacho formidable

[AlfredP]

Hi Electrodesign,

Try the attached. To use your own images, go to 'Tools > Site Manager > File Manager...' and add them to the 'images' folder. In Design View, double-click the image on the page and replace it with the first image you want to use, right-click and choose 'Image Export Options...' to change the Alt text and then press Ctrl+K to change the hyperlink. Press Alt+S to bring up the Source View and scroll down to the section which begins with <ul id="portfolio">. Edit or remove the existing <li>...</li> entries, or add new ones in the same format for your set of images.

(~not Neil)

Alfred

[Connor]

Originally Posted by AlfredP Hi Electrodesign, Try the attached. To use your own images, go to 'Tools > Site Manager > File Manager...' and add them to the 'images' folder. In Design View, double-click the image on the page and replace it with the first image you want to use, right-click and choose 'Image Export Options...' to change the Alt text and then press Ctrl+K to change the hyperlink. Press Alt+S to bring up the Source View and scroll down to the section which begins with <ul id="portfolio">. Edit or remove the existing <li>...</li> entries, or add new ones in the same format for your set of images. (~not Neil) Alfred

Hi

Are you able to show us how you did this?

Thanks

[Neil J]

Nicely done Alfred,

I don't use the built in 'File manager' half as much as I should do.

[AlfredP]

Originally Posted by Connor Are you able to show us how you did this?

Hi Connor,

I went to the InnerFade page, viewed the page source and copied these lines:

<meta http-equiv="imagetoolbar" content="no" />

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/jquery.innerfade.js"></script>
<script type="text/javascript">
   $(document).ready(
		function(){
			$('ul#portfolio').innerfade({
				speed: 1000,
				timeout: 5000,
				type: 'sequence',
				containerheight: '220px'
			});

	});
</script>

<link rel="stylesheet" href="css/reset.css"  type="text/css" media="all" />
<link rel="stylesheet" href="css/fonts.css"  type="text/css" media="all" />
<style type="text/css" media="screen, projection">
	@import url(css/jq_fade.css);
</style>

(i.e. ignoring the code for the news ticker and the other classes which I haven't used). I pasted all of the above into the <!--Page Head--> section in Source View.

As for the rest of the code, I simply pasted in

<ul id="portfolio">
  <li>

after <!--MainDivStart--> and added the remaining lines

</li>
<li>  
  <a href="...">
  <img src="..." alt="..."></a>
</li>
  .
  .
  .
</ul>

before the <!--MainDivEnd--> placeholder.

As noted above, I used the File Manager to add the images to the 'images' folder.

I hope this helps.

Alfred

[Electrodesign]

Hi Alfred,

Thank you very much for your example, I'm gonna try it and I'll tell you if it works in my website

It's precious to have real examples like this to understand how does it work when it's the first time I use it .

[Electrodesign]

Hello,

I open this post again... this innerfade script is very usefull but do you know how to remove the grey frame all around the pictures in the animation ?

Thank you