Fotoslider probleem met IE, geen andere browsers. Hulp gevraagd...

BJMarc · 16 feb 2012

Hey,

Ik heb een probleempje met het volgende script. Deze functioneert fatsoenlijk in alle geteste browser behalve IE. Tenzij deze met compatibiliteit wordt uitgevoerd.

[js]
<script type="text/javascript">

var Settings = {
SNELHEID: 1,
AFBEELDINGEN: {
"../thumbs/images/Merken/merk1/": ["foto1.jpg", "foto2.jpg", "foto3.jpg", "foto4.jpg", "foto5.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>
[/js]
Is er iemand die dit kan verhelpen, of in ieder geval een eind in de richting kan helpen. Ben met dank aan deze fora al zover gekomen, wellicht dat het laatste stukje ook verholpen kan worden.

Robin S · 17 feb 2012

Ik heb regel 27 t/m 30 vervangen door dit:
[JS]var slider = _("div", {className: "Slider"},
parent);
var content = _("div", {className: "Content"},
slider);[/JS]

Met bijbehorende (aangepaste) CSS werkt 't bij mij nu in FF en IE (zowel compatibiliteitsmode aan als uit). Er was een probleem met de '>'-selector.

Code:

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

Laat maar weten als er iets nog steeds niet goed zit

Misschien kun je dan een linkje meesturen?

BJMarc · 16 mrt 2012

Probleem is nu opgelost.

Echter rest mij nog een vraagje...

Ik moet nu alle foto's met naam en extensie toevoegen aan een lijst met de "afspeelbare" foto's.
Is er ook een manier om met javascript een url of directory uit te lezen en daar random, of min of meer random, bijvoorbeeld 15 foto's uit te laten kiezen.
Met php heb ik al wel eens iets dergelijks gezien, maar geen idee hoe ik dat nou weer implementeer in het javscript gedeelte.

Wellicht dat jullie nog uitkomst kunnen bieden.

Alvast dank.

Robin S · 17 mrt 2012

JavaScript kan helaas geen directories lezen, dus je zult echt PHP moeten hebben om een lijst van files op de server door te geven. Daarna kun je wel JavaScript gebruiken om daaruit een (random) selectie te maken

BJMarc · 20 mrt 2012

Ik heb een php scriptje dat een lijstje genereerd, maar hoe implementeer ik dan die variabelen in het stukje javascript?

Niet complete php voorbeeld: (GetImages is de functie die daarna bijvoorbeeld deze variabelen creeerd)

PHP:

GetImages($Bla,$Bla2,$Bla3,$Bla4,$Bla5,$Bla6,$Bla7,$Bla8,$Bla9,$Bla10);

Hoe verander ik dan het stukje javascript : (want zo werkt het niet)

[js]
<script type="text/javascript">

var Settings = {
SNELHEID: 1,
AFBEELDINGEN: {
"../images/merken/slideshow/": ["$Bla", "$Bla2", "$Bla3"]
}
};

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", {className: "Content"}, 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>
[/js]

het geheel staat uiteraard in een php script.

BJMarc · 21 mrt 2012

Volgens mij zou het zoiets moeten worden :

[js]
var Settings = {
SNELHEID: 1,
AFBEELDINGEN: { <?php
echo "../images/merken/slideshow/$Bla";
?>
}
[/js]

en dan de echo herhalen voor de rest van de afbeeldingen.

Dit werkt helaas niet, ik krijg nog een unexpected $end melding. Wellicht dat dat de fout niet is, maar alle hulp is welkom.
Ben echt niet thuis op beide gebieden js en php.

Voor de duidelijkheid hieronder de complete code :

PHP:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="../slider.css" rel="stylesheet" type="text/css"/>
        
		<?php 
		
		Function GetImages(&$Image1, &$Image2, &$Image3, &$Image4, &$Image5, &$Image6, &$Image7, &$Image8, &$Image9, &$Image10){
 $imglist='';

		
$img_folder =  "../images/merken/slideshow/";

  mt_srand((double)microtime()*1000);

  //use the directory class
  $imgs = dir($img_folder);

  //read all files from the  directory, checks if are images and ads them to a list (see below how to display flash banners)
   while ($file = $imgs->read()) {
     if (!preg_match('/gif/', $file) || !preg_match('/jpg/', $file) || !preg_match('/png/', $file))
       $imglist .= "$file ";

   } closedir($imgs->handle);

  //put all images into an array
  $imglist = explode(" ", $imglist);
  $no = sizeof($imglist)-2;

  //generate a random number between 0 and the number of images
  $random = mt_rand(0, $no);
  $random2 = $random + 1;
  if ($random2 > $no  ) {
  $random2 = 0;
   } 
  $random3 = $random2 +1;
  if ($random3 > $no) {
  $random3 = 0;
  }
   $random4 = $random3 +1;
  if ($random4 > $no) {
  $random4 = 0;
  }
  $random5 = $random4 +1;
  if ($random5 > $no) {
  $random5 = 0;
  }
  $random6 = $random5 +1;
  if ($random6 > $no) {
  $random6 = 0;
  }
  $random7 = $random6 +1;
  if ($random7 > $no) {
  $random7 = 0;
  }
  $random8 = $random7 +1;
  if ($random8 > $no) {
  $random8 = 0;
  }
  $random9 = $random8 +1;
  if ($random9 > $no) {
  $random9 = 0;
  }
  $random10 = $random9 +1;
  if ($random10 > $no) {
  $random10 = 0;
  }
  
  $image = $imglist[$random];
    
  $Image1 = $img_folder.$image;
  
  $image = $imglist[$random2];
    
  $Image2 = $img_folder.$image;

  $image = $imglist[$random3];
    
  $Image3 = $img_folder.$image;
  
  $image = $imglist[$random4];
    
  $Image4 = $img_folder.$image;
  
  $image = $imglist[$random5];
    
  $Image5 = $img_folder.$image;
  
  $image = $imglist[$random6];
    
  $Image6 = $img_folder.$image;
  
  $image = $imglist[$random7];
    
  $Image7 = $img_folder.$image;
  
  $image = $imglist[$random8];
    
  $Image8 = $img_folder.$image;
  
  $image = $imglist[$random9];
    
  $Image9 = $img_folder.$image;
  
  $image = $imglist[$random10];
    
  $Image10 = $img_folder.$image;
  


GetImages($Bla,$Bla2,$Bla3,$Bla4,$Bla5,$Bla6,$Bla7,$Bla8,$Bla9,$Bla10);
        
		?>
		
		<script type="text/javascript">
 
            var Settings = {
                    SNELHEID: 1,
                AFBEELDINGEN: { <?php
                    echo "../images/merken/slideshow/$Bla";
								?>
                }
            };
 
            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][i]},
                            _("a", {href: "#"},
                                imgWrapper));
                    }
                }
 
                var kopieersnelheid = Settings.SNELHEID;
                var slider = _("div", {className: "Slider"}, parent);
				var content = _("div", {className: "Content"},  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[i];
                    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>

Robin S · 28 mrt 2012

Hej! Sorry voor de late reactie, had wat andere bezigheden. Hopelijk heb je hier toch nog wat aan.
Kijk eens naar de structuur voor de afbeeldingen: Settings.AFBEELDINGEN is een object, met voor iedere entry:
- key: directory
- value: array met afbeeldingen ín die directory

In PHP kun je zo'n object op precies dezelfde manier opbouwen. Onderstaande code bevat een aantal redelijk simpele functies die bewerkingen uitvoeren op een object ($data) dat Settings.AFBEELDINGEN representeert.

images.php

PHP:

<?php

define(IMAGE_COUNT, 10);
define(IMAGE_DIR, "../images/merken/slideshow");

function addImage(&$data, $dirName, $fileName) {
    
    if (!isset($data[$dirName])) {
        $data[$dirName] = array();
    }
    array_push($data[$dirName], $fileName);
}
function countImages($data) {

    $total = 0;
    foreach ($data as $dirName => $images) {
        $total += count($images);
    }
    return $total;
}
function getImages(&$data, $dirName) {

    $dir = scandir($dirName);
    for ($i = 0; $i < count($dir); $i++) {
        $path = $dirName . "/" . $dir[$i];
        if (!is_dir($path) && is_image($path)) {
            addImage($data, $dirName, $dir[$i]);
        }
    }
}
function getImagesRecursive(&$data, $dirName) {

    getImages($data, $dirName);
    $dir = scandir($dirName);
    for ($i = 0; $i < count($dir); $i++) {
        $path = $dirName . "/" . $dir[$i];
        if ($dir[$i] != "." && $dir[$i] != ".." && is_dir($path)) {
            getImagesRecursive($data, $path);
        }
    }
}
function is_image($fileName) {
    return preg_match("/\\.(gif|jpg|png)$/", $fileName) == 1;
}
function reduceImages(&$data, $target) {

    $total = countImages($data);
    while ($target < $total) {

        $removeIndex = mt_rand(0, --$total);
        $cuml = 0;
        foreach ($data as $dirName => &$images) {
            $count = count($images);
            if ($removeIndex < $cuml + $count) {
                array_splice($images, $removeIndex - $cuml, 1);
                if (empty($images)) {
                    unset($data[$dirName]);
                }
                break;
            }
            else {
                $cuml += $count;
            }
        }
    }
}

$_DATA = array();
getImagesRecursive($_DATA, IMAGE_DIR);
reduceImages($_DATA, IMAGE_COUNT); //Could also do this in JavaScript

echo json_encode($_DATA);

?>

In je JavaScript kun je dan gewoon het volgende doen:
[JS]
var Settings = {
SNELHEID: 1,
AFBEELDINGEN: <?php include "images.php"; ?>
};[/JS]

BJMarc · 4 apr 2012

Er lijkt een bepaalde interval te zijn waarbij de foto's niet verschijnen. Deze komen en gaan.

Wellicht dat iemand hier een oplossing voor ziet.

In eerste instantie dacht ik dat het met de extensies te maken had of de benaming van de foto's, na wijziging bracht dit helaas geen oplossing.

Robin S · 4 apr 2012

Ik kan me niet goed voorstellen wat het probleem is bij die beschrijving. Heb je een online voorbeeldje ofzo?

BJMarc · 4 apr 2012

De slider laad de foto's -> na verloop verdwijnen de foto's -> een aantal lege vakken -> de foto's lopen weer verder.

Overigens lijkt het erop dat dit een rpobleem is dat zich alleen in chrome en safari voordoet.

online voorbeeld op www.pollevof.nl/nieuw

rajmv · 5 apr 2012

Ik kon er helaas geen chrome debugger op los laten omdat ik ff niet snap hoe ik 'n breakpoint in een iframe zet, maar het probleem lijkt zich in deze code voor te doen;

Code:

            function schuiflinks(nodeList, snelheid) {
 
                var nodeWidth = nodeList[0].clientWidth;
                for (var i = 0; i < nodeList.length; i++) {
                    var node = nodeList[i];
                    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";
                    }
                }
 
            }

probeer eens;

Code:

                var nodeWidth = nodeList[0].offsetWidth;

mischien dat dat helpt, en

Code:

node.style.left = (newLeft + (nodeList.length * nodeWidth)) + "px";

is mischien ook ff wat netter / beter.

BJMarc · 10 apr 2012

De aangeboden oplossing lijkt helaas niet te werken. Voor zover ik heb ontdekt is het probleem alleen nog in chrome te vinden.

Ik heb het nieuwe voorbeeld inmiddels online staan.

Wellicht zijn er nog andere oplossingen, ideeën?

Fotoslider probleem met IE, geen andere browsers. Hulp gevraagd...

BJMarc

Gebruiker

Robin S

Gebruiker

BJMarc

Gebruiker

Robin S

Gebruiker

BJMarc

Gebruiker

BJMarc

Gebruiker

Robin S

Gebruiker

BJMarc

Gebruiker

Robin S

Gebruiker

BJMarc

Gebruiker

rajmv

Gebruiker

BJMarc

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy