i want to make random image with link, but i didnt understand. anyone can help me?
this is the javascript in header
<script type="text/javascript">
var random_images_array = ['banner/headline/chrome.png','banner/headline/thunderbird.png','banner/headline/vlc.png'];
function getRandomImage(imgAr, path) {
path = path || 'images/';
var num = Math.floor( Math.random() * imgAr.length );
var img = imgAr[ num ];
var lnk = imgAr[ num ];
var imgStr = '<img src="' + path + img + '" alt="" class="img-responsive">';
document.write(imgStr); document.close();
}
</script>
this is the javascript in body
<script type="text/javascript">
getRandomImage(random_images_array, 'images/')
</script>
Related
I can't make this open the image in a new window (not tab).
This script is placed in <head>:
<script type="text/javascript">
function randomImg1() {
var myImage1 = new Array();
myImage1[0] = "1.jpg";
myImage1[1] = "2.jpg";
myImage1[2] = "3.jpg";
var random = Math.floor(Math.random() * myImage1.length);
document.getElementById("image").innerHTML = "<img src='"
+ myImage1[random] + "' alt='image'></img>";
}
</script>
My button is placed in <body>:
<button onclick="randomImg1();OpenInNewTab();">click</button>
<div id="image"></div>
Use https://www.w3schools.com/jsref/met_win_open.asp to open a new window. Add the spec parameter to make it open as a new window instead of a tab. And make sure to pass the full path of the image:
<script type="text/javascript">
function randomImg1() {
var myImage1 = new Array();
myImage1[0] = "1.jpg";
myImage1[1] = "2.jpg";
myImage1[2] = "3.jpg";
var random = Math.floor(Math.random() * myImage1.length);
// create the full image URL
var imageUrl = window.location.protocol + '//' + window.location.host + window.location.pathname + myImage1[random];
// open in a new window. ideally use the image's size for w and h
window.open(imageUrl, '_blank', 'height=300,width=300');
}
</script>
I get the following error when I click my refresh button:
caught TypeError: Cannot read property 'length' of undefined
at getRandomImage (index.html:85)
at HTMLInputElement.onclick (index.html:11)
See this snippet:
var myArray = new Array();
getRandomImage(myArray, "");
function getRandomImage(imgAr, path) {
path = path || 'C:/Users/Owen/Desktop/1-800MemeLine-master/memes/'; // default path here
var num = Math.floor( Math.random() * imgAr.length );
var img = imgAr[ num ];
var imgStr = '<img src="' + path + img + '" alt = "">';
document.write(imgStr); document.close();
}
<form>
<INPUT TYPE="button" onClick="getRandomImage()" VALUE="More MEME plz">
</INPUT>
</form>
It works fine with the button refreshing the page but most of the people on my website have bad internet which takes a long time to reload the page so only loading the image and not the background and text and unnecessary things.
Link to github REPO: https://github.com/odude102/1-800MemeLine/blob/master/index.html
This is not the best solution, but it fixes your problem:
var myArray = new Array();
var path = 'C:/Users/Owen/Desktop/1-800MemeLine-master/memes/';
getRandomImage();
function getRandomImage() {
var num = Math.floor( Math.random() * myArray.length );
var img = myArray[ num ];
var imgStr = '<img src="' + path + img + '" alt = "">';
document.write(imgStr);
document.close();
}
this is my code: I want to ask
<script type="text/javascript">
var total = 4;
</script>
How can I do this?
<img src="img/apple_" + total + ".png" id="imageBox"/>
I've been try to use call function and document.onload but it's not work at all, can somebody save me?
I am supposing you just want to update the image src with javascript.
document.getElementById('imageBox').src = "img/apple_" + total + ".png";
You need to add html in JavaScript like this:
<div id="foo"></div>
<script type="text/javascript">
var total = 4;
document.getElementById('foo').innerHTML = '<img src="img/apple_' + total + '.png" id="imageBox"/>';
</script>
window.onload = function() {
var total = 4;
document.getElementById('imageBox').src = 'img/apple_' + total + '.png"';
};
<img src="" id="imageBox"/>
Here is a clean way to do this.
Demo
var create_img_element = function(total, targetId){
//create the img element
var img = document.createElement('img');
//set the source of the image
img.src = 'img/apple_' + total + '.png';
//add the image to a specific element
document.getElementById(targetId).appendChild(img);
}
create_img_element(5, 'foo');
I am trying to retrieve a particular playlist thumbnail of user but here I stuck - it is not getting the views and description of the video. I want to allow the video within my website only.
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function() {
function LoadVids(startindex) {
if (typeof startindex === "undefined" || startindex === null) startindex = 1;
var playListURL = 'http://gdata.youtube.com/feeds/api/playlists/PL3B8939169E1256C0?orderby=published&v=2&alt=json&&start-index=' + startindex;
var videoURL = 'http://www.youtube.com/watch?v=';
$.getJSON(playListURL, function(data) {
var list_data = "";
$.each(data.feed.entry, function(i, item) {
var feedTitle = item.title.$t;
var feedURL = item.link[1].href;
var fragments = feedURL.split("/");
var videoID = fragments[fragments.length - 2];
var vid = item.media$group.yt$videoid.$t;
var url = videoURL + videoID;
var vidtitle = item.title.$t;
var thumb = "http://img.youtube.com/vi/" + videoID + "/default.jpg";
list_data += ' < img alt = "'+ feedTitle+'"
src = "'+ thumb +'"
' + ' - ' + vidtitle + '
';
});
$(list_data).appendTo(".cont");
});
}
//
$(document).ready(function() {
LoadVids(1); // call on load more click
});
}); //
</script>
</head>
<body>
</body>
</html>
Your ajax seems to be ok. But i can't find any "play function" in your code. For that, i suggest you jquery.tubeplayer:
http://www.tikku.com/jquery-youtube-tubeplayer-plugin
Little example:
playVideo: function (events) {
var self = this;
var that = $(events.currentTarget);
var videoId = that.parents('.videopreview').find('.youtubeimage').attr('data-link');
that.parents('.videopreview').find('.youtubeimage').hide();
that.parents('.videopreview').find('.playicon').css({
"z-index": -20,
});
that.parents('.videopreview').find('.playvideo').tubeplayer({
width: 279, // the width of the player
height: 200, // the height of the player
allowFullScreen: "true", // true by default, allow user to go full screen
initialVideo: videoId, // the video that is loaded into the player
autoPlay: true,
preferredQuality: "default", // preferred quality: default, small, medium, large, hd720
});
},
Where "data-link" is the youtube video id:
JavaScript REGEX: How do I get the YouTube video id from a URL?
In your script:
$.each(data.feed.entry, function(i, item) {
var feedTitle = item.title.$t;
var feedURL = item.link[1].href;
var fragments = feedURL.split("/");
var videoID = fragments[fragments.length - 2];
var vid = item.media$group.yt$videoid.$t;
var url = videoURL + videoID;
var vidtitle = item.title.$t;
var description=item.media$group.media$description.$t;
var views=item.yt$statistics.viewCount;
var thumb = "http://img.youtube.com/vi/"+ videoID +"/default.jpg";
list_data += '
<img alt="'+ feedTitle+'" src="'+ thumb +'"' + ' - ' + vidtitle + '
';
});
$(list_data).appendTo(".cont");
});
I am using this code and my file name is ads.js
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*?)[#.]/gi, function(m, key, value) {
vars[key] = value;
});
return vars;
}
var pic = getUrlVars()["pic"];
var random_ads_array = ["visitors.jpg", "payouts.jpg", "logos-icon.jpg"];
function getRandomAds(imgAr, path) {
path = path || 'buycimg/'; // default path here
var num = Math.floor(Math.random() * imgAr.length);
var img = imgAr[num];
var imgStr = '<img src="' + path + img + '" alt = "">';
document.write(imgStr);
document.close();
}
And in html part I am using this code
<script type="text/javascript" src="ads.js?pic=45bus67"></script>
<script type="text/javascript">getRandomAds(random_ads_array);</script>
Out put is showing an image but not showing the correct link
Output is like this
http://appricart.com/undefined.html
I want to show
http://appricart.com/45bus67.html
Help related this thankx
Why don't you just put the pic value into the function?
<script type="text/javascript" src="ads.js"></script>
<script type="text/javascript">getRandomAds(random_ads_array, "45bus67");</script>
ads.js
var random_ads_array = ["visitors.jpg", "payouts.jpg", "logos-icon.jpg"];
function getRandomAds(imgAr, pic, path) {
path = path || 'buycimg/'; // default path here
var num = Math.floor( Math.random() * imgAr.length );
var img = imgAr[ num ];
var imgStr = '<img src="' + path + img + '" alt = "">';
document.write(imgStr); document.close();
}
Perhaps you could give it an ID - and then:
src = document.getElementById("scriptId").getAttribute("src");
src = src.split("?pic=");
src = src[1];
And voila! You can do what you need to do with src