AJAX SLIDESHOWS (works on ANY web site & even locally, if you use Firefox): Content of the htmlPicfileLASTNAME.txt files (make one for each person/customer, by LASTNAME -- upload to a folder named uploads on your site or subsite).:
<div><p> </p></div> <ul id="widget" style="overflow:hidden; margin: 50px auto; width:500px; height:405px;"> <li style="float:left; list-style:none; margin: 0 5px; margin-top:180px; cursor:pointer;"><img id="prev" src="uploads/prev.png" /></li> <li style="float:left; list-style:none; margin: 0 5px;"><img height="400" width="400" id="slideshowX" /></li> <li style="float:left; list-style:none; margin: 0 5px; margin-top:180px; cursor:pointer;"><img id="next" src="uploads/next.png" /></li> </ul> </ul> <center> <div id="div1" style="display: none; background-color: yellow; text-align: center;"> <b>first</b> </div> <div id="div2" style="display: none; background-color: yellow; text-align: center;"> <b>second</b> </div> <div id="div3" style="display: none; background-color: yellow; text-align: center;"> <b>third</b> </div> <div id="div4" style="display: none; background-color: yellow; text-align: center;"> <b>fourth</b> </div> </center>
(end content)
ALL YOU NEED TO CHANGE IS THE "X" in "slideshowX" (in the image (img) id of the second line item (li)) -- to a different number for each customer. THEN also the images for each customer (which are to be 400 X 400 pixels) would be named: X1.jpg, X2.jpg, X3.jpg, etc. (upload to THE uploads folder). (The number of jpgs matches the number of divs in the Content, named: div1, div2, ... divN).
Change the text "first", "second", "third" and "fourth" in the divs to the text you want for each caption, FOR
EACH customer (i.e. in each of the customer txt files).
NEW FEATURE (compared to old version): The program has now been adjusted to allow for any number of images/captions.:
The way that works is by adjusting the number of div1, div2 ... to be the same as the number of images you have for that customer/person.
Presumably you would have no trouble deleting or adding these sorts of things (and having the divs named sequentially, div1, div2, ....):
<div id="div4" style="display: none; background-color: yellow; text-align: center;"> <b>fourth</b> </div>See a sample of what would be displayed for each customer at: