[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

using queue effect in scriptaculous

Posted on 2008-02-06
25
Medium Priority
?
206 Views
Last Modified: 2011-10-19
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
0
Comment
Question by:niidmore
  • 13
  • 12
25 Comments
 
LVL 5

Expert Comment

by:Koma666
ID: 20839238
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
 
LVL 5

Expert Comment

by:Koma666
ID: 20839250
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
 
LVL 5

Expert Comment

by:Koma666
ID: 20839345
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 new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 

Author Comment

by:niidmore
ID: 20840599
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
 
LVL 5

Expert Comment

by:Koma666
ID: 20841684
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
 
LVL 5

Expert Comment

by:Koma666
ID: 20841732
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
 

Author Comment

by:niidmore
ID: 20842436
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
 
LVL 5

Expert Comment

by:Koma666
ID: 20842677
There is just missing the closing } before
effect();
0
 
LVL 5

Expert Comment

by:Koma666
ID: 20842695
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
 

Author Comment

by:niidmore
ID: 20842979
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
 

Author Comment

by:niidmore
ID: 20849014
Hello Koma,
Hope you are still here? Please let me know If this makes any sense?
Regards
Sam
0
 

Author Comment

by:niidmore
ID: 20849139
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
 
LVL 5

Expert Comment

by:Koma666
ID: 20849345
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
 
LVL 5

Expert Comment

by:Koma666
ID: 20849349
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
 

Author Comment

by:niidmore
ID: 20849554
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
 

Author Comment

by:niidmore
ID: 20849691
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
 
LVL 5

Accepted Solution

by:
Koma666 earned 2000 total points
ID: 20849770
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
 
LVL 5

Expert Comment

by:Koma666
ID: 20849779
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
 

Author Comment

by:niidmore
ID: 20850025
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
 

Author Comment

by:niidmore
ID: 20850047
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
 

Author Comment

by:niidmore
ID: 20850248
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
 

Author Comment

by:niidmore
ID: 20851305
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
 

Author Comment

by:niidmore
ID: 20851474
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
 
LVL 5

Expert Comment

by:Koma666
ID: 20864753
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

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

640 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question