Resumiendo un poco: quiero que mi Array
llamado "imagenes" en mi archivo JavaScript, reciba imágenes que le pase de un controlador en C#
Hice una galería estática de imágenes las cuales cuando hago clic sobre alguna de ellas se agrandan y se ubican en un Carousel
para poder verlas una por una.
Las imagenes son ubicadas en distintas carpetas, por lo que hay muchas carpetas, y cada carpeta tiene distintas imágenes. (Ejemplo: Carpeta1 tiene distintas imágenes que Carpeta2)
Con C#
logré mostrar esas imágenes en el html, pero no puedo agregarlas en el Carousel
.
Actualmente estoy armando un Array
con las imágenes que están ubicadas en una carpeta local, todo de forma estática.
Lo que busco y no consigo hacer debido a mi poca experiencia con JavaScript es que las imágenes del Array
sean dinámicas, ¿Qué imágenes quiero que estén en el Carousel
? Las que les pase del controlador, dependiendo de la carpeta elegida. (Ejemplo: Si selecciono Carpeta1, el Carousel
tendrá las imágenes que estén dentro de Carpeta1.)
Espero que se me haya entendido :(
Este es mi código actual del carousel
con las imágenes estáticas dentro de Array
"imagenes":
document.addEventListener('DOMContentLoaded', function () {
let imagenes = [
{ img: '/imgAndroid/Celular.jpg' },
{ img: '/imgAndroid/Taza.jpg' },
{ img: '/imgAndroid/Horno.jpg' },
{ img: '/imgAndroid/TV.jpg' },
{ img: '/imgAndroid/Monitor.jpg' },
{ img: '/imgAndroid/Notebook.jpg' },
{ img: '/imgAndroid/PanelSolar.jpg' },
{ img: '/imgAndroid/Teclado.jpg' },
{ img: '/imgAndroid/Samsung.jpg' },
{ img: '/imgAndroid/Mouse.jpg' },
]
let contador = 0;
const contenedor = document.querySelector('.slideshow');
const overlay = document.querySelector('.overlay');
const imagenesTd = document.querySelectorAll('.galeria img');
const img_slideshow = document.querySelector('.slideshow img');
const btnDownload = document.getElementById('btnDownload');
contenedor.addEventListener('click', function (event) {
let atras = contenedor.querySelector('.atras'),
adelante = contenedor.querySelector('.adelante'),
img = contenedor.querySelector('img'),
tgt = event.target
if (tgt == atras) {
if (contador > 0) {
img.src = imagenes[contador - 1].img
contador--
} else {
img.src = imagenes[imagenes.length - 1].img
contador = imagenes.length - 1
}
} else if (tgt == adelante) {
if (contador < imagenes.length - 1) {
img.src = imagenes[contador + 1].img
contador++
} else {
img.src = imagenes[0].img
contador = 0
}
}
})
Array.from(imagenesTd).forEach(img => {
img.addEventListener('click', event => {
const imagenSeleccionada = +event.target.dataset.imgMostrar
img_slideshow.src = imagenes[imagenSeleccionada].img
contador = imagenSeleccionada
overlay.style.opacity = 1
overlay.style.visibility = 'visible'
})
})
document.querySelector('.btn_cerrar').addEventListener('click', () => {
overlay.style.opacity = 0
overlay.style.visibility = 'hidden'
})
btnDownload.addEventListener('click', function (event) {
let img = contenedor.querySelector('img');
let imgPath = img.src;
console.log(imgPath);
const downLoadImg = imgPath.substring(imgPath.lastIndexOf('/') + 1)
btnDownload.href = "../Imagenes/" + downLoadImg;
})
})}
EDIT AGREGO CODIGO HTML FOREACH DE IMAGENES
@foreach(var pd in Model)
{
if(img != pd.getImagenes().ToString())
{
<div class="columnaPedido">
<img class="imgPedido" src='@pd.getImagenes()' onclick="AbrirCarousel('"@pd.getNumeroPedido().ToString()"')" data-img-mostrar="@cont"/>
@{
cont++;
}
</div>
}
cont++;
}
Guiandome con lo que pasó @Robinson, estoy teniendo problemas al momento de crear el carusel.
Asi me queda el Javascript:
function GetImagenes(entrega){
var i = 0;
console.log(entrega);
$.ajax({
method: "GET",
url: "GetPedidoImagenes",
contentType: "aplication/json; Charset=utf-8",
data: { 'entrega': entrega },
async: true,
success: function (result) {
console.log("Longitud: " + result.length);
console.log(result);
if (result == 0) {
alert("No hay Imagenes");
}
else {
while (i < result.length) {
var carusel = document.getElementById("Entrega_" + entrega);
if (i == 0) {
var div = document.createElement('div');
div.setAttribute('class', 'carousel-item active');
var img = document.createElement("img");
img.setAttribute('class', 'd-block w-100');
div.appendChild(img);
img.setAttribute('src', 'imgAndroid/' + result[i]);
console.log(result[i].Path);
console.log(result[i].path);
carusel.appendChild(div);
i++;
//console.log(result);
//console.log(img.src);
}
else {
var div = document.createElement('div');
div.setAttribute('class', 'carousel-item');
var img = document.createElement('img');
img.setAttribute('class', 'd-block w-100');
div.appendChild(img);
img.setAttribute('src', 'imgAndroid/' + result[i]);
carusel.appendChild(div);
i++;
}
}
}
console.log(result);
}
})
};
"Result
" está trayendo las 11 imagenes que se trae del back-end, pero cuando la inspecciono, es un array con elementgos vacios:
(11) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0:{}
1:{}
2:{}
3:{}
4:{}
5:{}
6:{}
7:{}
8:{}
9:{}
10:{}
length:11
[[Prototype]]:Array(0)
La ruta de las imagenes deberia ser https://myWeb.com/imgAndroid/imagen.jpg
Pero en cambio es https://myWeb.com/Home/imgAndroid/[object%20Object]
GET https://myWeb.com/Home/imgAndroid/[object%20Object] 404 (Not Found)
Back:
[HttpGet]
public List<PedidoViewModel> GetPedidoImagenes(string entrega)
{
string consulta;
List<PedidoViewModel> listaPedidos = new List<PedidoViewModel>();
try
{
consulta = "SELECT Path from Entrega WHERE Entrega = '" + entrega + "'";
using (var cn = new MySqlConnection("datasource=" + server + ";database=" + database + ";" + ";username=" + user + ";password=" + password + ";"))
{
MySqlCommand cmd = new MySqlCommand(consulta, cn);
cn.Open();
var reader = cmd.ExecuteReader();
while (reader.Read())
{
PedidoViewModel pedido = new PedidoViewModel();
pedido.setPathImagen(reader["Path"].ToString());
listaPedidos.Add(pedido);
}
}
return listaPedidos;