Max,

What you can do is create 2 document type.

1st: you will be able to browse the content that is in your case the images. (e.g folder doc type)

2nd: the upload field for the images and if you want to add captions  and it there ( e.g image doc type)

Then in you Default Document type dont forget to include the first document type under which you will include the image document type.

Then just create an xslt list sub pages from current page. In your xslt dont just add all the attributes of your javascript.

//fuji

I have those list already i want to add those images into the javascript array how to do it any suuggestions??

<xsl:variable name="imgs"><xsl:value-of select="specailImage"/></xsl:variable>

i need to add this in the for each xsl loop to a javascript array how to do it.

Max are you making an image gallery slideshow?...if so try keeping the upload images by using the List Sub Pages from current page standard XSLT.

<!-- The fun starts here -->
<ul id="miniPhotoCn">
<xsl:for-each select="$currentPage/* [@isDoc and string(umbracoNaviHide) != '1']">
  
    <li>
      <a href="{uploadPhoto}" rel="(usually your css to trigger the slideshow)" title="caption">
        <img src="{uploadPhoto}" alt="{@nodeName}" width="100" height="100"/>
      </a>
     
    </li>
 
</xsl:for-each>
</ul>

//Fuji 

your code was very useful i used a jquery in it to slide the <ul> <Li> elements in it what if i want two slides two different slides like

slide 1 | slide 2

showwing 2 different images how will i organze it within teh subpages of document type like put it in diferent subfolders as well...

any suggestions will be helpful

Max,

what do you mean by Slide 1 | Slide 2?....are your images stored in Slide 1 and another batch in Slide 2?

//Fuji

yes diffent batches how can i organize them in dual slides side by side

like

slide 1 | slide 2  

for example slide 1 may have 4 images

slide 2 may have 6 images

both will slide together but i want to be able to set images which one to be part of which..

i can set image1 to be part of slide 1 and image 2 to be part of slide 2

is there anyway i can do this

If am not mistaken this can be done by using the  property rel="" you usually include to load a slideshow which will recognise that a particular image will be associated to batch.

can i place a property in document and and seperate them according to its property

Am not sure Max, but its worthy giving it a shot...

i did it it works nicely

<xsl:text disable-output-escaping="yes">
<![CDATA[

<script type="text/javascript" src="/scripts/jquery.js"></script>
    <script type="text/javascript" src="/scripts/jquery.innerfade.js"></script>
<script type="text/javascript">
     $(document).ready(
        function(){
          $('#slideleft').innerfade({
            animationtype: 'slide',
            speed: 750,
            timeout: 2000,
            type: 'random',
            containerheight: '1em'
          });
          
          $('ul#portfolio').innerfade({
            speed: 1000,
            timeout: 5000,
            type: 'sequence',
            containerheight: '220px'
          });
          
          $('.fade').innerfade({
            speed: 1000,
            timeout: 6000,
            type: 'random_start',
            containerheight: '1.5em'
          });
          
          $('.adi').innerfade({
            speed: 'slow',
            timeout: 5000,
            type: 'random',
            containerheight: '150px'
          });

      });
    </script>
<script type="text/javascript">
     $(document).ready(
        function(){
          $('#slideright').innerfade({
            animationtype: 'slide',
            speed: 750,
            timeout: 2000,
            type: 'random',
            containerheight: '1em'
          });
          
          $('ul#portfolio').innerfade({
            speed: 1000,
            timeout: 5000,
            type: 'sequence',
            containerheight: '220px'
          });
          
          $('.fade').innerfade({
            speed: 1000,
            timeout: 6000,
            type: 'random_start',
            containerheight: '1.5em'
          });
          
          $('.adi').innerfade({
            speed: 'slow',
            timeout: 5000,
            type: 'random',
            containerheight: '150px'
          });

      });
    </script>
  ]]>
</xsl:text>
<div id="containerspecial" style="width:300px">
 <div id="LeftSpecial" style="float:left; width:150px"> 
<ul id="slideleft">
<xsl:for-each select="$currentPage/* [@isDoc and string(umbracoNaviHide) = '1'] ">
  <xsl:variable name="leftcheck"><xsl:value-of select="sliderOption"/></xsl:variable>

  <xsl:if test="$leftcheck='SlideLeft'">
    <li> <xsl:element name="img">
                 <xsl:attribute name="src"><xsl:value-of select="specailImage"/></xsl:attribute>
                 <xsl:attribute name="id">img1</xsl:attribute>
                  <xsl:attribute name="width">120px</xsl:attribute>

  </xsl:element>
      <p id="tame" style="width:120px; height:auto"><xsl:value-of select="specialCaption"/>
      
      </p>
  </li>
  </xsl:if> 
  
</xsl:for-each>
    
  </ul>
   </div>

if you need anything this contct me Thanks FUJI

Most Welcome Max...

//fuji

is working on a reply...