[Last Call] Learn how to a build a cloud-first strategyRegister Now

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

JavaScript driven image rotator

How does the image rotator on this webpage work? http://www.coastlinerop.schoolloop.com

The images have names like "1224307720616/1235692177229_380x237" with no extension. The full path for that image would be: <<  http://www.coastlinerop.schoolloop.com/uimg/image/1224307720616/1235692177229_380x237  >> How does that work? All the images are in a table cell inside this div and class:  <div id="div_1235692552888" class="pics_1235692552888">,  and the div is referenced in the jQuery script above it.

If it's not too complicated an answer, how would I duplicate this sort of thing myself. I have access to a remote database on a Windows server via asp.net. What all would I need to do to emulate this sort of image rotator myself?

Thanks!
John
0
gabrielPennyback
Asked:
gabrielPennyback
  • 2
2 Solutions
 
Michel PlungjanIT ExpertCommented:
1. JAVA is not JavaScript so I fixed your title
2. they use JQuery - seems they use something called cycle
http://www.google.com/search?q=jquery+cycle+tutorial
http://www.google.com/search?q=jquery+cycle+plugin
3. http://www.coastlinerop.schoolloop.com/uimg/image/1224307720616/1235692177229_380x237
just means that they use .htaccess to rewrite the url, something like

http://www.coastlinerop.schoolloop.com/uimg.php?image=1224307720616/1235692177229&size=380x237

and have the php return the scaled image with image/jpeg mime header
0
 
Pawel WitkowskiSenior Javascript DeveloperCommented:
The easiest using jQuery is :

http://www.malsup.com/jquery/cycle/


Just look for "fade" effect - that is what you look for .
0
 
Michel PlungjanIT ExpertCommented:
Wilg: top link in the link I gave http://www.google.com/search?q=jquery+cycle+plugin
0
 
gabrielPennybackAuthor Commented:
Sorry for being gone so long. Thanks.

- John
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

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