Laden Sie alle Bilder aus Ordner und rollen sie in JS Slider mit Laravel Rahmen

Question

Was ist der beste Weg, um alle Bilder aus Ordner im JS-Slider mit Laravel Rahmen zu rollen? Dies ist aktuellen Code mit hartkodierten Bildpfaden:

var i =0; 
    var images = [ 
    'images/sliders/background_slider/2.jpg', 
    'images/sliders/background_slider/3.jpg', 
    'images/sliders/background_slider/1.jpg', 
    'images/sliders/background_slider/4.jpg', 
    'images/sliders/background_slider/5.jpg']; 
    var image = $('#slideit'); 
    image.css('background-image', 'url(images/sliders/background_slider/1.jpg)'); 
    setInterval(function(){ 
    image.fadeOut(200, function() { 
    image.css('background-image', 'url(' + images [i++] +')'); 
    image.fadeIn(1000); 
    }); 
    if(i == images.length) 
    i = 0; 
    }, 5000); 
}); 

Dieser Code funktioniert gut, aber meine Idee ist es, eine Möglichkeit zu haben, um einfach, diese Bilder zu verwalten, ohne den Code zu berühren. Ich habe versucht, eine PHP-Variable mit allen Pfaden von Bildern zu erstellen und sie dann in JS mit der json_encode-Funktion zu verwenden, aber das funktioniert nicht. Außerdem, wenn ich diese Pfade in JS-Variable lade, kann ich sie leicht in der Quellansicht in jedem Browser sehen, und ich denke, das ist aus Sicherheitsgesichtspunkten keine gute Idee.

Also, was ist der beste Weg, das zu tun?

Vielen Dank im Voraus!

D. T.

Answer 1

Sie können die Variable nicht verbergen, wenn Sie es in Client-Seite JS verwenden möchten. Es wäre dasselbe wie hartes Codieren des Arrays, mit dem einzigen Unterschied, dass es mit einem serverseitigen Skript gerendert wird, um es dynamisch zu machen.

Also, wenn Ihr PHP-Variablen $ Bilder ist es in etwa so aussehen sollte:

$images = [ 
'images/sliders/background_slider/2.jpg', 
'images/sliders/background_slider/3.jpg', 
'images/sliders/background_slider/1.jpg', 
'images/sliders/background_slider/4.jpg', 
'images/sliders/background_slider/5.jpg']; 

Und es Ihrer Meinung nach passieren, können Sie tun:

$data['images'] = json_encode($images); 

Dann in die Ansicht, anstatt die Werte hart zu kodieren, erhalten Sie sie von Ihrer PHP-Variable. Konvertieren Sie die JSON-String zurück:

var images = JSON.parse('<?=$images?>'); 

Und das erste Bild als Hintergrund einstellen:

image.css('background-image', 'url('+images[0]+')'); 

UPDATE:

Ich habe gerade bemerkt, dass Sie zählen die Elemente der Bildanordnung , die Sie mit dem nach JSON.parse generierten Objekt nicht ausführen können. Stattdessen können Sie für jedes Objektelement ein Schlüsselfeld erstellen und dieses stattdessen zählen.

images_keys= $.map(images, function(v, i){ 
    return i; 
}); 

und wo immer Sie images.length benötigen, können Sie mit images_keys gehen. Für alles andere können Sie das Bildobjekt selbst verwenden.