Changing pictures every 5 seconds using jquery in php [closed] - javascript

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
Please help me I am new in jQuery.
here is my code:
<img src="default.jpg" />
<img src="a.jpg" />
<img src="b.jpg" />
<img src="c.jpg" />
I want to change the picture from default.jpg to a.jpg. then a.jpg to to b.jpg and so on, every 5 seconds. using jquery. Thanks a lot

<img id="thisImg" alt="img" src="images/img0.png"/>
<script type="text/javascript">
$(function(){
//prepare Your data array with img urls
var dataArray=new Array();
dataArray[0]="images/img1.png";
dataArray[1]="images/img2.png";
dataArray[2]="images/img3.png";
dataArray[3]="images/img0.png";
//start with id=0 after 5 seconds
var thisId=0;
window.setInterval(function(){
$('#thisImg').attr('src',dataArray[thisId]);
thisId++; //increment data array id
if (thisId==3) thisId=0; //repeat from start
},5000);
});
</script>

Set this in head
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
jquery code
setInterval(function(){
$('#img').remove();
$('body').prepend('<img src="urlimgs" id="img">');
},5000);
I didn't understand what you want but it is so basic! You need learn more about jquery..
You can improve this code.. it is only a example

Related

How to Embedded JQuery code in a php variable? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I want to embedded the below jquery code in the following php variable $var
JQUERY Code:
<img src="images/image.png" id="Image1" alt="" style="width:30px;height:30px;">
PHP Code:
<?php $var = 'my_jquery_code'; return $var; ?>
You just need to escape the single quotes:
<?php
$var ='<img src="images/image.png" id="Image1" alt="" style="width:30px;height:30px;">';
return $var;
The only reasonable scenario I can think of where you would want to use onclick would be if you're dynamically loading the anchor element.
If so, this is probably better.
[script]
$(document).on('click', '.my_class_here', function() {
$('jQueryDialog1').dialog('open');
});
[/script]
[link_template]
...
[/link_template]
Then you would use AJAX or whatever voodoo you like to retrieve the link template (maybe while passing it some variables?) and add it to the page.
Alternatively, you can use $(document).find('.my_class_here').on('click', function... , but this is bad, performance wise.

Onclick image the gallery opens [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I am working on a mobile application, I am trying to make an image as a button: I have an image and I want to click on it, then when I click the mobile gallery opens so that I can upload a photo.
Any help please?
I think, you want to open file-uploader on image button click! Right?
If so, you can use pure javascript / jQuery as following:
HTML:
<div id="profilepic">
<input id="fileSelector" type="file" name="file" accept="image/*" capture="camera" />
<button id="clickButton" onClick="openFileUpload();"><img src="Images/profilepic.png" width="170" height="170"/></button>
</div>
For jQuery append this to head of your document:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Wrap following code in head too.
JQuery:
$(document).ready(function(){
$('#clickButton').on('click', function(){
$('#fileSelector').click();
});
});
OR Javascript:
function openFileUpload(){
document.getElementById('fileSelector').click();
}
http://jsfiddle.net/mas5qr1o/1/
See demo here:
jQuery DEMO
Javascript DEMO
Try the following jquery
$('#clickButton').on('click', function(){
$('#fileSelector').trigger('click');
});
DEMO

JavaScript/jQuery code in (blogger) post? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
How to paste JavaScript/jQuery code in blogger post?
Such like jsfiddle.net/tTman
It didn't work, don't know what I miss?
Please guide me the correct way to achieve my objective .
(Newbie learning)
My guess would be that you did not load the jquery library. Pasting the following code in the HTML view of a blog-post should work:
<img id="b" src="http://www.web-press.it/folder/servizi_cloud.jpg" id="b" style="position:absolute; top:50px"/>
<!-- Loading the required JQuery library -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function moveRight(){
$("#b").animate({left: "+=300"}, 2000,moveLeft)
}
function moveLeft(){
$("#b").animate({left: "-=300"}, 2000,moveRight)
}
$(document).ready(function() {
moveRight();
});
</script>
follow this path:
blogger.com -> Template -> Edit HTML
and past your javascript/jquery codes before </head>
<script type="text/javascript">
function moveRight(){
$("#b").animate({left: "+=300"}, 2000,moveLeft)
}
function moveLeft(){
$("#b").animate({left: "-=300"}, 2000,moveRight)
}
$(document).ready(function() {
moveRight();
});
</script>
see pic:
now!
go to Layout and add a gadget and input your HTML code into that!
<img id="b" src="http://www.web-press.it/folder/servizi_cloud.jpg" id="b" style="position:absolute; top:50px"/>
see pic:
Notice:
you must add Jquery libararies before your Jquery codes
if you want to show this effects only in posts, go to
blogger.com -> New Posts
and in edditor box, click on HTML and past your HTML Codes into that

Keep a running total [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have a list of items in my app that have radio buttons on them. As I change the settings on the radio buttons, I want to update the running total at the bottom of the page. How do I set up the running totals?
This has some flaws to it, but it should get you started:
<html>
<head>
<script>
var total = 0;
function count(input) {
if(input.checked) {
total++;
}
document.getElementById('total').innerHTML = total;
}
</script>
</head>
<body>
<input type="radio" id="radio1" onclick="count(this);"/>Radio 1
<span id="total">0</span>
</body>
</html>

Script from foreign site cannot be handled inside div [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have got this certain script from a site. I put it on a div. I want to do something like this. http://www.upesspe.org/ But I can't tackle with the script in any way.
http://oil-price.net/dashboard.php?lang=en
Javascript
< script > $(document).ready(function () {
$('#first').click(function () {
$('#wti').slideDown(500);
});
$('.script').mouseLeave(function() {
$('#wti').slideUp(500);
});
}); < /script>
HTML
<div class="script">
<div id="first" class="header_06">WTI Crude Oil</div>
<div id="wti">
<script type="text/javascript" src="http://www.oil-price.net/TABLE2/gen.php?lang=en">
</script>
<noscript>To get the WTI oil price, please enable Javascript.</noscript>
</div>
</div>
DEMO: http://jsfiddle.net/rockyddev/9csnk/5/
PS - I updated
mouseLeave should be in lower case and remove the <script> tags in jQuery. Try with the following code:
$(document).ready(function () {
$('#first').click(function(){
$('#wti').slideDown();
});
$('.script').mouseleave(function() {
$('#wti').slideUp(500);
});
});

Categories