Display random image from bank using Mootools and ASP

I'm using a Mootools slideshow effect on my website. It is used in this way:

<script type="text/javascript">
<!--
window.onload = function() { myShow = new Slideshow('header_image',{ type: 'fade', duration: [2000, 4000], images: ['top-image9.jpg','top-image3.jpg','top-image5.jpg'], hu: 'images/' }); }
//-->
</script>

It fades between 3 images in a particular div and the image initially in the div is the first image called:

<div id="header_image"><img src="images/top-image9.jpg" alt="" width="569" height="245" /></div>

What I'm trying to do is using an existing ASP script I have to generate a selection of random images, implement this into the slideshow. Here is my ASP script:

<%
Function RandomAdvertList(ByVal aArray)

  Dim iUpper, iLower, iLoop, iSwapPos, varTmp
  iUpper = UBound(aArray)
  iLower = LBound(aArray)

  Randomize Timer

  'Loop through the array, randomly swapping values
  For iLoop = iLower to iUpper
    'Get an array index to swap
    iSwapPos = Int(Rnd * (iUpper + 1))

    'Swap the current element with the element at iSwapPos
    varTmp = aArray(iLoop)
    aArray(iLoop) = aArray(iSwapPos)
    aArray(iSwapPos) = varTmp
  Next

  RandomAdvertList = aArray   'Return the jumbled array
End Function

Sub WriteAdverts(howmany)
dim arrAdvert
redim arrAdvert(10)

arrAdvert(0)= "top-image1.jpg"
arrAdvert(1)= "top-image2.jpg"
arrAdvert(2)= "top-image3.jpg"
arrAdvert(3)= "top-image4.jpg"
arrAdvert(4)= "top-image5.jpg"
arrAdvert(5)= "top-image6.jpg"
arrAdvert(6)= "top-image7.jpg"
arrAdvert(7)= "top-image8.jpg"
arrAdvert(8)= "top-image9.jpg"
arrAdvert(9)= "top-image10.jpg"
arrAdvert(10)= "top-image11.jpg"

arrAdvert = RandomAdvertList(arrAdvert)
For iLoop = LBound(arrAdvert) to howmany-1 'UBound(arrAdvert)
  Response.Write "'" & arrAdvert(iLoop) & "',"
Next

end sub
%>

I Then call this from the page like so:

<script type="text/javascript">
<!--
window.onload = function() { myShow = new Slideshow('header_image',{ type: 'fade', duration: [2000, 4000], images: [<%WriteAdverts(3)%>], hu: 'images/' }); }
//-->
</script>

This works great and does randomly put 3 images into the javascript. What I can't do is match the image in the <div id="header_image"> div so that it's the same as the first image called, I've tried:

<div id="header_image"><img src="images/<%WriteAdverts(1)%>" alt="" width="569" height="245" /></div>

But this just displays another random image.

Any ideas??

Thanks

Chris
djfenomAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
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.

slamhoundCommented:
ASP gets fully executed and formed in the page before the user sees it (server side) while JavaScript does it's thing to the completed page (client side). This means that:
window.onload = function() { myShow = new Slideshow('header_image',{ type: 'fade', duration: [2000, 4000], images: [<%WriteAdverts(3)%>], hu: 'images/' }); }
will become something like
window.onload = function() { myShow = new Slideshow('header_image',{ type: 'fade', duration: [2000, 4000], images: [top-image6.jpg], hu: 'images/' }); }
and THEN the JavaScript does it's work.

And now I reread your question I have a better idea...

Function WriteAdverts(howmany)
dim arrAdvert
redim arrAdvert(10)
FirstImage = ""

arrAdvert(0)= "top-image1.jpg"
arrAdvert(1)= "top-image2.jpg"
arrAdvert(2)= "top-image3.jpg"
arrAdvert(3)= "top-image4.jpg"
arrAdvert(4)= "top-image5.jpg"
arrAdvert(5)= "top-image6.jpg"
arrAdvert(6)= "top-image7.jpg"
arrAdvert(7)= "top-image8.jpg"
arrAdvert(8)= "top-image9.jpg"
arrAdvert(9)= "top-image10.jpg"
arrAdvert(10)= "top-image11.jpg"

arrAdvert = RandomAdvertList(arrAdvert)
For iLoop = LBound(arrAdvert) to howmany-1 'UBound(arrAdvert)
If FirstImage <= "" Then
     FirstImage = arrAdvert(iLoop)
End If
  Response.Write "'" & arrAdvert(iLoop) & "',"
Next
WriteAdverts = FirstImage
end Function

Then, in the main body of your page have something like:
window.onload = function() { myShow = new Slideshow('header_image',{ type: 'fade', duration: [2000, 4000], images: [<%strFirstImage = WriteAdverts(3)%>], hu: 'images/' }); }
and
<div id="header_image"><img src="images/<%=strFirstImage%>" alt="" width="569" height="245" /></div>

So basically I am changing your sub into a function and getting the function to feed back the first image it picked up.
0
djfenomAuthor Commented:
Thanks slamhound, you're a legend!!

Just one slight problem, it seems to stop working in IE after the cycle of 3 images, I think it's maybe because there's an extra ',' at the end of the last image, any ideas how to get rid?

Thanks
0
slamhoundCommented:
The below will get rid of the extra comma.

For iLoop = LBound(arrAdvert) to howmany-1 'UBound(arrAdvert)
If FirstImage <= "" Then
     FirstImage = arrAdvert(iLoop)
Response.Write "'" & arrAdvert(iLoop) & "'"
Else
Response.Write ",'" & arrAdvert(iLoop) & "'"
End If
 
Next
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
djfenomAuthor Commented:
Perfect! Thanks so much.
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
ASP

From novice to tech pro — start learning today.