[LØST] Refreshe side ved scriptslutt

lefsaker · 3. september 2008

Må begynne med å si at jeg er totalt n00b innenfor Javascript, men jeg holder på med et infoscreensystem som bruker PHP og mySQL til å hente ut bilder/tekst til skjermene.

Jeg bruker følgende galleri-slideshow-script:

http://smoothslideshow.jondesign.net/

Basert på mootools.release.83

timed-slideshow.js

var timedSlideShow = Class.create();

// implementing the class
timedSlideShow.prototype = {
initialize: function(element, data) {
	this.currentIter = 0;
	this.lastIter = 0;
	this.maxIter = 0;
	this.slideShowElement = element;
	this.slideShowData = data;
	this.slideShowInit = 1;
	this.slideElements = Array();
	this.slideShowDelay = 15000;
	this.articleLink = "";
	this.slideInfoZone = "";

	element.style.display="block";

	this.articleLink = document.createElement('a');
	this.articleLink.className = 'global';
	element.appendChild(this.articleLink);
	this.articleLink.href = "";

	this.maxIter = data.length;
	for(i=0;i<data.length;i++)
	{
		var currentImg = document.createElement('div');
		currentImg.className = "slideElement";
		currentImg.style.position="absolute";
		currentImg.style.left="0px";
		currentImg.style.top="0px";
		currentImg.style.margin="0px";
		currentImg.style.border="0px";
		currentImg.style.backgroundImage="url('" + data[i][0] + "')";
		currentImg.style.backgroundPosition="center center";

		this.articleLink.appendChild(currentImg);
		currentImg.currentOpacity = new fx.Opacity(currentImg, {duration: 400});
		currentImg.setStyle('opacity',0);
		this.slideElements[parseInt(i)] = currentImg;
	}

	this.loadingElement = document.createElement('div');
	this.loadingElement.className = 'loadingElement';
	this.articleLink.appendChild(this.loadingElement);

	this.slideInfoZone = document.createElement('div');
	this.slideInfoZone.className = 'slideInfoZone';
	this.articleLink.appendChild(this.slideInfoZone);
	this.slideInfoZone.style.opacity = 0;

	this.doSlideShow();
},
destroySlideShow: function(element) {
	var myClassName = element.className;
	var newElement = document.createElement('div');
	newElement.className = myClassName;
	element.parentNode.replaceChild(newElement, element);
},
startSlideShow: function() {
	this.loadingElement.style.display = "none";
	this.lastIter = this.maxIter - 1;
	this.currentIter = 0;
	this.slideShowInit = 0;
	this.slideElements[parseInt(this.currentIter)].setStyle('opacity', 1);
	setTimeout(this.showInfoSlideShow.bind(this),1000);
	setTimeout(this.hideInfoSlideShow.bind(this),this.slideShowDelay-1000);
	setTimeout(this.nextSlideShow.bind(this),this.slideShowDelay);
},
nextSlideShow: function() {
	this.lastIter = this.currentIter;
	this.currentIter++;
	if (this.currentIter >= this.maxIter)
	{
		this.currentIter = 0;
		this.lastIter = this.maxIter - 1;
	}
	this.slideShowInit = 0;
	this.doSlideShow.bind(this)();
},
doSlideShow: function() {
	if (this.slideShowInit == 1)
	{
		imgPreloader = new Image();
		// once image is preloaded, start slideshow
		imgPreloader.onload=function(){
			setTimeout(this.startSlideShow.bind(this),10);
		}.bind(this);
		imgPreloader.src = this.slideShowData[0][0];
	} else {
		if (this.currentIter != 0) {
			this.slideElements[parseInt(this.currentIter)].currentOpacity.options.onComplete = function() {
				this.slideElements[parseInt(this.lastIter)].setStyle('opacity',0);
			}.bind(this);
			this.slideElements[parseInt(this.currentIter)].currentOpacity.custom(0, 1);
		} else {
			this.slideElements[parseInt(this.currentIter)].setStyle('opacity',1);
			this.slideElements[parseInt(this.lastIter)].currentOpacity.custom(1, 0);
		}
		setTimeout(this.showInfoSlideShow.bind(this),1000);
		setTimeout(this.hideInfoSlideShow.bind(this),this.slideShowDelay-1000);
		setTimeout(this.nextSlideShow.bind(this),this.slideShowDelay);
	}
},
showInfoSlideShow: function() {
	this.articleLink.removeChild(this.slideInfoZone);
	this.slideInfoZone = document.createElement('div');
	this.slideInfoZone.styles = new fx.Styles(this.slideInfoZone);
	this.slideInfoZone.setStyle('opacity',0);
	var slideInfoZoneTitle = document.createElement('h2');
	slideInfoZoneTitle.innerHTML = this.slideShowData[this.currentIter][2]
	this.slideInfoZone.appendChild(slideInfoZoneTitle);
	var slideInfoZoneDescription = document.createElement('p');
	slideInfoZoneDescription.innerHTML = this.slideShowData[this.currentIter][3];
	this.slideInfoZone.appendChild(slideInfoZoneDescription);
	this.articleLink.appendChild(this.slideInfoZone);
	this.articleLink.href = this.slideShowData[this.currentIter][1];
	this.slideInfoZone.className = 'slideInfoZone';
	this.slideInfoZone.normalHeight = this.slideInfoZone.getStyle('height', true).toInt();
	this.slideInfoZone.styles.custom({'opacity': [0, 0.7], 'height': [0, this.slideInfoZone.normalHeight]});
},
hideInfoSlideShow: function() {
	this.slideInfoZone.styles.custom({'opacity': [0.7, 0]});
}
};

function initTimedSlideShow(element, data) {
var slideshow = new timedSlideShow(element, data);
}

function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
	window.onload = func;
} else {
	window.onload = function() {
		oldonload();
		func();
	}
}
}

For at innholdet på infoskjermene alltid skal være oppdatert ønsker jeg at hver gang presentasjonen av alle skjermbildene er ferdig, skal den laste siden på nytt (for å kjøre mysql-query og oppdatere innholdet), istedenfor å loope presentasjonen.

Er dette vanskelig å få til?

Trenger dere flere filer?

Endret 8. september 2008 av lefsaker

Garanti · 3. september 2008

Kan du ikke bare slenge på en

window.location.href = window.location.pathname

på slutten da?

lefsaker · 3. september 2008

Greia er at jeg er såpass blank på JS at jeg ikke vet hvor scriptet forteller at det skal loopes

Endret 3. september 2008 av lefsaker

lefsaker · 4. september 2008

Den skulle i alle fall ikke på bunnen

lefsaker · 5. september 2008

Søkte litt på forumene deres, men ingen tråder der som omhandlet det jeg ville.

Postet en tråd i går kveld, men ingen svar foreløpig.

Jeg er villig til å betale for å få dette til å funke.

hishadow · 6. september 2008

Har ikke mulighet for å hjelpe deg, men du kan ordne det ved bruk at et ajax api (som jQuery). Det krever en del koding og muligens endring i galleri-koden. Utførelse vil være noe ala:

1. Gjør et xmlhttprequest (dette ordner ajax api) mot server og hent inn galleri data.

2. Konfigurer galleri med data.

3. Ordne en callback funksjon for når galleri er ferdig.

4. Galleri ferdig callback -> start på nytt.

Endret 6. september 2008 av hishadow

Drømmemannen · 7. september 2008

Må begynne med å si at jeg er totalt n00b innenfor Javascript, men jeg holder på med et infoscreensystem som bruker PHP og mySQL til å hente ut bilder/tekst til skjermene.

Jeg bruker følgende galleri-slideshow-script:

http://smoothslideshow.jondesign.net/

Basert på mootools.release.83

timed-slideshow.js

var timedSlideShow = Class.create();

// implementing the class
timedSlideShow.prototype = {
initialize: function(element, data) {
	this.currentIter = 0;
	this.lastIter = 0;
	this.maxIter = 0;
	this.slideShowElement = element;
	this.slideShowData = data;
	this.slideShowInit = 1;
	this.slideElements = Array();
	this.slideShowDelay = 15000;
	this.articleLink = "";
	this.slideInfoZone = "";

	element.style.display="block";

	this.articleLink = document.createElement('a');
	this.articleLink.className = 'global';
	element.appendChild(this.articleLink);
	this.articleLink.href = "";

	this.maxIter = data.length;
	for(i=0;i<data.length;i++)
	{
		var currentImg = document.createElement('div');
		currentImg.className = "slideElement";
		currentImg.style.position="absolute";
		currentImg.style.left="0px";
		currentImg.style.top="0px";
		currentImg.style.margin="0px";
		currentImg.style.border="0px";
		currentImg.style.backgroundImage="url('" + data[i][0] + "')";
		currentImg.style.backgroundPosition="center center";

		this.articleLink.appendChild(currentImg);
		currentImg.currentOpacity = new fx.Opacity(currentImg, {duration: 400});
		currentImg.setStyle('opacity',0);
		this.slideElements[parseInt(i)] = currentImg;
	}

	this.loadingElement = document.createElement('div');
	this.loadingElement.className = 'loadingElement';
	this.articleLink.appendChild(this.loadingElement);

	this.slideInfoZone = document.createElement('div');
	this.slideInfoZone.className = 'slideInfoZone';
	this.articleLink.appendChild(this.slideInfoZone);
	this.slideInfoZone.style.opacity = 0;

	this.doSlideShow();
},
destroySlideShow: function(element) {
	var myClassName = element.className;
	var newElement = document.createElement('div');
	newElement.className = myClassName;
	element.parentNode.replaceChild(newElement, element);
},
startSlideShow: function() {
	this.loadingElement.style.display = "none";
	this.lastIter = this.maxIter - 1;
	this.currentIter = 0;
	this.slideShowInit = 0;
	this.slideElements[parseInt(this.currentIter)].setStyle('opacity', 1);
	setTimeout(this.showInfoSlideShow.bind(this),1000);
	setTimeout(this.hideInfoSlideShow.bind(this),this.slideShowDelay-1000);
	setTimeout(this.nextSlideShow.bind(this),this.slideShowDelay);
},
nextSlideShow: function() {
	this.lastIter = this.currentIter;
	this.currentIter++;
	if (this.currentIter >= this.maxIter)
	{
		this.currentIter = 0;
		this.lastIter = this.maxIter - 1;
	}
	this.slideShowInit = 0;
	this.doSlideShow.bind(this)();
},
doSlideShow: function() {
	if (this.slideShowInit == 1)
	{
		imgPreloader = new Image();
		// once image is preloaded, start slideshow
		imgPreloader.onload=function(){
			setTimeout(this.startSlideShow.bind(this),10);
		}.bind(this);
		imgPreloader.src = this.slideShowData[0][0];
	} else {
		if (this.currentIter != 0) {
			this.slideElements[parseInt(this.currentIter)].currentOpacity.options.onComplete = function() {
				this.slideElements[parseInt(this.lastIter)].setStyle('opacity',0);
			}.bind(this);
			this.slideElements[parseInt(this.currentIter)].currentOpacity.custom(0, 1);
		} else {
			this.slideElements[parseInt(this.currentIter)].setStyle('opacity',1);
			this.slideElements[parseInt(this.lastIter)].currentOpacity.custom(1, 0);
		}
		setTimeout(this.showInfoSlideShow.bind(this),1000);
		setTimeout(this.hideInfoSlideShow.bind(this),this.slideShowDelay-1000);
		setTimeout(this.nextSlideShow.bind(this),this.slideShowDelay);
	}
},
showInfoSlideShow: function() {
	this.articleLink.removeChild(this.slideInfoZone);
	this.slideInfoZone = document.createElement('div');
	this.slideInfoZone.styles = new fx.Styles(this.slideInfoZone);
	this.slideInfoZone.setStyle('opacity',0);
	var slideInfoZoneTitle = document.createElement('h2');
	slideInfoZoneTitle.innerHTML = this.slideShowData[this.currentIter][2]
	this.slideInfoZone.appendChild(slideInfoZoneTitle);
	var slideInfoZoneDescription = document.createElement('p');
	slideInfoZoneDescription.innerHTML = this.slideShowData[this.currentIter][3];
	this.slideInfoZone.appendChild(slideInfoZoneDescription);
	this.articleLink.appendChild(this.slideInfoZone);
	this.articleLink.href = this.slideShowData[this.currentIter][1];
	this.slideInfoZone.className = 'slideInfoZone';
	this.slideInfoZone.normalHeight = this.slideInfoZone.getStyle('height', true).toInt();
	this.slideInfoZone.styles.custom({'opacity': [0, 0.7], 'height': [0, this.slideInfoZone.normalHeight]});
},
hideInfoSlideShow: function() {
	this.slideInfoZone.styles.custom({'opacity': [0.7, 0]});
}
};

function initTimedSlideShow(element, data) {
var slideshow = new timedSlideShow(element, data);
}

function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
	window.onload = func;
} else {
	window.onload = function() {
		oldonload();
		func();
	}
}
}

For at innholdet på infoskjermene alltid skal være oppdatert ønsker jeg at hver gang presentasjonen av alle skjermbildene er ferdig, skal den laste siden på nytt (for å kjøre mysql-query og oppdatere innholdet), istedenfor å loope presentasjonen.

Er dette vanskelig å få til?

Trenger dere flere filer?

I nextSlideShow-funksjonen, inne i if-testen: Bytt ut de to linjene som resetter tellerne med location.reload()

Bør gjøre susen.

lefsaker · 8. september 2008

Du er virkelig en drømmemann <3

Det fungerte perfekt, og nå oppdateres innholdet hver runde

Hjertlig takk :love:

Logg inn

[LØST] Refreshe side ved scriptslutt

Anbefalte innlegg

lefsaker

Videoannonse

Garanti

lefsaker

lefsaker

lefsaker

hishadow

Drømmemannen

lefsaker

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer