Images Randomly Suffle on Load!?
Hey guys!
I’m looking to get this code to work. I have it up on another site and its working but cant get it to work on my new site. Basically just a simple image load that is a link. The way I previously had it was it grabbed the image and image name took bob.jpg and turned the image link into bob.com. I hop you guys can help! Please keep in mind the original was on index.php the new is index.html.
HTML:
[php][/php]
JS:
[php]
PHP has to be a php file in order to excute. So, it having a .html extension will not work regardless.
Okay I have found an alternate way to get the images to load within the page but cant figure out how to make the image a individual link. I can rename the files “ralfs.jpg” then can someone help me with the php to associate that into a link?
New HTML
[php][/php]
New JS in Head
[php][/php]
Maybe change it to something like this?:
[php][/php]
Just ignore what I said, I have no idea what I’m talking about, like you don’t even need php to fix this in the first place; and your JavaScript is 20 years old, document.write isn’t used anymore.
Helpful?
I saw what you read but that was more info rather than helping with a solution. I am just trying to get it to work at this point. I’m using previous codes with new ones I’m finding online. I have got the images to shuffle but haven’t found a solution to making it a link as well. I took what you said and tried to go another route.
Any help on fixing this problem?
Is there anyway to make this a link via the image name?
I’m hoping I can change ‘<img src="’; to something like this ‘<img src="’; " alt=“Test”/>’;
[php] [/php]
[php]<!doctype html>
<p id='tag'></p>
<script type="text/javascript">
var imageURLs = [
"http://www.#.com/images/ads/hill.jpg"
, "http://www.#.com/images/ads/wilshire.jpg"
, "http://www.#.com/images/ads/ger.jpg"
, "http://www.#.com/images/ads/lan.jpg"
];
function getImageTag3() {
var img = '<img src=\"';
var randomIndex = Math.floor(Math.random() * imageURLs.length);
img += imageURLs[randomIndex];
img += '\" alt=\"Test\"/>';
document.getElementById("tag").innerHTML = img;
}
[/php]I tried using that code but I don’t get a link still. Also when I try to add the code to another section on the page it only will show one banner out of the 3. I tried changing the
to and also in the JS but that gives me the same problem.Do you know how to use your developer tools?
[php]<!doctype html>
<p id='tag'></p>
<script type="text/javascript">
var imageURLs = [
"http://www.#.com/images/ads/hill.jpg"
, "http://www.#.com/images/ads/wilshire.jpg"
, "http://www.#.com/images/ads/ger.jpg"
, "http://www.#.com/images/ads/lan.jpg"
];
function getImageTag3() {
var img = '<img src=\"';
var randomIndex = Math.ceil(Math.random() * (imageURLs.length - 1));
img += imageURLs[randomIndex];
for ( var i = 0; i < 50; i++){
console.log(imageURLs[Math.ceil(Math.random() * (imageURLs.length - 1))]);
}
img += '\" alt=\"' + imageURLs[randomIndex] + '\"/><a href="' + imageURLs[randomIndex] + '">' + imageURLs[randomIndex] + '</a>';
document.getElementById("tag").innerHTML = img;
}
[/php]This sort of gives you what you want, it could be a lot cleaner, but this is your code. If you check the console, you will see 50 iterations of the random call. This shows that you are not getting the same image every time.
I don’t think Ive ever used them before. I tried that code and its getting close. I have the images rotating and it adds a link below the banner but the link is http://www.#.com/images/ads/ad.jpg not http://www.ad.com. Also I’m trying to make the image a link not a text link below. Thanks again for all your help!
I am almost there!
I have the corrct links associated to the image I just need the to be linked to the image not a text link.
Heres what I have so far:
[php][/php]
Ive tried moving the tags around but I get an “Undefined” link.
Also I’m having a problem with adding multiple banners. For testing I put the
in 3 spots on the page, only the first tag shows rotating images the others are no where to be found. Can I duplicate the script and change tag to tag2? Or and an extra ? Maybe ?Cleaned it up a bit, but only because, well, it needed it.
[php]<!doctype html>
<p id='tag'></p>
<script>
function getAd() {
var ads = {};
ads[0] = { image: "http://lanierlawfirm.com/wp-content/uploads/2016/05/logo_top2.png",
url: "http://lanierlawfirm.com/",
};
ads[1] = { image: "http://www.#.com/images/ads/ger.jpg",
url: "http://www.geracilawfirm.com/",
};
ads[2] = { image: "http://www.#.com/images/ads/hill.jpg",
url: "http://www.hill-law-offices.com/",
};
ads[3] = { image: "http://www.#.com/images/ads/wilshire.jpg",
url: "http://wilshirelawfirm.com/",
};
var randomIndex = Math.ceil(Math.random() * (Object.keys(ads).length - 1));
link = '<a href="' + ads[randomIndex].url + '"><img src="' + ads[randomIndex].image + '" alt="' + ads[randomIndex].url + '"></a>';
document.getElementById("tag").innerHTML = link;
}
[/php]And you don’t need to replicate the code to use it more than once, but it is a problem if you mind duplicates.
Your awesome! Working great now! Thank you so much!