Instead of outputting an image tag in your php, output a div with
inline styles defning the background image:
echo "<div style=\"background-image: url(someImage.jpg); width: 300px;
height: 200px\"></div>";
You can use php to find the height and width too.
Ryan Florence
http://ryanflorence.com/blog
On Jun 28, 2009, at 3:48 AM, janus76uk wrote:
Thanks for this, I have though about setting the image as a background
image, but i don't think this will work on this case, as I am swapping
out a block of html which contains and image, some text and a link.
each of the html blocks ar generated by a backend php cms and passed
to the browser as an array. So is there a way to obtain a smooth
transition between these blocks without rewiting the whole system?
So for my ignorance in these matters as i am very new to javascript
and mootools ( more of a php developer guy)
Once again thanks for you help
all the best
Janus
On 26 June, 16:05, Oskar Krawczyk <[email protected]> wrote:
Nathan, you sir are a genius! Such a simple solution, why haven't I
thought
of that...
___
Oskar Krawczykhttp://nouincolor.com
On Fri, Jun 26, 2009 at 15:33, Ryan Florence <[email protected]>
wrote:
Ditto, except I just leave things as background images and just
have two
divs fading in and out.
Ryan Florence
http://ryanflorence.com/blog
On Jun 26, 2009, at 6:42 AM, nwhite wrote:
How I have accomplished this is use a bit of css (background-
image). When
the image opacity = 1 change the background-image to the next
image. As you
fade the image out it will look like the background image is
fading in. Once
opacity = 0 move background image to image set opacity = 1 and
change
background image and repeat.
I hope that makes sense.
On Fri, Jun 26, 2009 at 5:36 AM, janus <[email protected]>
wrote:
I have a little function which takes the content of a specified
div,
fades it out, loads another image and fades it in. This function
loops
evry 10 seconds or so.
the key function of the process is below.
function showImage(content)
{
var placeholder = $('JSplaceholder');
//setup tween
var tween = placeholder.get('tween', {property: 'opacity'});
//fade it away
tween.start(0).chain(function(){
//get value from elsewhere and inject it in the dom
placeholder.empty().set('html', content);;
//show again
tween.start(1);
});
setTimeout(changeImage, (seconds_between_photos * 1000));
}
JSplaceholder is the name if the div wher the content is replaced
content in some html containing an image passed from another
function
(changeImage).
This all works perfectly. However, is is possible to, rather than
fading the existing content completly out and then fading the new
content in, do this simultaneously to make a nice smoth transition
between images?
I am sure it just needs a tweek of the above function, but I am not
too sure how to go about it?
I hope all this makes sense.
Any help would be most appreciated.
cheers
janus
