using queue effect in scriptaculous

Hello Gents,

One of the expert today helped me in building this script

http://x/vanillasite/test.htm

However, it is not behaving as desired on IE. It should wait for a while whilst it loads all 5 images, every load should have a time gap, perhaps using the queue effect as per documentation.

The desired effect should be similar to http://x/carlton/ however it is not.

I definitely needs your expertise in achieving this.

Your help on this is much appreciated.

Kind Regards
Sam
niidmoreAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Koma666Commented:
Try this, this is not a queue but will also work in IE
<!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" >
<head>
    <title>Untitled Page</title>
    <script type="text/javascript" src="http://localhost/javascript/prototype.js"></script>
    <script type="text/javascript" src="http://localhost/javascript/scriptaculous.js"></script>
 
</head>
<body>
 
<div id="content" style="padding:0px 0px 0px 20px;">
<span id="image1" style="display: none;"><a href="http://www.saqi.com" target="_blank"><img src="images/1.jpg" border=0 height="100" width="200"/></a></span>
<span id="image2" style="display: none;"><a href="http://www.cesholdings.co.uk" target="_blank"><img src="images/2.jpg" border=0 height="100" width="200"/></a> </span>
<span id="image3" style="display: none;"><a href="http://www.bbc.co.uk" target="_blank"><img src="images/3.jpg" height="100" border=0 width="200"/></a> </span>
<span id="image4" style="display: none;"><a href="http://www.cricinfo.com" target="_blank"><img src="images/4.jpg" height="100" border=0 width="200"/></a> </span>
<span id="image5" style="display: none;"><a href="http://x/carlton/" target="_blank"><img src="images/5.gif" height="100" border=0 width="200"/></a> </span>
</div>
 
<script language="javascript">
<!--
 
function init() {
}
 
function effectImage1(){
  new Effect.Appear ("image1",{ duration:0.7});
  new Effect.Move ("image1",{ duration:0.3,x: -20, y: 0, mode: 'relative', afterFinish: effectImage2 });
}
 
function effectImage2(obj){
  new Effect.Appear ("image2",{ duration:0.7});
  new Effect.Move ("image2",{ duration:0.3,x: -20, y: 0, mode: 'relative', afterFinish: effectImage3 });
}
 
function effectImage3(obj) {
  new Effect.Appear ("image3",{ duration:0.7});
  new Effect.Move ("image3",{ duration:0.3,x: -20, y: 0, mode: 'relative', afterFinish: effectImage4 });
}
 
function effectImage4(obj) {
  new Effect.Appear ("image4",{ duration:0.7});
  new Effect.Move ("image4",{ duration:0.3,x: -20, y: 0, mode: 'relative', afterFinish: effectImage5 });
}
 
function effectImage5(obj) {
  new Effect.Appear ("image5",{ duration:0.7});
  new Effect.Move ("image5",{ duration:0.3,x: -20, y: 0, mode: 'relative' });
}
 
effectImage1();
-->
</script>
Test --> effectImage1();
</body>
</html>

Open in new window

0
Koma666Commented:
If you cut out the spaces in the spans the images will have the same space between each others
<div id="content" style="padding:0px 0px 0px 20px;">
<span id="image1" style="display: none;"><a href="http://www.saqi.com" target="_blank"><img src="images/1.jpg" border=0 height="100" width="200"/></a></span>
<span id="image2" style="display: none;"><a href="http://www.cesholdings.co.uk" target="_blank"><img src="images/2.jpg" border=0 height="100" width="200"/></a></span>
<span id="image3" style="display: none;"><a href="http://www.bbc.co.uk" target="_blank"><img src="images/3.jpg" height="100" border=0 width="200"/></a></span>
<span id="image4" style="display: none;"><a href="http://www.cricinfo.com" target="_blank"><img src="images/4.jpg" height="100" border=0 width="200"/></a></span>
<span id="image5" style="display: none;"><a href="http://x/carlton/" target="_blank"><img src="images/5.gif" height="100" border=0 width="200"/></a></span>
</div>

Open in new window

0
Koma666Commented:
Here is the easier version with queue *g*
<!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" >
<head>
    <title>Untitled Page</title>
    <script type="text/javascript" src="http://localhost/javascript/prototype.js"></script>
    <script type="text/javascript" src="http://localhost/javascript/scriptaculous.js"></script>
 
</head>
<body>
 
<div id="content" style="padding:0px 0px 0px 20px;">
<span id="image1" style="display:none;"><a href="http://www.saqi.com" target="_blank"><img src="images/1.jpg" border=0 height="100" width="200"/></a></span>
<span id="image2" style="display:none;"><a href="http://www.cesholdings.co.uk" target="_blank"><img src="images/2.jpg" border=0 height="100" width="200"/></a></span>
<span id="image3" style="display:none;"><a href="http://www.bbc.co.uk" target="_blank"><img src="images/3.jpg" height="100" border=0 width="200"/></a></span>
<span id="image4" style="display:none;"><a href="http://www.cricinfo.com" target="_blank"><img src="images/4.jpg" height="100" border=0 width="200"/></a></span>
<span id="image5" style="display:none;"><a href="http://x/carlton/" target="_blank"><img src="images/5.gif" height="100" border=0 width="200"/></a></span>
</div>
<script language="javascript">
<!--
function init() {
}
 
function effect(){
  new Effect.Appear ("image1",{ duration:0.3,queue: {position:'end', scope: 'imageAppear'}});
  new Effect.Move ("image1",{ duration:0.3,x: -20, y: 0, mode: 'relative',queue: {position:'end', scope: 'imageFade'}});
  new Effect.Appear ("image2",{ duration:0.3,queue: {position:'end', scope: 'imageAppear'} });
  new Effect.Move ("image2",{ duration:0.3,x: -20, y: 0, mode: 'relative',queue: {position:'end', scope: 'imageFade'}});
  new Effect.Appear ("image3",{ duration:0.3,queue: {position:'end', scope: 'imageAppear'} });
  new Effect.Move ("image3",{ duration:0.3,x: -20, y: 0, mode: 'relative',queue: {position:'end', scope: 'imageFade'}});
  new Effect.Appear ("image4",{ duration:0.3,queue: {position:'end', scope: 'imageAppear'} });
  new Effect.Move ("image4",{ duration:0.3,x: -20, y: 0, mode: 'relative',queue: {position:'end', scope: 'imageFade'}});
  new Effect.Appear ("image5",{ duration:0.3,queue: {position:'end', scope: 'imageAppear'} });
  new Effect.Move ("image5",{ duration:0.3,x: -20, y: 0, mode: 'relative',queue: {position:'end', scope: 'imageFade'}});
}
 
effect();
-->
</script>
Test --> effectImage1();
</body>
</html>

Open in new window

0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

niidmoreAuthor Commented:
Hello Koma,
Many thanks for doing this,  I greatly appreciate your help.
This is just perfect for me now, however, I have a slight issue if I want to have more then 1 image slider on the page.
If you please go to the page, you will see what I mean.
http://x/vanillasite/test2.htm
Kind Regards
Sam
0
Koma666Commented:
copy and paste the code and change the id's from the span tags.
Id's have to be unique.

so you can use id image1-image5 for slider 1
image6-image10 for slider2
and so on.

If you want all three sliders to move and fade parrallel, you have to
change the
scope: 'imageAppear'
and
scope: 'imageFade'
to
scope: 'imageAppearSlider1'
scope: 'imageFadeSlider1'

and for slider two to
scope: 'imageAppearSlider2'
scope: 'imageFadeSlider3'

and so on.
Just play around with the script a bit and you'll find a way.

Here you'll find some documentation for it:
http://wiki.script.aculo.us/scriptaculous/

0
Koma666Commented:
This should do the trick
<!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" >
<head>
    <title>Untitled Page</title>
    <script type="text/javascript" src="http://localhost/javascript/prototype.js"></script>
    <script type="text/javascript" src="http://localhost/javascript/scriptaculous.js"></script>
 
</head>
<body>
First Slider 
<div id="imageSlider1" style="padding:0px 0px 0px 60px;">
 
<span id="image1" style="display: none;"><a href="http://www.saqi.com"><img src="images/1.jpg" border=0 /></a></span>&nbsp;
<span id="image2" style="display: none;"><a href="http://www.cesholdings.co.uk"><img src="images/2.jpg" border=0 /></a></span>&nbsp;
<span id="image3" style="display: none;"><a href="http://www.bbc.co.uk"><img src="images/3.jpg"  border=0 /></a></span>&nbsp;
<span id="image4" style="display: none;"><a href="http://www.cricinfo.com"><img src="images/4.jpg" border=0 /></a></span>&nbsp;
<span id="image5" style="display: none;"><a href="http://x/carlton/"><img src="images/5.jpg" border=0 /></a></span>
</div>
<hr />
Second Slider  
<div id="imageSlider2" style="padding:0px 0px 0px 60px;">
<span id="image6" style="display: none;"><a href="http://www.saqi.com"><img src="images/1.jpg" border=0 /></a></span>&nbsp;
<span id="image7" style="display: none;"><a href="http://www.cesholdings.co.uk"><img src="images/2.jpg" border=0 /></a></span>&nbsp;
<span id="image8" style="display: none;"><a href="http://www.bbc.co.uk"><img src="images/3.jpg"  border=0 /></a></span>&nbsp;
<span id="image9" style="display: none;"><a href="http://www.cricinfo.com"><img src="images/4.jpg" border=0 /></a></span>&nbsp;
<span id="image10" style="display: none;"><a href="http://x/carlton/"><img src="images/5.jpg" border=0 /></a></span>
</div>
<hr />
Third Slider
 
<div id="imageSlider3" style="padding:0px 0px 0px 60px;">
<span id="image11" style="display: none;"><a href="http://www.saqi.com"><img src="images/1.jpg" border=0 /></a></span>&nbsp;
<span id="image12" style="display: none;"><a href="http://www.cesholdings.co.uk"><img src="images/2.jpg" border=0 /></a></span>&nbsp;
<span id="image13" style="display: none;"><a href="http://www.bbc.co.uk"><img src="images/3.jpg"  border=0 /></a></span>&nbsp;
<span id="image14" style="display: none;"><a href="http://www.cricinfo.com"><img src="images/4.jpg" border=0 /></a></span>&nbsp;
<span id="image15" style="display: none;"><a href="http://x/carlton/"><img src="images/5.jpg" border=0 /></a></span>
</div>
 
 
<script language="javascript">
<!--
 
 
 
function effect(){
 
  new Effect.Appear ("image1",{ duration:0.2,queue: {position:'end', scope: 'imageAppearSlider1'}});
  new Effect.Move ("image1",{ duration:0.2,x: -60, y: 0, mode: 'relative',queue: {position:'end', scope: 'imageFadeSlider1'}});
  new Effect.Appear ("image2",{ duration:0.2,queue: {position:'end', scope: 'imageAppearSlider1'} });
  new Effect.Move ("image2",{ duration:0.2,x: -60, y: 0, mode: 'relative',queue: {position:'end', scope: 'imageFadeSlider1'}});
  new Effect.Appear ("image3",{ duration:0.2,queue: {position:'end', scope: 'imageAppearSlider1'} });
  new Effect.Move ("image3",{ duration:0.2,x: -60, y: 0, mode: 'relative',queue: {position:'end', scope: 'imageFadeSlider1'}});
  new Effect.Appear ("image4",{ duration:0.2,queue: {position:'end', scope: 'imageAppearSlider1'} });
  new Effect.Move ("image4",{ duration:0.2,x: -60, y: 0, mode: 'relative',queue: {position:'end', scope: 'imageFadeSlider1'}});
  new Effect.Appear ("image5",{ duration:0.2,queue: {position:'end', scope: 'imageAppearSlider1'} });
  new Effect.Move ("image5",{ duration:0.2,x: -60, y: 0, mode: 'relative',queue: {position:'end', scope: 'imageFadeSlider1'}});
 
  new Effect.Appear ("image6",{ duration:0.2,queue: {position:'end', scope: 'imageAppearSlider2'}});
  new Effect.Move ("image6",{ duration:0.2,x: -60, y: 0, mode: 'relative',queue: {position:'end', scope: 'imageFadeSlider2'}});
  new Effect.Appear ("image7",{ duration:0.2,queue: {position:'end', scope: 'imageAppearSlider2'} });
  new Effect.Move ("image7",{ duration:0.2,x: -60, y: 0, mode: 'relative',queue: {position:'end', scope: 'imageFadeSlider2'}});
  new Effect.Appear ("image8",{ duration:0.2,queue: {position:'end', scope: 'imageAppearSlider2'} });
  new Effect.Move ("image8",{ duration:0.2,x: -60, y: 0, mode: 'relative',queue: {position:'end', scope: 'imageFadeSlider2'}});
  new Effect.Appear ("image9",{ duration:0.2,queue: {position:'end', scope: 'imageAppearSlider2'} });
  new Effect.Move ("image9",{ duration:0.2,x: -60, y: 0, mode: 'relative',queue: {position:'end', scope: 'imageFadeSlider2'}});
  new Effect.Appear ("image10",{ duration:0.2,queue: {position:'end', scope: 'imageAppearSlider2'} });
  new Effect.Move ("image10",{ duration:0.2,x: -60, y: 0, mode: 'relative',queue: {position:'end', scope: 'imageFadeSlider2'}});
 
  new Effect.Appear ("image11",{ duration:0.2,queue: {position:'end', scope: 'imageAppearSlider3'}});
  new Effect.Move ("image11",{ duration:0.2,x: -60, y: 0, mode: 'relative',queue: {position:'end', scope: 'imageFadeSlider3'}});
  new Effect.Appear ("image12",{ duration:0.2,queue: {position:'end', scope: 'imageAppearSlider3'} });
  new Effect.Move ("image12",{ duration:0.2,x: -60, y: 0, mode: 'relative',queue: {position:'end', scope: 'imageFadeSlider3'}});
  new Effect.Appear ("image13",{ duration:0.2,queue: {position:'end', scope: 'imageAppearSlider3'} });
  new Effect.Move ("image13",{ duration:0.2,x: -60, y: 0, mode: 'relative',queue: {position:'end', scope: 'imageFadeSlider3'}});
  new Effect.Appear ("image14",{ duration:0.2,queue: {position:'end', scope: 'imageAppearSlider3'} });
  new Effect.Move ("image14",{ duration:0.2,x: -60, y: 0, mode: 'relative',queue: {position:'end', scope: 'imageFadeSlider3'}});
  new Effect.Appear ("image15",{ duration:0.2,queue: {position:'end', scope: 'imageAppearSlider3'} });
  new Effect.Move ("image15",{ duration:0.2,x: -60, y: 0, mode: 'relative',queue: {position:'end', scope: 'imageFadeSlider3'}});
}
 
effect();
-->
</script>
 
</body>
</html>

Open in new window

0
niidmoreAuthor Commented:
Hello Koma,

I had tried exactly the one you have provided me with, however, the problem is that the file names are stored in the xml file for each slider ( they are all content managed)

there is a field in CMS system which holds the file names in the xml file ( for now it is restricted to take 5 images)

<sliderImage1>
 image1
image2
image3
image4
image5
</sliderimage1>

http://x/vanillasite/carlton.asp

I am looping it from this field, now if the client need another slider, i would have to create another field
<sliderImage2>
image1
image2
image3 .
image4
image5
</sliderImage2>  And so on...

Each slider will go in parent Div tag and the 5 images will be their childnodes .

http://x/vanillasite/test3.htm


I have found some script which runs through out the container for the child nodes and returns back the result, I have  tried to implement it but no luck .... I will need your help again on this please.
--------------------------------------------------------------
function ChangePage(container, dir){

  var div = document.getElementById(container);
  var nodeList = div.childNodes;
 
  //alert(container + '-'+ nodeList.length);
  for(i=0;i<nodeList.length;i++){
          if(Element.visible(nodeList.item(i))==true){
        if(dir == 'next'){
           var nNo = i + 2;
           if(nNo > nodeList.length){
              nNo=1;
            }
           var nItem = container + nNo.toString();
        }else if(dir == 'prev'){
            var nNo = i ;
           if(nNo <= 0){nNo=nodeList.length}
           var nItem = container + nNo.toString();
        }
          }
  }
  //alert(nItem);
  return nItem;
}
Effect.divSwap = function(element,container){
  var div = document.getElementById(container);
      var nodeList = div.childNodes;
  //alert(nodeList.length);
      var queue = Effect.Queues.get('menuScope');  

      if(queue.toArray().length<1){        
            if(Element.visible(element)==false){            
                  for(i=0;i<nodeList.length;i++){                
                        if(nodeList.item(i).nodeName=="DIV" && nodeList.item(i).id!=element){  
                                            
                              if(Element.visible(nodeList.item(i))==true){  
                                                     
                                    Effect.Fade(nodeList.item(i),{queue:{position:'end',scope:'menuScope',limit:2},duration:1.3}) ;      
           
                              }                
                        }            
                  }
                            
                  Effect.Appear(element,{queue:{position:'end',scope:'menuScope',limit:2},to:0.9,duration:1.3}) ;
                  
            }  
      }
}
---------------------------
hope you understand my problem i probably have not explained you well though...
0
Koma666Commented:
There is just missing the closing } before
effect();
0
Koma666Commented:
But to create the image id's why don't you just use a variable counter which increases a nuber while you are looping, so you can add the counter to each image and get image1, image2, ...
0
niidmoreAuthor Commented:
hello,
the problem is i will get 5 sets of images for each slider !
and these images will all start from 1 to 5 which i am looping to with the counter from xml file which stores details for these images

In my asp page

       <div id="imageSlider1" style="padding:0px 0px 0px 60px;">
                  <%=RCMFV(PageName&"_01")%>
      </div>
      <div id="imageSlider2" style="padding:0px 0px 0px 60px;">
                  <%=RCMFV(PageName&"_01")%>
      </div>  
        And so on if there is another slider....

which returns rhe result like this

<div id="imageSlider1" style="padding:0px 0px 0px 60px;"><div id="image1" style="display: none;" class="divInOneLine"><a href="http://www.saqi.com"><img src="images/1.jpg" border=0 /></a><img src="images/spacer.gif" border="0" width="5"/></div><div id="image2"  class="divInOneLine" style="display: none;"><a href="http://www.cesholdings.co.uk"><img src="images/2.jpg" border=0 /></a><img src="images/spacer.gif" border="0" width="5"/></div><div id="image3" class="divInOneLine" style="display: none;"><a href="http://www.bbc.co.uk"><img src="images/3.jpg"  border=0 /></a><img src="images/spacer.gif" border="0" width="5"/></div><div id="image4" class="divInOneLine" style="display: none;"><a href="http://www.cricinfo.com"><img src="images/4.jpg" border=0 /></a><img src="images/spacer.gif" border="0" width="5"/></div><div id="image5" class="divInOneLine" style="display: none;"><a href="http://x/carlton/"><img src="images/5.jpg" border=0 /></a><img src="images/spacer.gif" border="0" width="5"/></div></div>

So, now based on number of sliders the script should return the result, that is why i thought the script above which might have to be used to perform this task,  which is used for something else but the concept of looping the elements from the parent div is similar.

Request is to somehow make this script reusable to allow number of calls


  new Effect.Appear ("image1",{ duration:0.2,queue: {position:'end', scope: 'imageAppear'}});
  new Effect.Move ("image1",{ duration:0.2,x: -60, y: 0, mode: 'relative',queue: {position:'end', scope: 'imageFade'}});
  new Effect.Appear ("image2",{ duration:0.2,queue: {position:'end', scope: 'imageAppear'} });
  new Effect.Move ("image2",{ duration:0.2,x: -60, y: 0, mode: 'relative',queue: {position:'end', scope: 'imageFade'}});
  new Effect.Appear ("image3",{ duration:0.2,queue: {position:'end', scope: 'imageAppear'} });
  new Effect.Move ("image3",{ duration:0.2,x: -60, y: 0, mode: 'relative',queue: {position:'end', scope: 'imageFade'}});
  new Effect.Appear ("image4",{ duration:0.2,queue: {position:'end', scope: 'imageAppear'} });
  new Effect.Move ("image4",{ duration:0.2,x: -60, y: 0, mode: 'relative',queue: {position:'end', scope: 'imageFade'}});
  new Effect.Appear ("image5",{ duration:0.2,queue: {position:'end', scope: 'imageAppear'} });
  new Effect.Move ("image5",{ duration:0.2,x: -60, y: 0, mode: 'relative',queue: {position:'end', scope: 'imageFade'}});

Every slider should be able to use one block of script, I hope you get my vague explanation?

Because the CMS will returns the result as

 <div id="imageSlider1" style="padding:0px 0px 0px 60px;">
                  image1
                       image2
                      image3
                     image4   and image5
      </div>
      <div id="imageSlider2" style="padding:0px 0px 0px 60px;">
                              image1
                             image2
                             image3
                            image4 and image5
      </div>  

something which I cannot change the CMS system to return 1 to 10 as one block....
0
niidmoreAuthor Commented:
Hello Koma,
Hope you are still here? Please let me know If this makes any sense?
Regards
Sam
0
niidmoreAuthor Commented:
If they are from 1 to 10 I easily would have incremented the cntr and get all, however, the images i get for two sliders are in two different set of  1 to 5 ,  1 to 5  otherwise my life would have been easier by the following code

function effect(){  
  for(var i=1;i<=10;i++){
    new Effect.Appear ("image"+i,{ duration:0.2,queue: {position:'end', scope: 'imageAppear'}});
    new Effect.Move ("image"+i,{ duration:0.2,x: -60, y: 0, mode: 'relative',queue: {position:'end', scope: 'imageFade'}});
  }

Perhaps, in one big container different childNodes ...

Please assist me.

Regards
Sam
0
Koma666Commented:
Hi, I don't understand the problem, if you can use asp you can add a counter in asp.

counter = 1
for slidercounter = 1 to numberofsliders
   for imagecounter = 1 to 5
      generate images with id image+imagecounter
      generate scriptaculous script for this image with image+imagecounter and queue + slidercounter
      counter+1
   next
next

then your code looks like this.

<img src="" id="image1"/>
<script>
    new Effect("image1",something, scope. imageAppearSlider1)
</script>
 
<img src="" id="image2"/>
<script>
    new Effect("image2",something, scope. imageAppearSlider1)
</script>
 
<img src="" id="image3"/>
<script>
    new Effect("image3",something, scope. imageAppearSlider1)
</script>
 
...
next slider
...
 
<img src="" id="image6"/>
<script>
    new Effect("image6",something, scope. imageAppearSlider2)
</script>
 
<img src="" id="image7"/>
<script>
    new Effect("image7",something, scope. imageAppearSlider2)
</script>
 
<img src="" id="image8"/>
<script>
    new Effect("image8",something, scope. imageAppearSlider2)
</script>

Open in new window

0
Koma666Commented:
ups, this should be
counter = 1
for slidercounter = 1 to numberofsliders
   for imagecounter = 1 to 5
      generate images with id image+counter
      generate scriptaculous script for this image with image+ounter and queue + slidercounter
      counter+1
   next
next


mixed up counter and imagecounter
0
niidmoreAuthor Commented:
Ok, let me expain you the problem again.
I have a CMS page which is attached below, the page takes the 5 image ids for the first slider,
there is a default template named "imageSlider" which has a counter set to start by 1 and returns all the images
given here. for an instance, it returns <imageName>1, <imageName>2, <imageName>3, <imageName>4,<imageName>5.

this is good for one slider on the page and your code works just fine.

I call these images from the template using the following line

<div id="imageSlider1" style="padding:0px 0px 0px 60px;">
      <%=RCMFV(PageName&"_01")%>
</div>

you may see this happening here

http://x/vanillasite/carlton.asp

Now, if the client wants another slider, so what we do is create another field in the CMS and allow him to give
another 5 images choosing the same template. (which again picks the 5 values and creates images with the counter
starting from 1, <imageName>1, <imageName>2, <imageName>3, <imageName>4,<imageName>5.

screenshot attached

I go back to my ASP page and call this adding another field

<div id="imageSlider1" style="padding:0px 0px 0px 60px;">
      <%=RCMFV(PageName&"_01")%>
</div>

<div id="imageSlider2" style="padding:0px 0px 0px 60px;">
      <%=RCMFV(PageName&"_02")%>
</div>


Here is the problem as I now have two imageSliders each with 5 images starting from 1 to 5.

<div id="imageSlider1" style="padding:0px 0px 0px 60px;">
                  <span id="image1" style="display: none;"><a href="display.asp?ISB=9781851240753&" ><img src="http://x/jackets/m/978185/9781851240753.jpg" border="0" height="120" width="100"/></a></span>&nbsp;&nbsp;<span id="image2" style="display: none;"><a href="display.asp?ISB=9781851243150&" ><img src="http://x/jackets/m/978185/9781851243150.jpg" border="0" height="120" width="100"/></a></span>&nbsp;&nbsp;<span id="image3" style="display: none;"><a href="display.asp?ISB=9781851243853&" ><img src="http://x/jackets/m/978185/9781851243853.jpg" border="0" height="120" width="100"/></a></span>&nbsp;&nbsp;<span id="image4" style="display: none;"><a href="display.asp?ISB=9781851243464&" ><img src="http://x/jackets/m/978185/9781851243464.jpg" border="0" height="120" width="100"/></a></span>&nbsp;&nbsp;<span id="image5" style="display: none;"><a href="display.asp?ISB=9780900177033&" ><img src="http://x/jackets/m/978090/9780900177033.jpg" border="0" height="120" width="100"/></a></span>&nbsp;&nbsp;

                  </div>
<div id="imageSlider2" style="padding:0px 0px 0px 60px;">
                  <span id="image1" style="display: none;"><a href="display.asp?ISB=9781851240753&" ><img src="http://x/jackets/m/978185/9781851240753.jpg" border="0" height="120" width="100"/></a></span>&nbsp;&nbsp;<span id="image2" style="display: none;"><a href="display.asp?ISB=9781851243150&" ><img src="http://x/jackets/m/978185/9781851243150.jpg" border="0" height="120" width="100"/></a></span>&nbsp;&nbsp;<span id="image3" style="display: none;"><a href="display.asp?ISB=9781851243853&" ><img src="http://x/jackets/m/978185/9781851243853.jpg" border="0" height="120" width="100"/></a></span>&nbsp;&nbsp;<span id="image4" style="display: none;"><a href="display.asp?ISB=9781851243464&" ><img src="http://x/jackets/m/978185/9781851243464.jpg" border="0" height="120" width="100"/></a></span>&nbsp;&nbsp;<span id="image5" style="display: none;"><a href="display.asp?ISB=9780900177033&" ><img src="http://x/jackets/m/978090/9780900177033.jpg" border="0" height="120" width="100"/></a></span>&nbsp;&nbsp;

                  </div>


I am unable to modify your script which could handle this situation, same goes if they want to add one more extra
slider ....because there names are not unique and are in repeatation of image<names>. (there are 2 image1s , 2 image2s and so on)

Hope you understand my problem, if not please let me know I will try put in more precise way perhaps...

thanks for your help

regards
sam
slider.jpg
slider2.JPG
0
niidmoreAuthor Commented:
Koma,
I dont know whether I am doing it right but please have a look at

<div id="mainImageSlider">
<div id="imageSlider1" style="padding:0px 0px 0px 60px;"><div id="image1" style="display: none;" class="divInOneLine"><a href="http://www.saqi.com"><img src="images/1.jpg" border=0 /></a><img src="images/spacer.gif" border="0" width="5"/></div><div id="image2"  class="divInOneLine" style="display: none;"><a href="http://www.cesholdings.co.uk"><img src="images/2.jpg" border=0 /></a><img src="images/spacer.gif" border="0" width="5"/></div><div id="image3" class="divInOneLine" style="display: none;"><a href="http://www.bbc.co.uk"><img src="images/3.jpg"  border=0 /></a><img src="images/spacer.gif" border="0" width="5"/></div><div id="image4" class="divInOneLine" style="display: none;"><a href="http://www.cricinfo.com"><img src="images/4.jpg" border=0 /></a><img src="images/spacer.gif" border="0" width="5"/></div><div id="image5" class="divInOneLine" style="display: none;"><a href="http://213.253.134.26/carlton/"><img src="images/5.jpg" border=0 /></a><img src="images/spacer.gif" border="0" width="5"/></div></div>
<div id="imageSlider2" style="padding:0px 0px 0px 60px;"><div id="image1" style="display: none;" class="divInOneLine"><a href="http://www.saqi.com"><img src="images/1.jpg" border=0 /></a><img src="images/spacer.gif" border="0" width="5"/></div><div id="image2"  class="divInOneLine" style="display: none;"><a href="http://www.cesholdings.co.uk"><img src="images/2.jpg" border=0 /></a><img src="images/spacer.gif" border="0" width="5"/></div><div id="image3" class="divInOneLine" style="display: none;"><a href="http://www.bbc.co.uk"><img src="images/3.jpg"  border=0 /></a><img src="images/spacer.gif" border="0" width="5"/></div><div id="image4" class="divInOneLine" style="display: none;"><a href="http://www.cricinfo.com"><img src="images/4.jpg" border=0 /></a><img src="images/spacer.gif" border="0" width="5"/></div><div id="image5" class="divInOneLine" style="display: none;"><a href="http://x/carlton/"><img src="images/5.jpg" border=0 /></a><img src="images/spacer.gif" border="0" width="5"/></div></div>
</div>
<script language="javascript">
<!--
var container = 'mainImageSlider';
var subContainer1 = 'imageSlider1';
var subContainer2 = 'imageSlider2';

function effect(){  
 
  var sliders = Element.childElements($(container)).length
 
  var con1 = Element.childElements($(subContainer1)).length
 
  for(var i=1;i<=con1;i++){
    new Effect.Appear ("image"+i,{ duration:0.2,queue: {position:'end', scope: 'imageAppear'}});
    new Effect.Move ("image"+i,{ duration:0.2,x: -60, y: 0, mode: 'relative',queue: {position:'end', scope: 'imageFade'}});
  }
   
}
 
effect();
-->
</script>

Now, If want to refer to the image1 of subContainer1 in the new.Effect line.... how about doing this please?

all, i want to do is apply the effects to each
     sliderImage1.image1 and
     sliderImage2.image1 and so on.....
0
Koma666Commented:
This should help you :-)

<script language="javascript">
<!--
 
 
function createEffect(node) {
  var size = document.getElementById(node).childNodes.length;
  for(var i = 0; i < size; i++)
  {
    var current=document.getElementById(node).childNodes[i];
    new Effect.Appear (current,{ duration:0.2,queue: {position:'end', scope: 'appear' + node}});
    new Effect.Move (current,{ duration:0.2,x: -60, y: 0, mode: 'relative',queue: {position:'end', scope: 'fade' + node}});
  } 
}
 
function init(){
  createEffect('imageSlider1');
  createEffect('imageSlider2');
  var str="";
 
 }
init();
-->
</script>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Koma666Commented:
here is my whole test page
<!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" >
<head>
    <title>Untitled Page</title>
     <script type="text/javascript" src="javascript/prototype.js"></script>
     <script type="text/javascript" src="javascript/scriptaculous.js?load=effects"></script>
 <style>
  .divInOneLine {   
    display: inline;
    float: left;}
  </style>
</head>
<body>
 
 
<table>
<tr>
<td width="50%">
<div id="imageSlider1" style="padding:0px 0px 0px 60px;"><div id="image1" style="display: none;" class="divInOneLine"><a href="http://www.saqi.com"><img src="images/1.jpg" border=0 /></a><img src="images/spacer.gif" border="0" width="5"/></div><div id="image2"  class="divInOneLine" style="display: none;"><a href="http://www.cesholdings.co.uk"><img src="images/2.jpg" border=0 /></a><img src="images/spacer.gif" border="0" width="5"/></div><div id="image3" class="divInOneLine" style="display: none;"><a href="http://www.bbc.co.uk"><img src="images/3.jpg"  border=0 /></a><img src="images/spacer.gif" border="0" width="5"/></div><div id="image4" class="divInOneLine" style="display: none;"><a href="http://www.cricinfo.com"><img src="images/4.jpg" border=0 /></a><img src="images/spacer.gif" border="0" width="5"/></div><div id="image5" class="divInOneLine" style="display: none;"><a href="http://213.253.134.26/carlton/"><img src="images/5.jpg" border=0 /></a><img src="images/spacer.gif" border="0" width="5"/></div></div>
</td></tr>
<tr><td> &nbsp;</td></tr>
<tr><td>
<div id="imageSlider2" style="padding:0px 0px 0px 60px;"><div id="image6" style="display: none;" class="divInOneLine"><a href="http://www.saqi.com"><img src="images/1.jpg" border=0 /></a><img src="images/spacer.gif" border="0" width="5"/></div><div id="image7"  class="divInOneLine" style="display: none;"><a href="http://www.cesholdings.co.uk"><img src="images/2.jpg" border=0 /></a><img src="images/spacer.gif" border="0" width="5"/></div><div id="image8" class="divInOneLine" style="display: none;"><a href="http://www.bbc.co.uk"><img src="images/3.jpg"  border=0 /></a><img src="images/spacer.gif" border="0" width="5"/></div><div id="image9" class="divInOneLine" style="display: none;"><a href="http://www.cricinfo.com"><img src="images/4.jpg" border=0 /></a><img src="images/spacer.gif" border="0" width="5"/></div><div id="image10" class="divInOneLine" style="display: none;"><a href="http://213.253.134.26/carlton/"><img src="images/5.jpg" border=0 /></a><img src="images/spacer.gif" border="0" width="5"/></div></div>
</td></tr>
 </table> 
<script language="javascript">
<!--
 
 
function createEffect(node) {
  var size = document.getElementById(node).childNodes.length;
  for(var i = 0; i < size; i++)
  {
    var current=document.getElementById(node).childNodes[i];
    new Effect.Appear (current,{ duration:0.2,queue: {position:'end', scope: 'appear' + node}});
    new Effect.Move (current,{ duration:0.2,x: -60, y: 0, mode: 'relative',queue: {position:'end', scope: 'fade' + node}});
  } 
}
 
function init(){
  createEffect('imageSlider1');
  createEffect('imageSlider2');
  var str="";
 
 }
init();
-->
</script>
 
 
</body>
</html>

Open in new window

0
niidmoreAuthor Commented:
Yes Koma, it did ...!!

Thank you very much for being so helpful and bearing me through out the course !!

Very kind of you.

Have a great weekend !

0
niidmoreAuthor Commented:
please go and post this solution at the following

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_23147393.html

it is one of my another open question....

i wish to give you full credits !

0
niidmoreAuthor Commented:
mate,
if you get the chance please have a look to one of my open unresolved issue...

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_23118716.html


0
niidmoreAuthor Commented:
Hello koma,
can you please let me know whether you can help me on this one too?
should i post a new question for you?

please let me know....
0
niidmoreAuthor Commented:
Koma,
Please tell me if I have to queue these two functions

 createEffect('imageSlider1');
  createEffect('imageSlider2');

I want to finish displaying the first slider and then start the second one....
0
Koma666Commented:
Then change the function to:

function createEffect(node,queue) {
  var size = document.getElementById(node).childNodes.length;
  for(var i = 0; i < size; i++)
  {
    var current=document.getElementById(node).childNodes[i];
    new Effect.Appear (current,{ duration:0.2,queue: {position:'end', scope: 'appear' + queue}});
    new Effect.Move (current,{ duration:0.2,x: -60, y: 0, mode: 'relative',queue: {position:'end', scope: 'fade' + queue}});
  }
}

and the calls to
createEffect('imageSlider1','slider');
  createEffect('imageSlider2','slider');
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.