Afb. in schuifbalk random uit een (of meerdere) directory's halen?

Status
Niet open voor verdere reacties.
B

BJMarc

Gebruiker
Lid geworden
23 mrt 2010
Berichten
33
Hallo,

Ik heb het volgende script werken, maar wil het uitbreiden. Het liefst zodat er afbeeldingen random uit meerdere aangegeven directory's worden gehaald. Dit omdat het een site betreft die heel veel foto's van de producten wil weergeven. Misschien is het daarom wel wijsheid om de random images per keer uit één directory te halen vanwege de laadtijd van het bestand.

Graag jullie ideeën en tips hierover.

Ben niet echt thuis in javascript dus graag een beetje expliciete uitleg.

SCRIPT:

[JS]<script language="JavaScript1.2">
//Instellen van het veld:
var breedte=760
var hoogte=100
var snelheid=1
agrondkleur="#FFFFFF"
//Invoegen van de afbeeldingen met eventuele hyperlinks:
var afbeelding=new Array()
afbeelding[0]='<a href="#"><img src="../images/Merken/1.jpg" width=100 height=70 border=0></a>'
afbeelding[1]='<a href="#"><img src="../images/Merken/2.jpg" width=100 height=70 border=0></a>'
afbeelding[2]='<a href="#"><img src="../images/Merken/3.jpg" width=100 height=70 border=0></a>'
afbeelding[3]='<a href="#"><img src="../images/Merken/4.jpg" width=100 height=70 border=0></a>'
afbeelding[4]='<a href="#"><img src="../images/Merken/5.jpg" width=100 height=70 border=0></a>'

//Hieronder niets wijzigen
var kopieersnelheid=snelheid
afbeelding='<nobr>'+afbeelding.join(" ")+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100;left:-3000">'+afbeelding+'</span>')
var huidige_breedte=''

function opvullen(){
if (iedom){
afb=document.getElementById? document.getElementById("test2") : document.all.test2
afb2=document.getElementById? document.getElementById("test3") : document.all.test3
afb.innerHTML=afb2.innerHTML=afbeelding
huidige_breedte=document.all? afb.offsetWidth : document.getElementById("temp").offsetWidth
afb2.style.left=huidige_breedte+4
}
else if (document.layers){
ns_slide=document.netscape.document.netscape2
ns_slide2=document.netscape.document.netscape3
ns_slide.document.write(afbeelding)
ns_slide.document.close()
huidige_breedte=ns_slide.document.width
ns_slide2.left=huidige_breedte+4
ns_slide2.document.write(afbeelding)
ns_slide2.document.close()
}
lefttime=setInterval("schuiflinks()",30)
}
window.onload=opvullen

function schuiflinks(){
if (iedom){
if (parseInt(afb.style.left)>(huidige_breedte*(-1)+8))
afb.style.left=parseInt(afb.style.left)-kopieersnelheid
else
afb.style.left=parseInt(afb2.style.left)+huidige_breedte+4

if (parseInt(afb2.style.left)>(huidige_breedte*(-1)+8))
afb2.style.left=parseInt(afb2.style.left)-kopieersnelheid
else
afb2.style.left=parseInt(afb.style.left)+huidige_breedte+4

}
else if (document.layers){
if (ns_slide.left>(huidige_breedte*(-1)+8))
ns_slide.left-=kopieersnelheid
else
ns_slide.left=ns_slide2.left+huidige_breedte+4

if (ns_slide2.left>(huidige_breedte*(-1)+8))
ns_slide2.left-=kopieersnelheid
else
ns_slide2.left=ns_slide.left+huidige_breedte+4
}
}

if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+breedte+';height:'+hoogte+';overflow:hidden">')
write('<div style="position:absolute;width:'+breedte+';height:'+hoogte+';background-color:'+agrondkleur+'" onMouseover="kopieersnelheid=0" onMouseout="kopieersnelheid=snelheid">')
write('<div id="test2" style="position:absolute;left:0;top:0"></div>')
write('<div id="test3" style="position:absolute;left:-1000;top:0"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+breedte+' height='+hoogte+' name="netscape" bgColor='+agrondkleur+'>')
write('<layer name="netscape2" left=0 top=0 onMouseover="kopieersnelheid=0" onMouseout="kopieersnelheid=snelheid"></layer>')
write('<layer name="netscape3" left=0 top=0 onMouseover="kopieersnelheid=0" onMouseout="kopieersnelheid=snelheid"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>
[/JS]
 
Javascript kan geen directories lezen; dat zal een server-side script (eg. PHP) moeten doen. Echter, dit is niet 1-2-3 geschreven, evenals de Javascript, als je er geen ervaring mee hebt.

Daarnaast is het script dat je hebt meegeleverd niet om aan te zien (no offence). Er wordt (o.a.) gecontroleerd op browsers die al 15 jaar niet meer bestaan... niet echt strak dus.




Dus, de 1e vraag is: ondersteund je server PHP of een andere ss taal?



:thumb:
 
Als antwoord op de vragen :

Een werkende URL geef ik nu liever niet ivm de "klant" gegevens.
Ik zal proberen de url apart neer te zetten op een andere server.

Het javascriptje heb ik idd van een andere site. Dus controle en dergelijke kunnen idd hopeloos verouderd zijn. (15jr, hmm is wel erg veel). Heb alleen zo snel geen andere gevonden die hetzelfde eenvoudig nabootst.

PHP wordt ondersteunt op de server!
 
Update! Dit script doet hetzelfde, maar is moderner en iets flexibeler ;) Bovenin staat een variabele Settings voor een aantal voorkeuren. Het random selecteren voor afbeeldingen moet inderdaad met iets als PHP, maar hopelijk is dit alvast een stapje in de goede richting :)

[JS]var Settings = {
BREEDTE: 760,
HOOGTE: 100,
SNELHEID: 1,
AGRONDKLEUR: "#FFFFFF",
AFBEELDINGEN: {
"../images/Merken": ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"]
}
};

function main() {

var content = _("div", {
style: {
position: "absolute"
}
});

var sources = Settings.AFBEELDINGEN;
for (var dir in sources) {
for (var i = 0; i < sources[dir].length; i++) {
_("img", {
src: dir + "/" + sources[dir],
style: {
border: "none",
width: 100 + "px",
height: 100 + "px"
}
}, _("a", {
href: "#"
}, content));
}
}

var kopieersnelheid = Settings.SNELHEID;

var slider = _("div", {
style: {
width: 2 * Settings.BREEDTE + "px",
height: Settings.HOOGTE + "px",
position: "absolute"
}
}, _("div", {
style: {
width: Settings.BREEDTE + "px",
height: Settings.HOOGTE + "px",
border: "1px dotted grey",
position: "relative",
overflow: "hidden",
backgroundColor: Settings.AGRONDKLEUR
}
}, document.body));

opvullen(slider, content);

var t = setInterval(function() {
try {
schuiflinks(slider.children, kopieersnelheid);
}
catch (e) {
clearTimeout(t);
alert("Error: " + e.message);
console.error(e);
}
}, 30);

}
var _ = (function() {

function extend(obj, ext) {
for (var p in ext) {
if (typeof ext[p] === "object") {
extend(obj[p], ext[p]);
}
else {
obj[p] = ext[p];
}
}
}
function _(tag, attributes, parent) {
var el = document.createElement(tag);
extend(el, attributes);
if (parent) parent.appendChild(el);
return el;
}

return _;

})();
function opvullen(slider, content) {

slider.appendChild(content);
var n = Math.ceil(Settings.BREEDTE / content.clientWidth);
for (var i = 0; i < n; i++) {
var node = content.cloneNode(true);
node.style.left = (i + 1) * content.clientWidth + "px";
slider.appendChild(node);
}

}
function schuiflinks(nodeList, snelheid) {

var nodeWidth = nodeList[0].clientWidth;
for (var i = 0; i < nodeList.length; i++) {
var node = nodeList;
var left = parseInt(node.offsetLeft);
var newLeft = left - snelheid;
if (-nodeWidth < left) {
node.style.left = newLeft + "px";
}
else {
node.style.left = (newLeft + nodeList.length * nodeWidth) + "px";
}
}

}
window.onload = main;[/JS]
 
dit ziet er wel een zeer goed script uit, ik zou deze ook willen gebruiken, nu zou ik dit wel in een extern stylesheet willen hoe moet ik de code dan aanpassen en oproepen op de pagina waar ik het wil. grtz ringo
 
Zou je zo kunnen doen ;) Ik heb een functie insertSlider gemaakt, voor als je meerdere van die dingen op een pagina zou willen hebben. Argumenten zijn het element waar 't ding in moet komen en zo'n object met locaties voor afbeeldingen zoals je bij Settings ziet.

slider.css
Code: 
.slider {
    width: 760px;
    height: 100px;
    border: 1px dotted gray;
    position: relative;
    overflow: hidden;
    background-color: #FFF;
}
.slider div {
    position: absolute;
}
.slider > div {
    width: 1520px; /* 2x slider.width */
    height: 100px;
}
.slider img {
    border: none;
    width: 100px;
    height: 100px;
}

index.htm
[JS]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="slider.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">

var Settings = {
SNELHEID: 1,
AFBEELDINGEN: {
"../images/Merken": ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"]
}
};

function main() {
var slider = insertSlider(document.body, Settings.AFBEELDINGEN);
/* Maybe do something more with slider? */
}

function insertSlider(parent, sources) {

var imgWrapper = _("div");
for (var dir in sources) {
for (var i = 0; i < sources[dir].length; i++) {
_("img", {src: dir + "/" + sources[dir]},
_("a", {href: "#"},
imgWrapper));
}
}

var kopieersnelheid = Settings.SNELHEID;
var slider = _("div", {className: "slider"},
parent);
var content = _("div", null,
slider);

opvullen(content, imgWrapper);

var t = setInterval(function() {
try {
schuiflinks(content.children, kopieersnelheid);
}
catch (e) {
clearTimeout(t);
alert("Error: " + e.message);
console.error(e);
}
}, 30);

return slider;

}
var _ = (function() {

function extend(obj, ext) {
for (var p in ext) {
if (typeof ext[p] === "object") {
extend(obj[p], ext[p]);
}
else {
obj[p] = ext[p];
}
}
}
function _(tag, attributes, parent) {
var el = document.createElement(tag);
if (attributes) extend(el, attributes);
if (parent) parent.appendChild(el);
return el;
}

return _;

})();
function opvullen(slider, content) {

slider.appendChild(content);
var n = Math.ceil(slider.clientWidth / 2 / content.clientWidth);
for (var i = 0; i < n; i++) {
var node = content.cloneNode(true);
node.style.left = (i + 1) * content.clientWidth + "px";
slider.appendChild(node);
}

}
function schuiflinks(nodeList, snelheid) {

var nodeWidth = nodeList[0].clientWidth;
for (var i = 0; i < nodeList.length; i++) {
var node = nodeList;
var left = parseInt(node.offsetLeft);
var newLeft = left - snelheid;
if (-nodeWidth < left) {
node.style.left = newLeft + "px";
}
else {
node.style.left = (newLeft + nodeList.length * nodeWidth) + "px";
}
}

}
window.onload = main;

</script>
<title></title>
</head>
<body></body>
</html>[/JS]
 
Script werkt !!

Geweldige update.. Nu het PHP gedeelte nog implementeren. Wellicht dat er iemand is die dat sneller kan uitwerken als ik?!? BVD

Bedankt.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan