[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 817
  • Last Modified:

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
0
djfenom
Asked:
djfenom
  • 2
  • 2
1 Solution
 
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
 
djfenomAuthor Commented:
Perfect! Thanks so much.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now