Hi Waseen:
In the way you do it:
<div id="images">
<img src="imgpath1.jpg" border="0" />
<img src="imgpath2.jpg" border="0" />
<img src="imgpath3.jpg" border="0" />
<img src="imgpath4.jpg" border="0" />
<img src="imgpath5.jpg" border="0" />
</div>
all the images are preloaded, and you can see all the images when
the page in loading, before the "$(function()" starts working, and
then, you have to hide them. If the images are big or there are too
much images (I have 20 images with a considerable size, about 100
KBytes) It needs too much time to load the page and I don´t whant this
(the carrusel is not the main objective of the page), I prefer to load
the page only with the first image, and load each of the other images
when I need them.
If I work in the way I say, making a simple fadeOut and fadeIn in a
local machine works well, but when I test it in production machine I
get an horrible blinking effect: in the fadeOut the first image
disappears correcly, but in the fadeIn it appears for a moment before
the next image appears.
Anyway, I will try to use your code to test if it works better than
mine. Thank you very much for your help.
I see that there are some carrusel jquery plugins that works in the
way Waseen says but not in the way I say. Nobody has the same problem
I have?
On 5 jun, 16:32, waseem sabjee <waseemsab...@gmail.com> wrote:
> Try this script i wrote out just now
>
> THE HTML
>
> <div id="control">
> <div id="images">
> <img src="imgpath1.jpg" border="0" />
> <img src="imgpath2.jpg" border="0" />
> <img src="imgpath3.jpg" border="0" />
> <img src="imgpath4.jpg" border="0" />
> <img src="imgpath5.jpg" border="0" />
> </div>
>
> </div>
>
> THE CSS
>
> <style>
> * {
> margin:0;
> padding:0;
>
> }
>
> // note the following two styles is to prevent the images from jumping up
> and down
> #images {
> position:relative;}
>
> #iimages .img {
> position:absolute:
> top:0;
> left:0;}
>
> </style>
> THE JQUERY
>
> <script>
>
> $(function() {
> // set speed
> var speed = 1000;
> // set starting image : 0 = first image
> var index = 0;
> // empty variable for later use
> var current;
> // create object refference point
> var obj = $("#control");
> // get all images within your object refference
> var images = $("div#images img", obj);
> // hide all images
> images.fadeOut(0);
> // desplay the index image first as per the index variable
> images.eq(index).fadeIn(0);
>
> // initiate change image after x seconds
> setTimeout(function() {
> ChangeImage()
>
> }, speed);
>
> function ChangeImage() {
>
> setTimeout(function() {
> // get the index of the image to fade in
> current = index + 1;
> // if current > max set current as 0
> if(current > images.length) {
> current = 0;}
>
> // fade out old
> images.eq(index).fadeOut(speed);
> // fade in new while old is fading out
> images.eq(current).fadeIn(speed);
> // recall this function after x seconds
> ChangeImage()
>
> }, speed);
> }
> });
>
> </script>
>
> On Fri, Jun 5, 2009 at 9:53 AM, nomen <gaston...@gmail.com> wrote:
>
> > Hi all:
>
> > I have develop this javascript code (http://www.phpriot.com/2237
> > ).
> > This is a simple carrousel. I´m using JQuery 1.3.2.
>
> > In the code you can see an array with images and the code is simply
> > changing the source of the img with the ID "carruselimg".
>
> > I´m getting "too much recursion" y FF3 and "out of memory" on IE7
> > when this page is about 15 mimutes working.
>
> > Obviously I´m making something bad, but I can´t find what. Can
> > someone help me?
>
> > Thanks all in advance.
