Jump to content

HTML

masondb

I have a website that is a simple slide show it plays on a tv. I need the slide show to update without refreshing. if there is a new slide show it can but if there is not in the 5 sec period then nothing will happen.

Link to comment
Share on other sites

Link to post
Share on other sites

you probably will need to use javascript or php. Can show the code. that might help too. :)

Live life as you want to

Link to comment
Share on other sites

Link to post
Share on other sites

The best way to do that is with javascript

You could use something like a counter to count the time and change the image

Link to comment
Share on other sites

Link to post
Share on other sites

I am needing the website to update if there is a new slide show. Without refeshing the page.

Link to comment
Share on other sites

Link to post
Share on other sites

With javascript doesn't require refreshing the page check this playlist for more info

Also you could try AJAX which allows for refreshing a section of the page without having to refresh the entire page

Check his

for more information, it's a playlist from The New Boston youtube channel
Link to comment
Share on other sites

Link to post
Share on other sites

Use setInterval to call an asynchronous request every 5 seconds. In the callback function, update the section you want when required.

Link to comment
Share on other sites

Link to post
Share on other sites

Um I did HTML script when i was 7 out of a book and now am 14 may ask more questions

Link to comment
Share on other sites

Link to post
Share on other sites

HTML script... hum, I think you may need to take a look at some basic Javascript tutorials before you delve into more advanced Ajax / Asynchronous calls.

Link to comment
Share on other sites

Link to post
Share on other sites

I'd recommend you learn JQuery, PHP, MySQL, and possibly more advanced HTML. The web is a very broad range of technologies, so it's all about what new things you can bring to the table, and the most effective way of delivering them.

Link to comment
Share on other sites

Link to post
Share on other sites

yeah i'm more of a hardware guy sorry I didn't mean HTML Script I just meant HTML. I like João Severino idea though.

Link to comment
Share on other sites

Link to post
Share on other sites

I don't really want to "learn it" sorry...I just need some basic code and some explanations. Thank you guys for all the help so far!

Link to comment
Share on other sites

Link to post
Share on other sites

The code I showed I've tried and it changes the image and doesn't need to refresh the page but try it your self with a folder and a couple of images in it

Link to comment
Share on other sites

Link to post
Share on other sites

João Severino you are awesome man and Tim3Shift3r and so are you man thanks now do those auto update without refreshing?

its sort of an internal system that keeps changing the source of the picture, and that lets the picture 'refresh' and not the entire page
Link to comment
Share on other sites

Link to post
Share on other sites

Here is something I've done recently. This is just a generic slider/rotator, you can just adjust the CSS to fit its size to your liking.




IMAGE_URL1
IMAGE_URL2
IMAGE_URL3

and your javascript. Be sure to have jQuery also included.


$(window).load(function() {
$('#image-rotator img:not(:first)').hide();
$('#image-rotator img').css('position', 'absolute');
$('#image-rotator img').css('top', '0px');
$('#image-rotator img').css('left', '50%');
$('#image-rotator img').each(function() {
var img = $(this);
$('').attr('src', $(this).attr('src')).load(function() {
img.css('margin-left', -this.width / 2 + 'px');
});
});

var pause = false;

function fadeNext() {
$('#image-rotator img').first().fadeOut().appendTo($('#image-rotator'));
$('#image-rotator img').first().fadeIn();
}


function fadePrev() {
$('#image-rotator img').first().fadeOut();
$('#image-rotator img').last().prependTo($('#image-rotator')).fadeIn();
}

$('#image-rotator, #next').click(function() {
fadeNext();
});

$('#prev').click(function() {
fadePrev();
});

$('#image-rotator, .button').hover(function() {
pause = true;
},function() {
pause = false;
});


function doRotate() {
if(!pause) {
fadeNext();
}
}

var rotate = setInterval(doRotate, 5000);
});

Link to comment
Share on other sites

Link to post
Share on other sites

I will post my results when I get to it. Will be working on it this weekend. Thnx to everyone for the help, it really helped a lot!!

Link to comment
Share on other sites

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×