Fade Effect Flickering Problem
I have thumbnail gallery that utilizes the fade effect on the
mouseover event. Unfortunately, if the user mouses over the
thumbnails too quickly, the images flicker quite horribly. I was
wondering if there was a way to remove this problem.
Thanks
You can view the gallery
here
Hello existdissolve,
Your problem in the gallery has 2 issues:
1. Indeed you discovered a bug that I managed to fix in the
internal version that will be published next week. In the code
below that I will give I will include the work around for the
problem too.
2. Seems that you didn't completely understood the meaning of
the toggle option and I will try to explain you more detailed here.
Basically the toggle option is not controlling the direction of the
running effect as I think you understood. The toggle will not tell
to the effect to run in reverse direction but instead its scope is
to tell the effect that it CAN run in reverse direction.
When you try to animate an element using a link, when you set
the toggle option on, the animation will go between the from and to
values, on the first click, and will go between to and from values
on a second click. This cycle could repeat infinitely.
When you try to achieve this effect using 2 links you'll have
2 implementation solutions:
a. Use the same line of code for both links.
<a href="#" onclick="MM_effectAppearFade('element', 500,
0, 100, true)">Click Me First</a>
<a href="#" onclick="MM_effectAppearFade('element', 500,
0, 100, true)">Click Me Second</a>
You will observe that if you'll click these links in order
the element will appear and then will disappear back.
b. Use 2 non toggling effects with the from and the to
options reversed:
<a href="#" onclick="MM_effectAppearFade('element', 500,
0, 100, false)">Click Me First</a>
<a href="#" onclick="MM_effectAppearFade('element', 500,
100, 0, false)">Click Me Second</a>
There is however a problem why I am not recommending this
second solution in your case. If you click on the links in the
second example fast enough in their order you'll have a weird
result. The 2 effects are not knowing the other effect is running
so you'll end up with 2 effects that tries to do an opposite action
in the same time on the same element. This is somehow happening in
your case too if you move the mouse over the images fast enough you
can't predict anymore what the result will be.
In this situation you'll have to change a little bit the code
in your page. Right now you have this code:
<img id="tn{ds_RowID}"
src="galleries/{dsGalleries::@base}{dsGallery::@base}/thumbnails/{@thumbpath}"
width="90"
height="90"
alt="Sample Images from Spry Data."
title="{ds_RowNumber}"
style="opacity:0.3; filter:alpha(opacity=30)"
onmouseover="MM_effectAppearFade('tn{ds_RowID}', 500, 30,
100, false)"
onmouseout="MM_effectAppearFade('tn{ds_RowID}', 500, 100, 30,
true)"
onclick="HandleThumbnailClick('{ds_RowID}');" />
When you change the onmouseover and the onmouseout effects to
match the first solution I explained above you'll result with this
code:
<img id="tn{ds_RowID}"
src="galleries/{dsGalleries::@base}{dsGallery::@base}/thumbnails/{@thumbpath}"
width="90"
height="90"
alt="Sample Images from Spry Data."
title="{ds_RowNumber}"
style="opacity:0.3; filter:alpha(opacity=30)"
onmouseover="MM_effectAppearFade(this, 500, 30, 100, true)"
onmouseout="MM_effectAppearFade(this, 500, 30, 100, true)"
onclick="HandleThumbnailClick('{ds_RowID}');" />
You observe that I changed in both effects the target element
from tn{ds_RowID} to the special javascript keyword 'this'. I did
this to overcome the bug I told you about that you discovered in
the SpryEffects.
Let me know if you have further questions on this problem.
Regards,
Cristian MARIN
Similar Messages
-
hi everyone,
I'm having problems with a fade out/in transition in IE8. The area I am changing has a white background (actually there are a few nested divs that all have a white background), and the fade effect triggers on a click in the navigation area and fades everything into the body background color (dark brown) and back. The effect works fine in firefox and safari. Anyone know how to fix this problem? I want the content that is fading to maintain the white background and not fade to brown and back. you can view the page here to see whats going on.
http://www.prometheusbusiness.com/testarea/NoelRose/home.html
also, (and this is a really small issue, so I'm not too concerned if I can't fix it) after the page loads, the first fade out transition doesnt seem to fire, it just disappears, and the new page fades in. after the first time, everything works as I expect, but it would be great if every click worked exactly the same every time.
any help is appreciated, thanks.
-Danhi everyone,
I'm having problems with a fade out/in transition in IE8. The area I am changing has a white background (actually there are a few nested divs that all have a white background), and the fade effect triggers on a click in the navigation area and fades everything into the body background color (dark brown) and back. The effect works fine in firefox and safari. Anyone know how to fix this problem? I want the content that is fading to maintain the white background and not fade to brown and back. you can view the page here to see whats going on.
http://www.prometheusbusiness.com/testarea/NoelRose/home.html
also, (and this is a really small issue, so I'm not too concerned if I can't fix it) after the page loads, the first fade out transition doesnt seem to fire, it just disappears, and the new page fades in. after the first time, everything works as I expect, but it would be great if every click worked exactly the same every time.
any help is appreciated, thanks.
-Dan -
Appear/fade effect problems
I'm working on a portfolio website: www.carolinedelson.com
The index page image appears how i want it to, but when you click s/s 2013 and click one of the gifs, the images flash on the screen then display the effect. i don't know how to change this to a smooth fade in. I also work in the display mode of dreamweaver cs6 a lot more than directly with the code, so any simple fixes would be really appreciated!On Thu, 23 Aug 2007 17:07:25 +0100, David Powers
<[email protected]>
wrote:
>[email protected] wrote:
>> <img src="images/places_03.jpg" alt=""
name="main" width="642" height="508"
>> id="main" onload="MM_effectAppearFade(this, 1000, 0,
100, false)">
>
>You can't use an onload event on an image. It works only
on the <body>
>tag. Remove the Fade effect from the image, then select
the body tag in
>the Tag selector at the bottom of the Document window.
Apply the Fade
>effect to the body, and select "main" as the Target
Element.
David - I'm sure it's in a book somewhere - but I can't find
it.
I already have the Modify Template Make Attribute Editable
<body id="default" >
use this to apply css to specific pages
Can you add a second or even third so that in addition you
can use
onload javascripts.
I've rather fought shy of Javascript - preferring to use php,
but I
now think that was a mistake - and just use JS to provide
extra
features whilst allowing for people that have it disabled
Or maybe I should just ditch Templates altogether and use
100% ssi's
~Malcolm N....
~ -
Hi!
I'm using the following code to do a fade transition effect between two images:
public void render(Graphics g, Image imageFrom, Image imageTo, int width, int height) {
BufferedImage buffer=gc.createCompatibleImage(width,height);
Graphics2D g2 = (Graphics2D)buffer.getGraphics();
int counter=0;
while (counter<90) {
counter=counter+2;
double alphaScalar = Math.sin(Math.toRadians(counter));
g2.setComposite(AlphaComposite.SrcOver);
g2.drawImage(imageFrom, 0, 0, null);
g2.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_OVER, (float)alphaScalar));
g2.drawImage(imageTo, 0, 0, null);
g.drawImage(buffer, 0, 0, null);
try {
Thread.sleep(5);
catch(InterruptedException ex){}
g.dispose();
g2.dispose();
buffer.flush();
}My main problem is that using a buffer to save the image composite before drawing it over the panel's Graphic context slows the effect considerably. I have other effects (scrolling, sliding and some more) which don't require the use of an intermediate buffer and they are way faster without it. I'm looking for a way to improve the perfomance of my fade effect. I've tried to draw the image composite over the panel's Graphic context directly (no buffer) but the screen flickers. Can anyone help me, please ?
Regardsimport java.awt.*;
import java.awt.event.*;
import java.awt.image.BufferedImage;
import java.io.*;
import java.net.*;
import javax.imageio.ImageIO;
import javax.swing.*;
public class ImageFading
public ImageFading()
BufferedImage[] images = loadImages();
FadePanel fadePanel = new FadePanel(images);
JFrame f = new JFrame();
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
f.getContentPane().add(fadePanel);
f.setSize(400,400);
f.setLocation(200,200);
f.setVisible(true);
private BufferedImage[] loadImages()
String[] fileNames = {
"greathornedowl.jpg", "mtngoat.jpg", "bclynx.jpg", "redfox.jpg"
BufferedImage[] images = new BufferedImage[fileNames.length];
try
for(int j = 0; j < images.length; j++)
URL url = getClass().getResource("images/" + fileNames[j]);
images[j] = ImageIO.read(url);
catch(MalformedURLException mue)
System.err.println("url: " + mue.getMessage());
catch(IOException ioe)
System.err.println("read: " + ioe.getMessage());
return images;
public static void main(String[] args)
new ImageFading();
class FadePanel extends JPanel
BufferedImage[] images;
int last, next;
AlphaComposite ac;
float alpha;
public FadePanel(BufferedImage[] images)
this.images = images;
alpha = 1.0f;
last = 0;
next = 1;
new FadeController(this);
protected void paintComponent(Graphics g)
super.paintComponent(g);
Graphics2D g2 = (Graphics2D)g;
int w = getWidth();
int h = getHeight();
int x = (w - images[last].getWidth())/2;
int y = (h - images[last].getHeight())/2;
ac = AlphaComposite.getInstance(AlphaComposite.SRC_OVER, alpha);
g2.setComposite(ac);
g2.drawImage(images[last], x, y, this);
ac = AlphaComposite.getInstance(AlphaComposite.SRC_OVER, 1.0f - alpha);
g2.setComposite(ac);
g2.drawImage(images[next], x, y, this);
public void advance()
last = next;
next = (next + 1) % images.length;
public void fade(float alpha)
this.alpha = alpha;
repaint();
class FadeController
FadePanel fadePanel;
boolean rotate;
float alpha;
final float alphaInc = 0.01f;
public FadeController(FadePanel fp)
fadePanel = fp;
rotate = true;
beginRotation();
private void beginRotation()
new Thread(new Runnable()
public void run()
while(rotate)
fadePanel.advance();
fade();
try
Thread.sleep(10000);
catch(InterruptedException ie)
System.err.println("rotate interrupt: " + ie.getMessage());
}).start();
private void fade()
alpha = 1.0f;
new Thread(new Runnable()
public void run()
while(alpha > 0)
fadePanel.fade(alpha);
alpha -= alphaInc;
try
Thread.sleep(35);
catch(InterruptedException ie)
System.err.println("fade interrupt: " + ie.getMessage());
}).start();
} -
I have an mdi applicaton in Visual studio 2010 (.Net framework 4.0). I'm having a flickering problem when user switch between an MDI Child form. I'm declaring the child form then setting the borderstyle.none at design time and dock property to fill
through programming and make them a MDIChildren before I show them so that it takes up the entire space of the MDI Parent window without being maximized (client request).
i don't want to display control box(minimize, maximize,close) of child form in mdi parent form. (client request)
The problem is that when the child form is being displayed it is briefly shown in it's default size with icon and control box before being resized to fill the available area on the MDI Parent form. When a Child Form loads, you can see it in it's original
size (the size from Design-time) then all this flickering while maximizing .
In other words, child form show up in the client area of the MDIForm, not maximized, with a caption, very shortly, before they are finally filling the client area. there is a short flicker when a new form is created and displayed. This process is most noticeable
with a not-so-powerful PC or there are lots of control inside child form.
below is my code to show child form
MyChild1 c1 = new MyChild1();
c1.MdiParent = MdiMainParent;
c1.Dock = DockStyle.Fill;
c1.Show();
how can i solved the problem of flickering issue?
I tried many options which i have described below
1.double buffering.
2.set style property to child form
this.SetStyle(ControlStyles.UserPaint, true);
this.SetStyle(ControlStyles.AllPaintingInWmPaint, true);
this.SetStyle(ControlStyles.DoubleBuffer, true);
3. override below method in each child form
protected override CreateParams CreateParams
get
CreateParams cp = base.CreateParams;
cp.ExStyle |= 0x02000000;
return cp;
4. override below method in each child form
const int WM_NCPAINT = 0x85;
const int WM_SIZE = 0x05;
protected override void WndProc(ref Message m)
if (m.Msg == WM_NCPAINT)
if (this.WindowState == FormWindowState.Maximized)
return;
if (m.Msg == WM_SIZE)
if (this.WindowState == FormWindowState.Maximized)
return;
base.WndProc(ref m);
but I didn't see any effects. please someone help me to resolve flickering issue. thanks in advance.Hi hardikvaishnav,
This is a known issue which has been reported to Microsoft Connect. Unfortunately, this issue will not fix due to stability issues around MDI. For more details, see
https://connect.microsoft.com/VisualStudio/feedback/details/97787/border-of-mdi-child-form-flashes-up-despite-formborderstyle-none.
You might use a user control or panel instead.
Best Regards,
Bob Wu [MSFT]
MSDN Community Support | Feedback to us -
I have a code on my buttons, which makes a blank image
currently on stage get replaced with a different one when a button
is rolled over.
The code I am using is this:
on mouseenter me
sprite(3).member="a"
on mouseleave me
sprite(3).member="blank"
end
Very simple lingo. Is there a way that when the new image
comes to view, it fades in when the mouse rolls over the button,
instead of just popping in, and fade out once the mouse leaves the
button, so that I end up with a smooth transition.
Thank you.Guys:
Thanks for taking your time to help me with the issue.
I actually got an answer from another member that solved my
problem. The code that was posted here was making the button sprite
do the fade effect.
My friend did some tweaking to that code to achieve what I
needed.
Here is the code:
property fadeSprite
property totalSteps
property eachStep
property animateMe
on getPropertyDescriptionList
myPropList = [:]
myPropList.addProp(#totalSteps,[#comment:"select the number
of steps for the
fade:",#format:#integer,#range:[#min:5,#max:20],#default:10])
myPropList.addProp(#fadeSprite,[#comment:"enter the sprite
to fade:",#format:#integer,#default:1])
return myPropList
end
on beginSprite me
sprite(fadeSprite).blend = 0
animateMe = true
eachStep = 100/totalSteps
end
on mouseEnter me
animateMe = false
end
on mouseLeave me
animateMe = true
end
on enterFrame me
if animateMe then
if sprite(fadeSprite).blend > 0 then
sprite(fadeSprite).blend = sprite(fadeSprite).blend -
eachStep
end if
else
if sprite(fadeSprite).blend < 100 then
sprite(fadeSprite).blend = sprite(fadeSprite).blend +
eachStep
end if
end if
end
With this one, I am able to select which sprite is fading in
and out. Again, thanks for your help. -
Fade Effect Issue with table structure
I have an existing HTML page with a table framework that uses
CSS divs in some of the table rows. My SPRY data is currently
wrapped in DIV tags within the table. I've discovered that the
table is screwing up the fade effect in IE7. Is there any way I can
get around this without removing the table and recoding the whole
page in CSS? FYI...I using version 1.4. I'm not sure if 1.5 will
fix this issue.Essentially the fade in fade out effect isn't working at all
in IE. It's setup as a slideshow and uses the fade effect as a
transition between the spry data. The slideshow works fine just
without the fade effect. Everything works perfectly in Firefox
though. I know this code will work as we have used it before, the
only thing different is that I have my DIV with the SPRY content
wrapped within a table cell and row. I've read that the TR tag
cannot be used, but it's not exactly using the TR as an ID. Once I
comment out the table, tr, and td tags, the effect works no problem
so I know it is the table. I can't give you the URL because it's on
our local network. -
Fade effect with DataGrid. Header text are visible ... :(
Hi,
the problem with DataGrid.
If I specify the Fade effect for showing DataGrid, all lines
are showing correct, so the fade works, but the headers text and
the data texts are showing immediately (like without Fade).
Is it possible to avoid this effect? I want to show my
datagrid from alpha 0.00 to 1.00 for ALL elements (for lines, for
headers, for headers TEXT and of course of data TEXT)
Is it a bug?I had the same problem. I havent fixed it but I did a work
around and used a WipeDown effect in parallel. It eliminates the
headers of appearing immediately. -
Every time a page has a html5 video or a slideshow with fade effect Firefox 3.6 becomes terriblely slow. It freezes with this test: http://demos.hacks.mozilla.org/openweb/HWACCEL/
I have Fedora 14 and before that Fedora 13 and the problem happens with both.
The same doesn't happen on Opera or Google Chrome.
'''UPDATE 1''': I have already tryed the Safe Mode and the problem happens the same.
'''UPDATE 2:''' This page full of videos scroll smothly without any problemas: http://brettgaylor.tumblr.com/tagged/webmademoviesI forgot to say that I did tryed the Safe Mode just to see if the slow was not being caused by some extension or plugin. However the result was all the same. By the way, the slow happens even if there is only one page opened. I am not thinking it is something related to the ATI video card or even Fedora because the same slow does't happen in Chrome and Opera...
-
Flex 4 Fade effect reverse filter suspend ?
Strigh to the point:
I have a button which plays fade effect on a component. The fade effect looks like this:
var fadeOut:Fade = new Fade();
fadeOut.target = target;
fadeOut.duration = 5000;
fadeOut.alphaTo = 0;
fadeOut.filter =
"remove";
fadeOut.captureStartValues();
removeElement(target);
fadeOut.play();
Now I have a second button on which I have:
fadeOut.reverse();
The problem is that I want when the effect is reversed not to removeElement(target), but it still gets removed as soon as the effect ends. I tried on the second button fadeOut.filter = "", but no luck.
So does anyone know how can I delete that filter so my element doesn't get removed when the effect is reversed and goes back to start state?
Thanks !Probably there's a chance I might use this:
mx.core.UIComponent.effectFinished(effectInst:IEffectInstance):void
Called by the effect instance when it stops playing on the component. You can use this method to restore a modification to the component made by the effectStarted() method when the effect started, or perform some other action when the effect ends.
But I don't seem to find any documentation on that, no examples no nothing, I don't understand how can i get that IEffectInstance and how am I supposed to restore the modifications to the component made by the effectStarted...
Definitely need some help here... -
Tooltip Fade Effect in IE7 Not Working
I'm hoping someone has a fix for this ...
When using IE7, the first time you mouse over a
tooltip—everything works fine.
But if you mouse over it again, the Fade Effect no longer
works. Is there a way to fix this clitch??Does anyone know when a next version of Spry is going to be
released. I can't seem to fix this problem and I'm hoping that it's
fixed in the next version.
When using IE7, the first time you mouse over a
tooltip—everything works fine.
But if you mouse over it again, the Fade Effect no longer
works. Is there a way to fix this glitch?? -
When you apply the appear fade effect to an image with an
'onload' command how do you stop the the image initially loading
and flickering before the effect happens?add the style visability:hidden to the elements that flicker?
(easy solution) -
Im wondering if theres anything to disable this...or its just me...i turned off the theme effects already. I just dont like it, i feel like it slows down the fone...im wondering if there could be any future updates on the nokia X6 since the last one was v40? Nokia need to remove this menu fade effect! seriously...
It is not possible to removed it as it is part of the default theme shell.
If you find this post helpful, a click upon the white star at bottom would always be appreciated.
If it also solves your problem, clicking ACCEPT AS SOLUTION below it will benefit other users! -
Spry Fade/Blind combo problem
http://1g2s.arena-i.com/v2/spry-fadeBlind.html
Click Portfolio
Page I grabbed the code from : http://labs.adobe.com/technologies/spry/demos/effects/index.html
I'm having 2 issues
1 - The fadeBlind is going the full cycle--meaning it fades/blinds in then immediately out.
I want it to fadeBlind in and stop, then click Close to fadeBlind out and stop.
2 - I am only able to run the script once for some reason. Clicking portfolio again does nothing.
Script in effects.js:
Spry.Effect.FadeBlind = function(element, options)
Spry.Effect.Cluster.call(this, options);
this.name = 'FadeBlind';
var duration = 1000;
var doToggle = false;
var from = 0;
var to = 100;
if (options)
if (options.duration) duration = options.duration;
if (options.toggle) doToggle = options.toggle;
if (options.from) from = options.from;
if (options.to) to = options.to;
var options = {duration: duration, from: from, to: to, toggle: doToggle};
var blind = new Spry.Effect.Blind(element, options);
this.addParallelEffect(blind);
var options = {duration: duration, from: from, to: to, toggle: doToggle};
var fade = new Spry.Effect.Fade(element, options);
this.addParallelEffect(fade);
Spry.Effect.FadeBlind.prototype = new Spry.Effect.Cluster();
Spry.Effect.FadeBlind.prototype.constructor = Spry.Effect.FadeBlind;
Link properties :
I've tried...
<a onclick="runEffect('FadeBlind', 'portfolio-nav-wrap', {duration: 400, from: '0', to: '100%', toggle: true});" href="#">
<a onclick="runEffect('FadeBlind', 'portfolio-nav-wrap', {duration: 400, from: '0', to: '100%', toggle: true}); return false;" href="#">
<a onclick="return runEffect('FadeBlind', 'portfolio-nav-wrap', {duration: 400, from: '0', to: '100%', toggle: true});" href="javascript:void();">
<a onclick="return runEffect('FadeBlind', 'portfolio-nav-wrap', {duration: 400, from: '0', to: '100%', toggle: true}); return false;" href="javascript:void();">
None of the above changes anything. Any help would be appreciated.I am using Vista, and Safari 4.0.5
I actually just figured out a workaround, by programatically setting display to 'block' for a div inside my 'container' div and it seemed to fix the problem. However I am still curious as to why I was having this problem in the first place. I've had several 'small' issues with the fade effect in different browsers, and luckily have figured out workarounds for both (the other issue was IE fading into the background color no matter what, which in the case of this site was brown instead of white and looked terrible....). Thanks for looking at it!
Dan -
Image rotation with fade effect
I am new to the spry framework and have just started going
through the examples to see if I could create an image rotator that
fades the images into each other when changing. I have taken
snippets from different places to do this and think I have the
answer but really wanted some feedback to sanity check and let me
know if this is the best way of doing it. If it is, then I hope
others will find it useful.
Here is the url to the example:
Image
rotation example
And here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml"
xmlns:spry="
http://ns.adobe.com/spry">
<head>
<title>Sample Image Rotation</title>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1" />
<meta http-equiv="X-UA-Compatible"
content="IE=7;FF=3;OtherUA=4" />
<meta name="author" content="www.baytree-cs.com - Peter
Barkway"/>
<meta name="copyright" content="(C)2006 Baytree Computer
Services, All right reserved."/>
<meta name="abstract" content="ISM Homepage" />
<meta name="description" content="ISM Homepage" />
<meta name="keywords" content="ISM Homepage"/>
<meta name="robots" content="all,index,follow"/>
<meta name="distribution" content="global"/>
<meta name="mssmarttagspreventparsing"
content="true"/>
<meta name="rating" content="general"/>
<style type="text/css">
.element{
float:left;
position: relative;
width: 350px;
text-align: center;
#display{
opacity: 0;
filter: alpha(opacity=0);
#animate{
left: -350px;
opacity: 1;
filter: alpha(opacity=100);
</style>
</head>
<body>
<noscript><h1>This page requires JavaScript.
Please enable JavaScript in your browser and reload this
page.</h1></noscript>
<div id="container">
<div id="display" class="element"
spry:detailregion="dsImg"><img src="<?php echo
$rootDir.$baseDir;?>/{@base}{@path}"/></div>
<div id="animate" class="element"
spry:detailregion="dsImg2"><img src="<?php echo
$rootDir.$baseDir;?>/{@base}{@path}"/></div>
<p class="clear"></p>
</div>
<script type="text/javascript"
src="js/xpath.js"></script>
<script type="text/javascript"
src="js/SpryData.js"></script>
<script type="text/javascript"
src="js/SpryEffects.js"></script>
<script type="text/javascript">
var dsGalleries = new Spry.Data.XMLDataSet("spry.php",
"galleries/gallery", { method: "POST", postData:
"c=1&d=<?php echo $baseDir;?>", headers: {
"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
var dsImg = new Spry.Data.XMLDataSet("spry.php",
"gallery/photos/photo", { method: "POST", postData:
"c=2&d=<?php echo
$baseDir;?>/{dsGalleries::@base}&s={dsGalleries::sitename}",
headers: { "Content-Type": "application/x-www-form-urlencoded;
charset=UTF-8" } });
var dsImg2 = new Spry.Data.XMLDataSet("spry.php",
"gallery/photos/photo", { method: "POST", postData:
"c=2&d=<?php echo
$baseDir;?>/{dsGalleries::@base}&s={dsGalleries::sitename}",
headers: { "Content-Type": "application/x-www-form-urlencoded;
charset=UTF-8" } });
var imageInterval = 8000; // 8 seconds
var imageFadeInterval = 4000; // 4 seconds
var image2Loaded = null;
var effect = new Spry.Effect.Fade('animate', {from: 100, to:
0, toggle: true, duration: imageFadeInterval});
// Prepare an observer that will change the opacity of the
initially
// hidden element in oposition with the initially visible
element
var obs1 = new Object;
// On each effect step we calculate the complementary
opacity for the other image container.
obs1.onStep = function(ef){
if (typeof otherEl == 'undefined')
otherEl = document.getElementById('display');
var opacity = 0;
if(/MSIE/.test(navigator.userAgent)){
opacity = Spry.Effect.getStyleProp(ef.element,
'filter').replace(/alpha\(opacity([0-9]{1,3})\)/, '$1');
otherEl.style.filter = "alpha(opacity=" + parseInt(100 * (1
- opacity), 10) + ")";
}else{
opacity = Spry.Effect.getStyleProp(ef.element, 'opacity');
otherEl.style.opacity = (1 - opacity);
// Attach the observer to the Fade effect
effect.addObserver(obs1);
function fadeInContent() {
// 1st time in so set the current rows so that the 'animate'
set is 1 ahead of the 'display' set
if(image2Loaded == null) {
dsImg.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 1)
% dsImg.getData().length);
dsImg2.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 2)
% dsImg.getData().length);
image2Loaded = 0;
} else {
if(image2Loaded) {
dsImg.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 1)
% dsImg.getData().length);
image2Loaded = 0;
} else {
dsImg2.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 1)
% dsImg.getData().length);
image2Loaded = 1;
effect.start();
var obs2 = {
onPostLoad: function() {
setInterval("fadeInContent()", imageInterval);
dsImg.addObserver(obs2);
</script>
</body>
</html>I think that I might have got this going now. Here is the
code if anyone wants to use it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml"
xmlns:spry="
http://ns.adobe.com/spry">
<head>
<title>Sample Image Rotation</title>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1" />
<meta http-equiv="X-UA-Compatible"
content="IE=7;FF=3;OtherUA=4" />
<meta name="author" content="www.baytree-cs.com - Peter
Barkway"/>
<meta name="copyright" content="(C)2006 Baytree Computer
Services, All right reserved."/>
<meta name="abstract" content="ISM Homepage" />
<meta name="description" content="ISM Homepage" />
<meta name="keywords" content="ISM Homepage"/>
<meta name="robots" content="all,index,follow"/>
<meta name="distribution" content="global"/>
<meta name="mssmarttagspreventparsing"
content="true"/>
<meta name="rating" content="general"/>
<style type="text/css">
.element{
float:left;
position: relative;
width: 350px;
text-align: center;
#display{
opacity: 0;
filter: alpha(opacity=0);
#animate{
left: -350px;
opacity: 1;
filter: alpha(opacity=100);
</style>
</head>
<body>
<noscript><h1>This page requires JavaScript.
Please enable JavaScript in your browser and reload this
page.</h1></noscript>
<div id="container">
<div id="display" class="element"
spry:detailregion="dsImg"><img src="<?php echo
$rootDir.$baseDir;?>/{@path}"/></div>
<div id="animate" class="element"
spry:detailregion="dsImg2"><img src="<?php echo
$rootDir.$baseDir;?>/{@path}"/></div>
<p class="clear"></p>
</div>
<script type="text/javascript"
src="js/xpath.js"></script>
<script type="text/javascript"
src="js/SpryData.js"></script>
<script type="text/javascript"
src="js/SpryEffects.js"></script>
<script type="text/javascript">
var dsGalleries = new Spry.Data.XMLDataSet("spry.php",
"galleries/gallery", { method: "POST", postData:
"c=1&d=<?php echo $baseDir;?>", headers: {
"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
var dsImg = new Spry.Data.XMLDataSet("spry.php",
"gallery/photos/photo", { method: "POST", postData:
"c=2&d=<?php echo
$baseDir;?>/{dsGalleries::@base}&s={dsGalleries::sitename}",
headers: { "Content-Type": "application/x-www-form-urlencoded;
charset=UTF-8" } });
var dsImg2 = new Spry.Data.XMLDataSet("spry.php",
"gallery/photos/photo", { method: "POST", postData:
"c=2&d=<?php echo
$baseDir;?>/{dsGalleries::@base}&s={dsGalleries::sitename}",
headers: { "Content-Type": "application/x-www-form-urlencoded;
charset=UTF-8" } });
var imageInterval = 4000; // 8 seconds
var imageFadeInterval = 2000; // 4 seconds
var effect = new Spry.Effect.Fade('animate', {from: 100, to:
0, toggle: true, duration: imageFadeInterval});
// Prepare an observer that will change the opacity of the
initially
// hidden element in oposition with the initially visible
element
var obs1 = new Object;
// On each effect step we calculate the complementary
opacity for the other image container.
obs1.onStep = function(ef){
if (typeof otherEl == 'undefined')
otherEl = document.getElementById('display');
var opacity = 0;
if(/MSIE/.test(navigator.userAgent)){
opacity = Spry.Effect.getStyleProp(ef.element,
'filter').replace(/alpha\(opacity([0-9]{1,3})\)/, '$1');
otherEl.style.filter = "alpha(opacity=" + parseInt(100 * (1
- opacity), 10) + ")";
}else{
opacity = Spry.Effect.getStyleProp(ef.element, 'opacity');
otherEl.style.opacity = (1 - opacity);
// Attach the observer to the Fade effect
effect.addObserver(obs1);
function fadeInContent() {
// 1st time in so set the current rows so that the 'animate'
set is 1 ahead of the 'display' set
//use this flag to avoid the effect running on load
if (typeof image2Loaded == 'undefined') {
dsImg.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 1)
% dsImg.getData().length);
dsImg2.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 2)
% dsImg.getData().length);
var curRow = dsImg.getCurrentRow();
image2Loaded = 0;
} else {
if(image2Loaded) {
var img = document.getElementById('display');
dsImg.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 1)
% dsImg.getData().length);
var curRow = dsImg.getCurrentRow();
image2Loaded = 0;
} else {
var img = document.getElementById('animate');
dsImg2.setCurrentRowNumber((dsImg.getCurrentRowNumber() + 1)
% dsImg.getData().length);
var curRow = dsImg2.getCurrentRow();
image2Loaded = 1;
var imgPath = '<?php echo $rootDir.$baseDir;?>/' +
curRow["@path"];
var gImageLoader = new Image();
gImageLoader.onload = function()
effect.start();
gImageLoader.src = imgPath;
var obs2 = {
onPostLoad: function() {
setInterval("fadeInContent()", imageInterval);
dsImg2.addObserver(obs2);
</script>
</body>
</html>
Maybe you are looking for
-
PLUG-IN for ADOBE PREMIERE PRO CROP IN NOT WORKING RIGHT
please help, I use mojo, fx factory atrtitude and and they recently have been cropping in when trying to mask out an object. Doesn't mask correctly and something is going wrong...
-
How to see the tablespace size
hi how to get the tablespace size?? thx
-
Hello all could you point me in the right direction. I am using net beans, and I want to write an application which will send a collection of objects to mobiles. However the objects on the server need to do various things that are only in the J2SE AP
-
Apologies if this has been answered elsewhere but I have been looking and cannot find the a solution I have been running my time machine with no problems for a year or so with my imac and air on a qnap NAS All software firmware is latest I added a ma
-
Hi guys, I use Apple Mail on an Intel Mac running OS X 10.6.8 and I am getting HTML emails come through as just the code. I've tried adding the sender to safe senders on Mail but it's still happening. Does anyone have any tips? Is there something I n