AdRotator with preview

CementTruck used Ask the Experts™
Hello Experts,

I have a working AdRotator but need it to do a little bit more. I would like for the viewer/customer to be able to scroll through the ads (forward and backward) so they don't have to wait for the ads to rotate through.

Another thought would be to have a "queue" on both sides of the AdRotator main ad that would display the ads that are coming next, and on the other side the one that just left. Right now the rotator I have is on a random cycle and the customer has to refresh constantly to be able to get back to the ad that they wanted to see again. Also, would it be possible to hover the mouse pointer on the main ad and freeze the rotator?

I have seen this on sites like iTunes, there you can flip through album covers, or yahoo (might not be adrotator, but allows user to go forward and back to view different stories)

EE Point system only allows me to give up to 3 digits, otherwise I'd give way more. I know this is a lot to ask.

Thanks in advance.

Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Hey I have written some code to do something similar see:

all you would need to do is add click events to the picture boxes to force the image change.



Do you have this live on a site? All I see is a zip file.

The entire project is in the zip file.

I have updated the article for you and put a link to a working demo:

OWASP: Avoiding Hacker Tricks

Learn to build secure applications from the mindset of the hacker and avoid being exploited.

As I said - you would just have to mod it a little to update the main image also on click



Working demo looks cool. Does it just resize the other 3 images and puts them on the right?

I have not looked at your code yet and have a few questions.

Your demo shows 4 rotating ads. what would happen if there were more....say 10-12 ads? How would you be able to scroll through and find an ad that had passed? Do you have provisions for that in your code? Are the smaller images clickable?

Thanks for the quick responses.
ok :)

so what happens is the images are part of a list so you could add as many as you like. - It would add them all into a queue and then rotate them, obviously the layout is completly changeable and you can add as many more image boxes as you like (you would just have to copy and past some javascript to accomodate)

As this actually was a response to another question, it was done quickly and without much other functunality  - I could extend it if you gave me some requirements - Like resizing the image does not happen at this stage, but is fairly simple for me to add.



Sorry for not getting back to you sooner. I have been put on another project and will not be able to get to testing your code for another week or so.

I have been tasked with making the current Rotator more user friendly. Users need to have the ability to click on a left or right button to go backwards or forwards in the rotator lineup, just in case they wanted to go back to an ad that already went by. I was given the iTunes example, where you can flip through the album art and select the album you want. I don't have iTunes, but understand the concept. Making it come to fruitions is a whole other matter.

So I guess to answer your question, 2 small images on the left (upcoming ads), main image in the middle at full size, 2 small images on the right (last 2 ads that just went by). Clicking on the smaller ads will bring them to the middle, wherein they are clickable for redirect to their linked page. Clicking on smaller images should just "rewind(how's that for old school?)" or "fast forward" that small image into the center spot.

I'm pretty pumped to try this functionality you've developed. I'm new to and it's a world of difference to what I'm used to.

Hope this helps.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial