I have a folder where are saved images from a webcam each X time.
I want to use these image to create a slideshow without transitions effects or music => i want to make a timelaps!
These slideshow must be dynamic (i can use php to build the list of image, each time a user want to watch the "video").
Any sugguestion and code to do this? Javascript? Php? or others??
Thanx!
That's the best way i found: simple and speedy
<HTML>
<HEAD>
<TITLE>Video</TITLE>
</HEAD>
<BODY BGCOLOR="#000000">
<img name="foto">
<SCRIPT LANGUAGE="JavaScript">
var Pic = new Array();
Pic[0] = '/images/image1.jpg'
Pic[1] = '/images/image2.jpg'
Pic[2] = '/images/image3.jpg'
//this part in real code is replaced with a PHP script that print image location dinamically
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
//all images are loaded on client
index = 0;
function update(){
if (preLoad[index]!= null){
document.images['foto'].src = preLoad[index].src;
index++;
setTimeout(update, 1000);
}
}
update();
</script>
</BODY>
</HTML>
Have your PHP script send a meta refresh tag in the heading to reload the page with the latest image after the desired time.
NOTE: There are better, more AJAX-like ways of doing this, but this is the simplest. Using AJAX to reload just the image and not the whole page would be harder to write but a better user experience.
Related
i have a website/(mobile, app created with phone gap build), in this site i load some arrays with php into javascript to show some ads. on website it's work very well, but on the mobile apps (iOS and android) i got an empty space. if i fill the array variables in js directly, it works in all versions of the site web and mobile.
the problem is i have about 460 different ads to show. i like to load about 20 ads into js when users start or load the site/app in php i read the mysql db and load these ads witch shown less. after showing the ads, ads-couter +1 .(didn't show it here)
the reason why i'm doing this so, is, because i did'n find something to monetize my html5 css3 query web app, compiled with phone gap build.
now can someone show me or explain me why it works on web but not on app, or why it works both when i fill the variable in js direct??
my php works fine -> to js
in js i have this:
// werbung
function werbung_fill(){
id = new Array;
comment_start = new Array;
bannerLinks = new Array;
adBanners = new Array;
bannerTargets = new Array;
dimension = new Array;
comment_end = new Array;
aktiv = new Array;
angezeigt = new Array;
lasttime = new Array;
$.getJSON('inc/werbung_call.php', function(data) {
/* data will hold the php array as a javascript object */
$.each(data, function(key, val) {
id.push(val.id);
comment_start.push(val.comment_start);
bannerLinks.push(val.bannerLinks);
adBanners.push(val.adBanners);
bannerTargets.push(val.bannerTargets);
dimension.push(val.dimension);
comment_end.push(val.comment_end);
aktiv.push(val.aktiv);
angezeigt.push(val.angezeigt);
lasttime.push(val.lasttime);
});
});
}
function werbung(){
var randNum = Math.floor(Math.random() * (19 - 0 + 1)) + 0;
var topAdBanner = $('#topad > a > img');
var newcomment_start = comment_start[randNum];
var newBannerImg = adBanners[randNum];
var newBannerLink = bannerLinks[randNum];
var newBannerTarget = bannerTargets[randNum];
var newdimension = dimension[randNum];
var newcomment_end = comment_end[randNum];
// update new img src and link HREF value
$(topAdBanner).attr('src',newBannerImg);
$('#topad > a').attr('href',newBannerLink);
$('#topad > a').attr('target',newBannerTarget);
$('#topad > a').attr('alt',newdimension);
var deinTimer = window.setTimeout(werbung, 5000);
//$('#topad1').html(id[randNum]);
}
in
$(document).ready(function() {
// werbungs banner
$('<div id="topad"><img src="" width="320" height="50" alt="" border="0"></div><!-- #end #topad -->').prependTo( $( "#hauptheader" ) );
// werbung
werbung_fill();
werbung();
// werbung
}
with this, i can inject a div without compiling the apps again. (it works fine)
the js, php, index.html are on the same server and the compiled apps use the js css images from server too.
You have a few syntax errors in your JavaScript. You should validate your JavaScript here: http://www.jshint.com/
I suspect Android isn't parsing this correctly:
id = new Array;
Suggest using this syntax instead:
var id = [];
I searched, but did not find the answer to this.
I have a website that displays hundreds of images in thumbnail format. I'm currently using php to display all of the images in thumbnail, then when the thumbnail is clicked upon to display the images in full-size.
What I would like to do is be able to click on a thumbnail and see the resulting full-size image, then at that point be able to scroll both back and forth through the full-size images without going back to the thumbnails.
As an added feature, when viewing the thumbnails, I would like to only load the ones that are currently displayed on the client page...ie - if the client screen resolution supports 20, then load only 20 and wait to load the rest on the client until the user scrolls down. The primary client in this use case is an iphone.
Thanks in advance!
you need to use a slider jquery plugin
Like
Jquery Light Box Plugin
When you click on the image, it should point to a new PHP file containing the full size image, or even better, load it in a new <div> with php you can get the client resolution with other tools
You actual have two seperate questions. One is to show the thumbs fullsize and be able to click to the next image. Almost every plugin to show images has that options. Personally i use fancybox, but pick anyone you like. To enable the next/prev buttons you need to group the images useing the rel tag.
Now to load the images per page, similar to google does it, you need to load it all in by javascript. Below is a setup of how you could do it. This is untested, as I did not have an image gallery at hand.
In the code below I load all images into the array at once, which is not perfect when you have a lot of images (like 1000+). In that case your better of using AJAX to load a new page. But if you have a smaller amount of images, this will be faster.
<script>
//simple JS class to store thumn and fullimage url
function MyImage(thumbnail, fullimage, imgtitle) {
this.thumb = thumbnail;
this.full = fullimage;
this.title = imgtitle;
}
//array that holds all the images
var imagesArray = new Array();
var currentImage = 0;
<?php
//use php code to loop trough your images and store them in the array
//query code to fetch images
//each row like $row['thumb'] and $row['full'] and $row['title'];
while ($row = mysqli_fetch_assoc($result))
{
echo "imagesArray.push(new MyImage('".$row['thumb']."', '".$row['full']."', '".$row['title']."'));";
}
?>
//the thumb width is the width of the full container incl. padding
//In this case I want to use 50x50 images and have 10px on the right and at the bottom. Which results in 60x60
var thumbWidth = 60;
var thumbHeight = 60;
var screenWidth = $('body').width();
var screenHeight = $('body').height();
var maxImagesPerRow = Math.round(screenWidth / thumbWidth);
var maxImagesPerCol = Math.round(screenHeight / thumbHeight);
var totalImagesPerPage = maxImagesPerRow * maxImagesPerCol;
//function to load a new page
//assuming you use jquery
function loadNextPage() {
var start = currentImage;
var end = currentImage + totalImagesPerPage;
if (end >= imagesArray.length) {
end = imagesArray.length - 1;
}
if (end<=start)
return; //last images loaded
$container = $('#thumbnailContainer'); //save to var for speed
$page = $('<div></div>'); //use a new container, not on stage, to prevent the dom for reloading everything on each iteration of the loop
for (start;start<=end;start++) {
//add a new thumbnail to the page
$page.append('<div style="margin:0;padding:0 10px 10px 0;"><a class="fancybox" rel="mygallery" href="'+imagesArray[start].full+'" title="'+imagesArray[start].title+'"><img src="'+imagesArray[start].thumb+'" alt="" /></a></div>');
}
currentImage = start;
//when all images are added to the page, add the page to the container.
$container.append($page);
}
$(function() {
//when loading ready, load the first page
loadNextPage();
});
//function to check if we need to load a new page
function checkScroll() {
var fromTop = $('body').scrollTop();
//page with a 1-based index
var page = 1 + Math.round(fromTop / screenHeight);
var loadedImages = page*totalImagesPerPage;
if (loadedImages==currentImage) {
//we are scrolling the last loaded page
//load a new page
loadNextPage();
}
}
window.onscroll = checkScroll;
</script>
<body>
<div id='thumbnailContainer'></div>
</body>
I have a sql query that pulls an array that contains file paths to my images.
It is store in the variable $rows and I can access individual paths by indexing throught...
IE.
$rows[0]...$rows[n]
How can I utilize java script to step through this.
Final goal is for the picture to appear with a "Next" "Previous" button under it.
Hitting next would show the next image (without a refresh)
echo $rows[0];
would print
images/a.png
Maybe using PHP's json functions you can convert your PHP array to a js array... and then use javascript functions to control which picture to show
<script type="text/javascript">
var images = <?php echo json_encode($rows) ?>, counter = 0;
function prevImage() {
counter = (counter<=0)?images.length-1:counter-1;
var i = document.getElementById('myImage');
i.src = images[counter];
}
function nextImage() {
counter = (counter==images.length-1)?0:counter+1;
var i = document.getElementById('myImage');
i.src = images[counter];
}
</script>
and
<img src="img/0.jpg" id="myImage" />
Previous - Next
Here is a little example to move your php array to a javascript array:
<?php
$row = array("image/image1","image/image2","image/image3");
?>
<html>
<head>
<title>Sample Array</title>
<script>
var jsArray = new Array();
<?php
for ($i=0; $i<3; $i++)
{
echo "jsArray[$i] = '$row[$i]';";
}
?>
for(i = 0; i < jsArray.length;i++)
{
alert(jsArray[i]);
}
</script>
</head>
<body>
<span>Sample Array</span>
</body>
</html>
Good luck!
Get your PHP array (server-side) to Javascript (clientside)
There are quite a few ways to go about doing this, but I'd recommend JSON. It has numerous advantages, but the most obvious one is you can store arrays and javascript objects as a string. If you're not familiar with it, this would be an excellent time to start including it in your workflow, considering you have to deal with Javascript.
PHP
Turn Array to JSON:
$jsonResults = json_encode($arrayOfResults);
Get JSON from PHP to Javascript:
<script>
var myAppsData = {};
myAppsData.slideshowJSON = JSON.parse($jsonResults);
</script>
Now your JSON object is accessible to Javascript at myAppsData.slideshowJSON.
The rest of the work is as simple as iterating through the object with a for loop (just like you would in PHP), grabbing the content and doing what you want with it.
Cheers!
a group images are calling in a div and there we have given an option to rotate images if required.
Actually the image is rotating but it is not showing in the page( without doing 2 or 3 manual page refresh).
I have added
<meta HTTP-EQUIV="Pragma" content="no-cache"/>
<meta HTTP-EQUIV="Cache-Control" content="no-cache"/>
at head
also done
if(isset($_GET['re'])=='re')
{
?>
<script language="JavaScript" type="text/javascript">
var reloaded = false;
var loc=""+document.location;
loc = loc.indexOf("?reloaded=")!=-1?loc.substring(loc.indexOf("?reloaded=")+10,loc.length):"";
loc = loc.indexOf("&")!=-1?loc.substring(0,loc.indexOf("&")):loc;
reloaded = loc!=""?(loc=="true"):reloaded;
function reloadOnceOnly() {
if (!reloaded)
window.location.replace(window.location+"?reloaded=true");
}
reloadOnceOnly(); //You can call this via the body tag if desired
</script>
<?php
}
But it is not showing the new rotated or changed image without another manual refresh.
Could you please help me on this?
Why not
<script>
function rotate(imgId,direction) {
var img = document.getElementById(imgId);
img.src=img.src.split("rotation=")[0]+"rotation="+direction+"&rnd="+new Date().getTime();
return false;
}
</script>
<img id="image1" src="getimage.php?name=image1&rotation=0" /><br />
Reset
90°
180°
270°
If I understand you correctly, you're trying to use a PHP to code to refresh the webpage? However, the issue here is that once the PHP is output to the client, you can't have control over it already. The best thing to do in this context is to use JavaScript to do the refresh for you. Hope it helps :)
Hi Merlin, you might want to use a simpler logic like this:
<script type="text/javascript">
var reloaded = false;
var loc=""+document.location;
loc = loc.indexOf("?reloaded=");
if (loc == -1){
window.location.replace(window.location+"?reloaded=true");
}
</script>
Optionally you might want to pack it into a function for your use. Hope it helps (:
I have a Flash movie that is embeded in a PHP page. The PHP page displays a value to the user (the number of images they have uploaded). When the user uploads a new image I want the value on the PHP page to reflect the change without refreshing the page.
This value is retrieved from database using MySQL. So heres what Ive done so far -
On the PHP page where I want to show the value I have a div
<div id="content_info"><script type="text/javascript" src="getInfo.php?group= <?php echo($groupid); ?> "></script></div>
This calls an external PHP file that queries the database and outputs the result like this
Header("content-type: application/x-javascript");
//do the query with PHP and get $number and then output
echo "document.write(\" (".$number.")\")";
When the page loads for the first time the correct number shows in the div and so all works fine. The next step is to call something to update the contents of this div when the value changes. So I will set up externalInterface in flash to call a javascript function to do this.
This is where Im stuck, I want to be able to do something like this -
function ReplaceContentInContainer(id) {
var container = document.getElementById(id);
container.innerHTML = getInfo.php?type=new&group= <?php echo($groupid) ?>;
}
and call this by
ReplaceContentInContainer(content_info)
I realise this isnt going to work but can anyone show me how to get this result?
many thanks
group= <?php echo($groupid); ?> will be executed only when PHP creates the page. You should store that value inside a variable in the javascript. See if this works.
<div id="scriptDiv">
<script type="text/javascript">
<!-- store the group id -->
var groupID = <?php echo($groupid); ?>;
function getGroupID()
{
return groupID;
}
function updateValue(value)
{
document.getElementById("content_info").innerHTML = value;
}
</script>
<div id="content_info">
<!-- for initial value -->
<script type="text/javascript"
src="getInfo.php?group= <?php echo($groupid); ?> ">
</script>
</div>
</div>
Now you can use flash's URLLoader:
var ldr:URLLoader = new URLLoader();
var gid:String = ExternalInterface.call("getGroupID");
var req:URLRequest = new URLRequest("getInfo.php");
req.data = {type:"new", group:gid};
ldr.addEventListener(Event.COMPLETE, onLoad);
ldr.addEventListener(IOErrorEvent.IO_ERROR, onError);
ldr.load(req);
private function onLoad(e:Event):void
{
var data:String = URLLoader(e.target).data;
ExternalInterface.call("updateValue", data);
}
private function onError(e:IOErrorEvent):void
{
trace("ioError");
}