OMpdx Posted October 26, 2014 Share Posted October 26, 2014 I know nothing about code. I started with a web template and I want to simply make the banner image random between 5 images I have saved to my ftp. I don't need scrolling or fading or anything, I just want the image to be different every time someone hits or returns to the homepage. I'm starting with the most basic HTML, and I renamed the images to be sequential: <img src="v/vspfiles/assets/images/homepage/img_1.jpg" alt="garments for life"/> <img src="v/vspfiles/assets/images/homepage/img_2.jpg" alt="garments for life"/> <img src="v/vspfiles/assets/images/homepage/img_3.jpg" alt="garments for life"/> <img src="v/vspfiles/assets/images/homepage/img_4.jpg" alt="garments for life"/> <img src="v/vspfiles/assets/images/homepage/img_5.jpg" alt="garments for life"/> I appreciate any help. Link to comment Share on other sites More sharing options...
Ingolme Posted October 27, 2014 Share Posted October 27, 2014 You'll have to program PHP to choose a random image each time the page loads. Link to comment Share on other sites More sharing options...
davej Posted October 27, 2014 Share Posted October 27, 2014 You could try something like this... <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><title>title</title><style>img{height:120px;}</style><script>window.onerror = function(m, u, l){alert('Javascript Error: '+m+'nURL: '+u+'nLine Number: '+l);return true;}</script><script>window.onload = init;function init() {var list = document.getElementsByClassName('randimg');var img = [];var len = list.length;//alert('len='+len);for (var i=0 ; i<len ; i++){img[i] = {};img[i].src = list[i].src;//alert(img[i].src);}var cnt = 0;var idx;while(cnt<len){idx = Math.floor(Math.random() * len);if (img[idx].src!=''){//alert('assigning img['+ idx +']='+ img[idx].src +' to list['+ cnt +']');list[cnt].src = img[idx].src;img[idx].src='';cnt++;}}}</script></head><body><img class="randimg" src="v/vspfiles/assets/images/homepage/img_1.jpg" alt="garments for life"/><img class="randimg" src="v/vspfiles/assets/images/homepage/img_2.jpg" alt="garments for life"/><img class="randimg" src="v/vspfiles/assets/images/homepage/img_3.jpg" alt="garments for life"/><img class="randimg" src="v/vspfiles/assets/images/homepage/img_4.jpg" alt="garments for life"/><img class="randimg" src="v/vspfiles/assets/images/homepage/img_5.jpg" alt="garments for life"/></body> </html> Link to comment Share on other sites More sharing options...
Hadien Posted October 28, 2014 Share Posted October 28, 2014 #bannerCache{//a containing element to store all possible images// its simply here for caching (for faster loading and less overhead) and should never be visible.display:none;}.randImg1 {background-image:url('v/vspfiles/assets/images/homepage/img_1.jpg')}.randImg2 {background-image:url('v/vspfiles/assets/images/homepage/img_2.jpg')}.randImg3 {background-image:url('v/vspfiles/assets/images/homepage/img_3.jpg')}.randImg4 {background-image:url('v/vspfiles/assets/images/homepage/img_4.jpg')}.randImg5 {background-image:url('v/vspfiles/assets/images/homepage/img_5.jpg')}#banner{width: 600px;height: 200px;background-repeat: no-repeat;} <div class="bannerCache"> <div class="randimg1"></div> <div class="randimg2"></div> <div class="randimg3"></div> <div class="randimg4"></div> <div class="randimg5"></div></div><div id="banner"></div><button onclick="randBanner()">BUTTON!</button> <script type="text/javascript">//You never need to pass arguments these are merely available in case you //might want another element to do the same as wellfunction randBanner(c,{ var cache = c||document.getElementById('bannerCache'); var banner= b||document.getElementById('banner'); try{ var index = Math.floor(Math.random()*cache.childNodes.length); banner.className = cache.childNodes[index].classname; } catch(e){ //if an exception is thrown its likely due to invalid arguments or empty cache // log to console and close quietly return console.error(e)===false; }}window.onload = randBanner;</script> This is a relatively simple approach to your problem. Its expandable, allowing you to add more images in the future. It's faster, using caching so that images don't have to be re-downloaded every page visit. The JavaScript should be relatively easy for you to read, study, and thus learn what is happening. If you don't understand something you can google it or ask here.Personallly, I'm against using a hidden bannerCache element like this since if I wanted to change the image list I'd have to update 2 files (the HTML and CSS). However this approach is pretty straightforward and its likely that periodically updating the banners shouldn't be tedious to the point that better methods would be preferred.Also you might to change soe of the CSS for #banner, I don't know the specifics of your images so the values I have likely need to be tweaked. also I added a button for you to play with. Link to comment Share on other sites More sharing options...
OMpdx Posted November 1, 2014 Author Share Posted November 1, 2014 You could try something like this... <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><title>title</title><style>img{height:120px;}</style><script>window.onerror = function(m, u, l){alert('Javascript Error: '+m+'nURL: '+u+'nLine Number: '+l);return true;}</script><script>window.onload = init;function init() {var list = document.getElementsByClassName('randimg');var img = [];var len = list.length;//alert('len='+len);for (var i=0 ; i<len ; i++){img[i] = {};img[i].src = list[i].src;//alert(img[i].src);}var cnt = 0;var idx;while(cnt<len){idx = Math.floor(Math.random() * len);if (img[idx].src!=''){//alert('assigning img['+ idx +']='+ img[idx].src +' to list['+ cnt +']');list[cnt].src = img[idx].src;img[idx].src='';cnt++;}}}</script></head><body><img class="randimg" src="v/vspfiles/assets/images/homepage/img_1.jpg" alt="garments for life"/><img class="randimg" src="v/vspfiles/assets/images/homepage/img_2.jpg" alt="garments for life"/><img class="randimg" src="v/vspfiles/assets/images/homepage/img_3.jpg" alt="garments for life"/><img class="randimg" src="v/vspfiles/assets/images/homepage/img_4.jpg" alt="garments for life"/><img class="randimg" src="v/vspfiles/assets/images/homepage/img_5.jpg" alt="garments for life"/></body> </html> thanks! i think we're getting somewhere... this does randomize, but i'm still getting all images showing simultaneously. i'm hoping for one image in the banner at a time. then if the person goes to a different page and comes back to Home then they'll see a different image (from the 5). Link to comment Share on other sites More sharing options...
dsonesuk Posted November 1, 2014 Share Posted November 1, 2014 Then all you have to do is get reference to images within a container, hide all on start, get random number for index ref of img tags and set it to show, but you cannot 100% guarantee a different image on return, unless you store current img index and remove from random number on return. The css styling insures only the first image shows if js disabled. Also it does not matter what the name of image src is, you can add as many images as you like (within reason, don't go mad) <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" /> <title>Document Title</title> <script type="text/javascript"> window.onload = function() { var parent_contaner = document.getElementById('random_img_inner'); var child_images = parent_contaner.getElementsByTagName('img'); for (i = 0; i < child_images.length; i++) { child_images[i].style.display = "none"; } idx = Math.floor(Math.random() * child_images.length); child_images[idx].style.display = "block"; } </script> <style type="text/css"> #random_img_wrap {text-align: center;} #random_img_inner { border: 3px solid blue; display:inline-block;} #random_img_inner img {display: none; margin: 5px; border: none;} #random_img_inner img:first-child{display:block;} </style> </head> <body> <div id="random_img_wrap"> <div id="random_img_inner"><img src="v/vspfiles/assets/images/homepage/img_1.jpg" alt="garments for life"/><img src="v/vspfiles/assets/images/homepage/img_2.jpg" alt="garments for life"/><img src="v/vspfiles/assets/images/homepage/img_3.jpg" alt="garments for life"/><img src="v/vspfiles/assets/images/homepage/img_4.jpg" alt="garments for life"/><img src="v/vspfiles/assets/images/homepage/img_5.jpg" alt="garments for life"/> </div> </div> </body></html> Link to comment Share on other sites More sharing options...
davej Posted November 1, 2014 Share Posted November 1, 2014 Your initial message included a line of five images and was rather vague. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now