sean04 Posted June 1, 2010 Share Posted June 1, 2010 Hey guys, I have been looking for a specific image scroller but I can't seem to find one. I have attached a picture of the one that I would like. I'm assuming I would use javascript If someone has an idea of where I can find one that would be great. I realize that this is quite basic Thanks, Sean [attachment deleted by admin] Link to comment https://forums.phpfreaks.com/topic/203522-image-scroller/ Share on other sites More sharing options...
Psycho Posted June 1, 2010 Share Posted June 1, 2010 I think what you are after is more of a CSS/Style issue than a JavaScript issue. The JavaScript is very simple. Here's a working example: <html> <head> <style> #imgControl { width:350px; height:300px; } #imgDisplay { width: 350px; height: 225px; text-align: center; border: 1px solid #000000; } #imgList { width: 350px; height: 75px; overflow: auto; white-space: nowrap; border: 1px solid #000000; } .thumb { height: 45px; width:45px; } </style> <script type="text/javascript"> function showImage(imageName) { var path = 'images/'; //path to images folder var imgObj = document.getElementById('displayedImg'); imgObj.src = path + imageName; return; } </script> </head> <body> <div id="imgControl"> <div id="imgDisplay"> <img src="blank.jpg" id="displayedImg" /> </div> <div id="imgList"> <a href="#" onclick="showImage('image1.jpg');"><img src="images\thumbs\thumb1.jpg" class="thumb" /></a> <a href="#" onclick="showImage('image2.jpg');"><img src="images\thumbs\thumb2.jpg" class="thumb" /></a> <a href="#" onclick="showImage('image3.jpg');"><img src="images\thumbs\thumb3.jpg" class="thumb" /></a> <a href="#" onclick="showImage('image4.jpg');"><img src="images\thumbs\thumb4.jpg" class="thumb" /></a> <a href="#" onclick="showImage('image5.jpg');"><img src="images\thumbs\thumb5.jpg" class="thumb" /></a> <a href="#" onclick="showImage('image6.jpg');"><img src="images\thumbs\thumb6.jpg" class="thumb" /></a> <a href="#" onclick="showImage('image7.jpg');"><img src="images\thumbs\thumb7.jpg" class="thumb" /></a> <a href="#" onclick="showImage('image8.jpg');"><img src="images\thumbs\thumb8.jpg" class="thumb" /></a> <a href="#" onclick="showImage('image9.jpg');"><img src="images\thumbs\thumb9.jpg" class="thumb" /></a> </div> </div> </body> </html> Link to comment https://forums.phpfreaks.com/topic/203522-image-scroller/#findComment-1066260 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.