I am trying to create a random gif generator. Very simple in design, just have the gif/img load in and once the user clicks/taps it randomizes and pulls another random image from the array.
For now I would just like to have the image randomize when it is clicked.
Currently it only randomizes when the page is refreshed.
HTML
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="js/rand.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<head>
<title>Gif Generator - Prototype</title>
</head>
<body>
<h1>Gif Generator - Prototype</h1>
<section>
<p>This image is random</p>
<a href="#" class="click">
<script>
getRandomImage()
</script>
</a>
</section>
</body>
JS
var randomImage = new Array();
randomImage[0] = "images/100.jpg";
randomImage[1] = "images/200.jpg";
randomImage[2] = "images/300.jpg";
randomImage[3] = "images/400.jpg";
function getRandomImage() {
var number = Math.floor(Math.random()*randomImage.length);
document.write('<img src="'+randomImage[number]+'" />');
}
As per your jQuery reference at the top, below is the proposed solution:
$(function() {
$('a.click').click(function(e) {
e.preventDefault();
var number = Math.floor(Math.random()*randomImage.length);
$(this).html('<img src="'+randomImage[number]+'" />');
});
});
on click method serves the purpose.
in an <img> tag you can add an onclick method
<img src="" alt="Random image" onclick="getRandomImage()">
Related
I have a page that displays a gif icon based on a string on a canvas. For example "clear-day". It is possible to fetch that string from an api. My question is how i assign the variable "icon" that includes that string to the id of my canvas. Of course there are better ways of doing this as i´m a beginner.
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Animated weather icons</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<figure class="icons">
<canvas class="weatherIcon" width="64" height="64"></canvas>
</figure>
<script src="https://rawgithub.com/darkskyapp/skycons/master/skycons.js"></script>
<script>
$(document).ready(function weather(){
$.getJSON("https://api.darksky.net/forecast/[key]/59.868098,%2017.678976?lang=sv&callback=?",
function(json) {
var weatherJSON = json.currently;
var icon=weatherJSON.icon;
var icons = new Skycons({"color": "white"});
icons.set("clear-day", Skycons.CLEAR_DAY);
icons.set("clear-night", Skycons.CLEAR_NIGHT);
icons.set("partly-cloudy-day", Skycons.PARTLY_CLOUDY_DAY);
icons.set("partly-cloudy-night", Skycons.PARTLY_CLOUDY_NIGHT);
icons.set("cloudy", Skycons.CLOUDY);
icons.set("rain", Skycons.RAIN);
icons.set("sleet", Skycons.SLEET);
icons.set("snow", Skycons.SNOW);
icons.set("wind", Skycons.WIND);
icons.set("fog", Skycons.FOG);
var iconWeather = document.getElementsByClassName("weatherIcon");
iconWeather.id = icon;
icons.play();
});
});
</script>
</body>
</html>
Try:
document.getElementsByTagName("canvas")[0].setAttribute("id", icon);
To achieve expected result, use below option
Document.getElementByClassName returns an array-like object of all child elements which have all of the given class names.
Change iconWeather.id = icon; to iconWeather[0].setAttribute("id", icon);
<html>
<head>
<meta charset = "utf-8/">
<title> My Student Life </title>
<link rel="stylesheet" href="Pan.css"/> <!--Links to the CSS -->
<script type = "text/javascript"> // JavaScript code
var slideimages = new Array() //SlideShow process begins
imgAlign = "center"
slideimages[0] = new Image() // create new instance of image object
slideimages[0].src = "Welcome.jpg" // set image src property to
slideimages[1] = new Image()
slideimages[1].src = "Code.jpg" //Image source
slideimages[2] = new Image()
slideimages[2].src = "books.jpg"
</script>
</head>
<body class ="Container" Background = "Background.jpg"> <!-- Background Images-->
<div class="headerMenu"> <!-- Div class for menus -->
<h1> My Student Life </h1>
<div id="menu"> <!-- created Menus-->
<ul>
<a href="WelcomePage.html"/> Welcome </a>
<a href=""/></a> <!--Menu links-->
<a href="Menu.html"/> Menu </a>
<a href=""/> </a>
</ul>
</div>
<header>
<h2 color = "white"> Welcome to my Student Life </h2>
</header>
<img src = "Welcome.jpg" width = "500" height ="300" id = "slide" > <!--Image -->
<script type="text/javascript">
var step=0 //starts
function slideit(){ //function called slideit
if (!document.images)
return
document.getElementById('slide').src = slideimages[step].src //Gets image by ID and follows the sliding process
if (step<2)
step++
else
step=0
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
slideit() //Enable the function to perform
</script>
</body>
</html>
I am creating a project for one of my university course , I have created a slideshow using JS it works perfectly only problem is that the position of image is all the way to the left of screen . I tried padding-left in css but still didnt work I alsi created it in a div class and calld the class in CSS and a still no result. Sorry for my english.
Add following in your Pan.css :
.Container{
text-align: center;
}
For your question 2, just add margin-right to your image, the value is up to you:
img{
margin-right: 50px
}
Try adding the style below to your img tag:
<img src = "Welcome.jpg" width = "500" height ="300" id = "slide" style="margin: auto;" >
I'm trying to create a slide show but I'm having some difficulty. I've googled the problem and read loads of pages but I still can't get it to work. I'm doing this all in my header, then the header.php will be included on whichever page. I've tried setting the source to a string containing the location, creating an image before and then setting it to that image's source, and just trying odd things trying to get it to work.
The strange thing is when I call the updateSlider() function, the source of my image is null even though I can see it on the screen, and afterwards when I set it, it says there is a source but the image is the same.
But at the moment I'm just trying to change the image when I click a button and then I'm going to try and make the slide show. Here is the header.php code, you can see some of the different things I've tried in it:
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="all">#import "./includes/layout.css";</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
var slideImages = new Array("includes/images/mmSlideImage1.png",
"includes/images/mmSlideImage2.png", "includes/images/mmSlideImage3.png");
var slideImage = newImage();
slideImage.src = slideImages[0];
pic = document.createElement("img");
pic.setAttribute("src", "includes/images/mmSlideImage2.png");
pic.setAttribute("alt", "No Image");
var url2 = "includes/images/mmSlideImage2.png";
var img2 = new Image();
img2.src = url2;
function updateSlider() {
console.log(document.getElementById("ht").getAttribute("src"));
document.getElementById("ht").setAttribute("src", img2.src);
console.log(document.getElementById("ht").getAttribute("src"));
}
</script>
</head>
<body>
<img src="includes/images/mmSlideImage1.png" alt="Logo" width="970" height="278" />
<button type="button" onclick="updateSlider()">Update Slider</button>
<div id="nav">
Home
About
Gallery
Programs
</div>
Thank you in advance for any help!
==================================================================================
UPDATED CODE:
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="all">#import "./includes/layout.css";</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"
</script>
<script>
var url2 = "includes/images/mmSlideImage2.png";
function updateSlider() {
console.log(document.getElementById("ht").getAttribute("src"));
$('ht').attr('src', url2);
console.log(document.getElementById("ht").getAttribute("src"));
}
</script>
</head>
<body>
<img src="includes/images/mmSlideImage1.png" alt="Logo" width="970" height="278" />
<button type="button" onclick="updateSlider()">Update Slider</button>
Simple. You're trying to give an anchor a image attribute. Give your img an id and fix it in the Javascript. For example, if you give it an "currentSlideImage" id:
$('#currentSlideImage').attr('src', url2);
BTW, I'd suggest you take a read on Unobstrusive Javascript.
i am not sure why are you using new image when you are just changing src of an image tag.
the easiest way is to use jquery code
$('#imgTagID').attr('src', url2);
or in javascript
document.getElementById("imgTagID").src = url2;
Here you go you were just missing id Tag inside jquery i just tried it with online images
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
var url2 = "http://www.thinkstockphotos.com.au/CMS/StaticContent/WhyThinkstockImages/Best_Images.jpg";
function updateSlider() {
//console.log(document.getElementById("ht").getAttribute("src"));
$('#ht').attr('src', url2);
//console.log(document.getElementById("ht").getAttribute("src"));
}
</script>
</head>
<body>
<a href="index.html" class="logo" > <img id="ht" src="http://www.nasa.gov/sites/default/files/images/743348main_Timelapse_Sun_4k.jpg" alt="Logo" width="970" height="278" /></a>
<button type="button" onclick="updateSlider()">Update Slider</button>
</body>
</html>
I have created five index for my app. the first index is for welcome screen. the second index is for capture,take pic, dragable crop tool, zoom in and zoom out. I wonder that it only work with some script only, but when I refresh on second index one it work well with all function.
Can anyone tell me about this problem?
My Html code goes here:
jQuery Moblie test
<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
<script type="text/javascript" src="js/TakePhoto.js"></script>
<script type="text/javascript" src="js/drag.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile- 1.0a3.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile- 1.0a3.min.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.min.css" />
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
<link rel="stylesheet" href="docsdemos-style-override.css" />
<script type='text/javascript' src="js/jquery-ui-1.9.2.custom.js"></script>
<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui- 1.9.2.custom.min.css"/>
<script type='text/javascript' src="js/jQuery.ui.touch-punch.js"></script>
</head>
<body>
<div data-role="page" id="takephoto" >
<div data-role="header" class="ui-bar ui-bar-b" data-theme="b">
<h1>Choose a photo for left Person !</h1>
Back
</div>
<div data-role="content">
<h2>Choose a photo for <strong>Left</strong> Person!</h2>
Take a photo
Choose from library
</div>
<div id="image_container" style="display:block;">
<img style="display:none" id="image" width="300" height="350" src="" />
<center><canvas id="mystore1" width="200" height="200" style="background- color:#03F"></canvas></center>
<div class="frame" opacity:0.3><img id="face" width="80" height="80" class="frames" src="img/face.jpg" /></div>
</div>
<div data-role="content">
Larger
Smaller
Left
Right
</div>
<div data-role="content">
<a href="index2.html" data-role="button" data-iconpos="right" data- icon="arrow-r" data-theme="b" >Next</a>
</div>
</div>
</body>
My script goes here:
var pictureSource; // picture source
var destinationType; // sets the format of returned value
// Wait for PhoneGap to connect with the device
document.addEventListener("deviceready",onDeviceReady,false);
// Cordova is ready to be used!
//
function onDeviceReady() {
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
}
// Called when a photo is successfully retrieved
function onPhotoDataSuccess(imageData) {
// Uncomment to view the base64 encoded image data
var im=document.getElementById('image');
im.style.display = 'block';
im.src="data:img/jpeg;base64," +imageData;
// console.log(imageData);
}
// Called when a photo is successfully retrieved
function onPhotoURISuccess(imageURI) {
// Uncomment to view the image file URI
// console.log(imageURI);
var largeImage = document.getElementById('largeImage');
// Unhide image elements
//
largeImage.style.display = 'block';
// Show the captured photo
// The inline CSS rules are used to resize the image
//
largeImage.src = imageURI;
// Get image handle
var image = document.getElementById('image');
var imgCnt = document.getElementById('image_container');
// Unhide image container
imgCnt.style.display = 'block';
// Unhide image elements
image.style.display = 'block';
// Show the captured photo
// The inline CSS rules are used to resize the image
image.src = imageURI;
}
// A button will call this function
function capturePhoto() {
// Take picture using device camera and retrieve image as base64-encoded string
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,destinationType: destinationType.DATA_URL,
correctOrientation: true, targetWidth:200, targetHeigth:200 });
}
// A button will call this function
function getImage(source) {
// Retrieve image file location from specified source
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: source,correctOrientation: true });
}
// Called if something bad happens.
function onFail(message) {
alert('Failed because: ' + message);
}
// Called when capture operation is finished
function captureSuccess(mediaFiles) {
}
// Called if something bad happens.
function captureError(error) {
var msg = 'An error occurred during capture: ' + error.code;
navigator.notification.alert(msg, null, 'Uh oh!');
}
$("#capture").live('click',function(event){
capturePhoto();
});
$("#getImg").live('click',function(event){
getImage(pictureSource.SAVEDPHOTOALBUM);
});
$(document).live(function(e) {
$(".frame").draggable();
});
$("#large").live('click',function(event){
var wsize=$('img.frames').width();
var hsize=$('img.frames').height();
$('img.frames').width(wsize * 1.2);
$('img.frames').height(hsize * 1.2);
});
$("#small").live('click',function(event){
var wsize=$('img.frames').width();
var hsize=$('img.frames').height();
$('img.frames').width(wsize * 0.8);
$('img.frames').height(hsize * 0.8);
});
I'm not sure exactly where my issue lies, I'm relatively new to both canvas and JavaScript so I'm sorry if this is very vague but I cannot get my slideshow canvas to function, let alone display an image.
<!DOCTYPE html>
<html>
<head>
<title>PhotoGenesis</title>
<LINK REL=StyleSheet HREF="homecss.css" TYPE="text/css" MEDIA=screen>
<script type="text/javascript" src="homescript.js"></script>
</head>
<body onLoad="javascript:preloader()">
<header>
<a href=http://localhost.com/home><img id=logo alt="PhotoGenesis" src="logo.png""/> </a>
<nav id=headernav>
<a href=http://localhost.com/home>home</a>
<a href=http://localhost.com/news>news</a>
<a href=http://localhost.com/photography>photography</a>
<a href=http://localhost.com/video>video</a>
<script type="text/javascript">
var lightbox="lightbox ("+"0"+")";
document.write("<a href=http://localhost.come/lighbox>" + lightbox + "</a>");
</script>
<a href=http://localhost.com/about>about</a>
<a href=http://localhost.com/contact>contact</a>
<a href=http://localhost.com/blog>blog</a>
</nav>
<span id=search></span>
<img id=miscone alt="Full Screen" src="miscone.png"/>
<img id=misctwo alt="Share" src="misctwo.png"/>
</header>
<main onLoad="javascript:canvasslider()">
<canvas id="defaultbackground" width=100%; height=100%;/>
</main>
<footer>
<nav id="footernav">
<a href=http://www.facebook.com><img id="fbnav" alt="Facebook" src="fbooknav.png"/></a>
<a href=http://www.twitter.com><img id="tnav" alt="Twitter" src="twitternav.png"/></a>
<a href=http://www.stumbleupon.com><img id="snav" alt="StumbleUpon" src="stumblenav.png"/></a>
</nav>
</footer>
</body>
</html>
<script language="JavaScript">
function preloader()
{
// counter
var i = 0;
// create object
imageObj = new Image();
// set image list
images = new Array();
images[0]="background1.png"
images[1]="background2.png"
images[2]="background3.png"
// start preloading
for(i=0; i<=images.length; i++)
{
var backstring ="background"+i+".png";
images[i].id=backstring;
imageObj.src=images[i];
}
}
function canvasslide()
{
function init()
{
defaultbackground = document.getElementById("defaultbackground");
ctx = defaultbackground.getContext("2d");
for(i=0; i<=images.length; i++){
var backstring ="background"+i+".png";
sprite = document.getElementById(backstring);
ctx.drawImage(sprite,0,0);}
}
}
</script>
sprite.onload = function() {
ctx.drawImage(sprite,0,0);
}
I'm pretty sure your image isn't loaded yet when you draw it on canvas. Try something like this, I'm not sure this is the right code because I didn't get every part of your code, but you have to use image.onload function before you draw it onto a canvas.