Tema para preguntas random a Chatgpt 🤖

blankito1998 dijo:

no funciona se siguen mostrando todas

Hacer clic para expandir...

$(document).ready(function() {
    // Asegúrate de obtener el valor correctamente de data
    const dataValor = $("#shalowm").attr("data");

    function turms(photo, foto2, foto3, foto4, foto5) {
        let fotos;

        // Verifica el valor de data para determinar qué fotos mostrar
        if (dataValor === "1") {
            fotos = [photo];         // Solo la primera foto
        } else if (dataValor === "2") {
            fotos = [photo, foto2]; // Las dos primeras fotos
        } else {
            fotos = [photo, foto2, foto3, foto4, foto5]; // Todas las fotos
        }

        let indiceActual = 0;

        function mostrarImagen() {
            const img = new Image();
            img.src = fotos[indiceActual];
            img.onload = function() {
                $(".pobs").attr("src", fotos[indiceActual]);
            };
            img.onerror = function() {
                siguiente(); // Si hay un error, trata de cargar la siguiente imagen
            };
        }

        function siguiente() {
            if (indiceActual < fotos.length - 1) {
                indiceActual++;
                mostrarImagen();
            } else {
                indiceActual = 0; // Reiniciar al principio
                mostrarImagen();
            }
        }

        function anterior() {
            if (indiceActual > 0) {
                indiceActual--;
                mostrarImagen();
            }
        }

        if (!document.querySelector('.gorms')) {
            $("body").append('<ins class="gorms"><div class="sumbit"><span class="anpag blocl"></span><span class="sipag blocl"></span><span class="goaps" onclick="closd();">Cerrar</span><input class="dolps" min="30" max="100" value="100" type="range" /><span class="detps"><img class="pobs blocl" src="' + fotos[indiceActual] + '" /></span></div></ins>');
            mostrarImagen();

            $(document).on("click", ".anpag", function() {
                anterior();
            });

            $(document).on("click", ".sipag", function() {
                siguiente();
            });
        }
    }

    // Llama a la función turms con tus imágenes
    turms('ruta/a/foto1.jpg', 'ruta/a/foto2.jpg', 'ruta/a/foto3.jpg', 'ruta/a/foto4.jpg', 'ruta/a/foto5.jpg');
});

• Selector correcto: El selector #shalowm debe corresponder al ID correcto para que dataValor obtenga el valor deseado.
• Llamada de la función: Asegúrate de que la función turms se llame después de que el documento esté completamente cargado, para que dataValor tenga el valor correcto.
• Imágenes disponibles: Verifica que las rutas de las imágenes utilizadas sean correctas.

BotBeta dijo:

Para solucionar el problema y asegurar que las imágenes se filtren correctamente según el valor de data en shalowm, asegúrate de que:

1. Estés obteniendo el atributo correctamente.
2. Estés llamando a la función turms después de que el documento se haya cargado completamente.

Aquí tienes una versión corregida y completa del código que incluye la verificación para el valor de data:

JavaScript:

$(document).ready(function() {
    // Asegúrate de obtener el valor correctamente de data
    const dataValor = $("#shalowm").attr("data");

    function turms(photo, foto2, foto3, foto4, foto5) {
        let fotos;

        // Verifica el valor de data para determinar qué fotos mostrar
        if (dataValor === "1") {
            fotos = [photo];         // Solo la primera foto
        } else if (dataValor === "2") {
            fotos = [photo, foto2]; // Las dos primeras fotos
        } else {
            fotos = [photo, foto2, foto3, foto4, foto5]; // Todas las fotos
        }

        let indiceActual = 0;

        function mostrarImagen() {
            const img = new Image();
            img.src = fotos[indiceActual];
            img.onload = function() {
                $(".pobs").attr("src", fotos[indiceActual]);
            };
            img.onerror = function() {
                siguiente(); // Si hay un error, trata de cargar la siguiente imagen
            };
        }

        function siguiente() {
            if (indiceActual < fotos.length - 1) {
                indiceActual++;
                mostrarImagen();
            } else {
                indiceActual = 0; // Reiniciar al principio
                mostrarImagen();
            }
        }

        function anterior() {
            if (indiceActual > 0) {
                indiceActual--;
                mostrarImagen();
            }
        }

        if (!document.querySelector('.gorms')) {
            $("body").append('<ins class="gorms"><div class="sumbit"><span class="anpag blocl"></span><span class="sipag blocl"></span><span class="goaps" onclick="closd();">Cerrar</span><input class="dolps" min="30" max="100" value="100" type="range" /><span class="detps"><img class="pobs blocl" src="' + fotos[indiceActual] + '" /></span></div></ins>');
            mostrarImagen();

            $(document).on("click", ".anpag", function() {
                anterior();
            });

            $(document).on("click", ".sipag", function() {
                siguiente();
            });
        }
    }

    // Llama a la función turms con tus imágenes
    turms('ruta/a/foto1.jpg', 'ruta/a/foto2.jpg', 'ruta/a/foto3.jpg', 'ruta/a/foto4.jpg', 'ruta/a/foto5.jpg');
});

### Asegúrate de lo siguiente:

• Selector correcto: El selector #shalowm debe corresponder al ID correcto para que dataValor obtenga el valor deseado.
• Llamada de la función: Asegúrate de que la función turms se llame después de que el documento esté completamente cargado, para que dataValor tenga el valor correcto.
• Imágenes disponibles: Verifica que las rutas de las imágenes utilizadas sean correctas.

Si sigues teniendo problemas, verifica la consola del navegador para ver si hay errores o mensajes que puedan ayudarte a identificar el problema. ¡Avísame cómo va!

Hacer clic para expandir...

blankito1998 dijo:

const dataValor = $(".pest").attr("data");

function turms(photo, foto2, foto3, foto4, foto5) {
let fotos;

// Verifica el valor de data para determinar qué fotos mostrar
if (dataValor === "1") {
fotos = [photo]; // Solo la primera foto
} else if (dataValor === "2") {
fotos = [photo, foto2]; // Las dos primeras fotos
} else {
fotos = [photo, foto2, foto3, foto4, foto5]; // Todas las fotos
}

let indiceActual = 0;

function mostrarImagen() {
const img = new Image();
img.src = fotos[indiceActual];
img.onload = function() {
$(".pobs").attr("src", fotos[indiceActual]);
};
img.onerror = function() {
siguiente(); // Si hay un error, trata de cargar la siguiente imagen
};
}

function siguiente() {
if (indiceActual < fotos.length - 1) {
indiceActual++;
mostrarImagen();
} else {
indiceActual = 0; // Reiniciar al principio
mostrarImagen();
}
}

function anterior() {
if (indiceActual > 0) {
indiceActual--;
mostrarImagen();
}
}

if (!document.querySelector('.gorms')) {
$("body").append('<ins class="gorms"><div class="sumbit"><span class="anpag blocl"></span><span class="sipag blocl"></span><span class="goaps" onclick="closd();">Cerrar</span><input class="dolps" min="30" max="100" value="100" type="range" /><span class="detps"><img class="pobs blocl" src="' + fotos[indiceActual] + '" /></span></div></ins>');
mostrarImagen();

$(document).on("click", ".anpag", function() {
anterior();
});

$(document).on("click", ".sipag", function() {
siguiente();
});
}
}

?viewload=a030ee5c:33 Uncaught ReferenceError: turms is not defined
at HTMLImageElement.onclick (?viewload=a030ee5c:33:371)

Hacer clic para expandir...

$(document).ready(function() {
    const dataValor = $(".pest").attr("data"); 

    function turms(photo, foto2, foto3, foto4, foto5) {
        let fotos;

        // Verifica el valor de data para determinar qué fotos mostrar
        if (dataValor === "1") {
            fotos = [photo];         // Solo la primera foto
        } else if (dataValor === "2") {
            fotos = [photo, foto2]; // Las dos primeras fotos
        } else {
            fotos = [photo, foto2, foto3, foto4, foto5]; // Todas las fotos
        }
        
        let indiceActual = 0;

        function mostrarImagen() {
            const img = new Image();
            img.src = fotos[indiceActual];
            img.onload = function() {
                $(".pobs").attr("src", fotos[indiceActual]);
            };
            img.onerror = function() {
                siguiente(); // Si hay un error, trata de cargar la siguiente imagen
            };
        }

        function siguiente() {
            if (indiceActual < fotos.length - 1) {
                indiceActual++;
                mostrarImagen();
            } else {
                indiceActual = 0; // Reiniciar al principio
                mostrarImagen();
            }
        }

        function anterior() {
            if (indiceActual > 0) {
                indiceActual--;
                mostrarImagen();
            }
        }

        if (!document.querySelector('.gorms')) {
            $("body").append('<ins class="gorms"><div class="sumbit"><span class="anpag blocl"></span><span class="sipag blocl"></span><span class="goaps" onclick="closd();">Cerrar</span><input class="dolps" min="30" max="100" value="100" type="range" /><span class="detps"><img class="pobs blocl" src="' + fotos[indiceActual] + '" /></span></div></ins>');
            mostrarImagen();

            // Usando jQuery para enlazar eventos
            $(document).on("click", ".anpag", function() {
                anterior();
            });

            $(document).on("click", ".sipag", function() {
                siguiente();
            });
        }
    }

    // Asegúrate de llamar a la función turms solo después de haberla definido
    turms('ruta/a/foto1.jpg', 'ruta/a/foto2.jpg', 'ruta/a/foto3.jpg', 'ruta/a/foto4.jpg', 'ruta/a/foto5.jpg');
});

• Verifica el selector de .pest: Asegúrate de que el elemento con la clase .pest existe en el documento para evitar que dataValor sea undefined.
• Cargar imágenes correctamente: Asegúrate de que las rutas de tus imágenes se pasen correctamente a la función.
• Definición de closd(): Asegúrate de que la función closd() también esté definida antes de ser llamada.

BotBeta dijo:

El error Uncaught ReferenceError: turms is not defined sugiere que la función turms no está visible en el contexto en el que se está intentando invocar. Esto puede suceder por varias razones. Aquí tienes algunos pasos para solucionarlo:

1. Asegúrate de que la función turms está definida antes de que se llame: Si estás llamando a la función desde la imagen o en algún otro lugar antes de su definición, asegúrate de que turms esté definida primero.

2. Verifica el contexto del evento onclick: Si el onclick está configurado directamente en el HTML, esto podría suceder si el navegador está intentando invocar la función antes de que sea definida. Es mejor enlazar los eventos mediante jQuery. Aquí te muestro cómo hacerlo:

3. Uso de jQuery para enlazar eventos: En lugar de usar atributos onclick directamente en el HTML, puedes manejarlos en el código de jQuery. Aquí tienes un ejemplo actualizado que incluye el evento y corrige la llamada a turms.

JavaScript:

$(document).ready(function() {
    const dataValor = $(".pest").attr("data");

    function turms(photo, foto2, foto3, foto4, foto5) {
        let fotos;

        // Verifica el valor de data para determinar qué fotos mostrar
        if (dataValor === "1") {
            fotos = [photo];         // Solo la primera foto
        } else if (dataValor === "2") {
            fotos = [photo, foto2]; // Las dos primeras fotos
        } else {
            fotos = [photo, foto2, foto3, foto4, foto5]; // Todas las fotos
        }
       
        let indiceActual = 0;

        function mostrarImagen() {
            const img = new Image();
            img.src = fotos[indiceActual];
            img.onload = function() {
                $(".pobs").attr("src", fotos[indiceActual]);
            };
            img.onerror = function() {
                siguiente(); // Si hay un error, trata de cargar la siguiente imagen
            };
        }

        function siguiente() {
            if (indiceActual < fotos.length - 1) {
                indiceActual++;
                mostrarImagen();
            } else {
                indiceActual = 0; // Reiniciar al principio
                mostrarImagen();
            }
        }

        function anterior() {
            if (indiceActual > 0) {
                indiceActual--;
                mostrarImagen();
            }
        }

        if (!document.querySelector('.gorms')) {
            $("body").append('<ins class="gorms"><div class="sumbit"><span class="anpag blocl"></span><span class="sipag blocl"></span><span class="goaps" onclick="closd();">Cerrar</span><input class="dolps" min="30" max="100" value="100" type="range" /><span class="detps"><img class="pobs blocl" src="' + fotos[indiceActual] + '" /></span></div></ins>');
            mostrarImagen();

            // Usando jQuery para enlazar eventos
            $(document).on("click", ".anpag", function() {
                anterior();
            });

            $(document).on("click", ".sipag", function() {
                siguiente();
            });
        }
    }

    // Asegúrate de llamar a la función turms solo después de haberla definido
    turms('ruta/a/foto1.jpg', 'ruta/a/foto2.jpg', 'ruta/a/foto3.jpg', 'ruta/a/foto4.jpg', 'ruta/a/foto5.jpg');
});

### Consideraciones:

• Verifica el selector de .pest: Asegúrate de que el elemento con la clase .pest existe en el documento para evitar que dataValor sea undefined.
• Cargar imágenes correctamente: Asegúrate de que las rutas de tus imágenes se pasen correctamente a la función.
• Definición de closd(): Asegúrate de que la función closd() también esté definida antes de ser llamada.

Prueba este enfoque y verifica si el error persiste. ¡Avísame cómo va!

Hacer clic para expandir...

blankito1998 dijo:

este codigo me abre la imagen de una vez y de paso la abre mal

Hacer clic para expandir...

$(document).ready(function() {
    const dataValor = $(".pest").attr("data");

    function turms(photo, foto2, foto3, foto4, foto5) {
        let fotos;

        // Verifica el valor de data para determinar qué fotos mostrar
        if (dataValor === "1") {
            fotos = [photo];         // Solo la primera foto
        } else if (dataValor === "2") {
            fotos = [photo, foto2]; // Las dos primeras fotos
        } else {
            fotos = [photo, foto2, foto3, foto4, foto5]; // Todas las fotos
        }
       
        let indiceActual = 0;

        function mostrarImagen() {
            const img = new Image();
            img.src = fotos[indiceActual];
            img.onload = function() {
                $(".pobs").attr("src", fotos[indiceActual]);
            };
            img.onerror = function() {
                siguiente(); // Si hay un error, trata de cargar la siguiente imagen
            };
        }

        function siguiente() {
            if (indiceActual < fotos.length - 1) {
                indiceActual++;
            } else {
                indiceActual = 0; // Reiniciar al principio
            }
            mostrarImagen();
        }

        function anterior() {
            if (indiceActual > 0) {
                indiceActual--;
            } else {
                indiceActual = fotos.length - 1; // Ir al final si está al principio
            }
            mostrarImagen();
        }

        if (!document.querySelector('.gorms')) {
            $("body").append(`
                <ins class="gorms">
                    <div class="sumbit">
                        <span class="anpag blocl">Anterior</span>
                        <span class="sipag blocl">Siguiente</span>
                        <span class="goaps" onclick="closd();">Cerrar</span>
                        <input class="dolps" min="30" max="100" value="100" type="range" />
                        <span class="detps">
                            <img class="pobs blocl" src="" alt="Imagen" />
                        </span>
                    </div>
                </ins>
            `);
            mostrarImagen(); // Cargar la primera imagen al abrir

            $(document).on("click", ".anpag", function() {
                anterior();
            });

            $(document).on("click", ".sipag", function() {
                siguiente();
            });
        }
    }

    // Llama a la función turms con las rutas de tus imágenes
    turms('ruta/a/foto1.jpg', 'ruta/a/foto2.jpg', 'ruta/a/foto3.jpg', 'ruta/a/foto4.jpg', 'ruta/a/foto5.jpg');
});

BotBeta dijo:

Podría ser que el código esté tratando de mostrar la imagen incorrectamente o que la estructura del HTML no esté bien configurada. Vamos a hacer algunos ajustes para asegurarnos de que todo funcione correctamente. Revisemos cómo se deben organizar los eventos y cómo se cargan las imágenes.

Aquí te dejo una versión mejorada del código para asegurarnos de que la galería funcione como se espera:

JavaScript:

$(document).ready(function() {
    const dataValor = $(".pest").attr("data");

    function turms(photo, foto2, foto3, foto4, foto5) {
        let fotos;

        // Verifica el valor de data para determinar qué fotos mostrar
        if (dataValor === "1") {
            fotos = [photo];         // Solo la primera foto
        } else if (dataValor === "2") {
            fotos = [photo, foto2]; // Las dos primeras fotos
        } else {
            fotos = [photo, foto2, foto3, foto4, foto5]; // Todas las fotos
        }
      
        let indiceActual = 0;

        function mostrarImagen() {
            const img = new Image();
            img.src = fotos[indiceActual];
            img.onload = function() {
                $(".pobs").attr("src", fotos[indiceActual]);
            };
            img.onerror = function() {
                siguiente(); // Si hay un error, trata de cargar la siguiente imagen
            };
        }

        function siguiente() {
            if (indiceActual < fotos.length - 1) {
                indiceActual++;
            } else {
                indiceActual = 0; // Reiniciar al principio
            }
            mostrarImagen();
        }

        function anterior() {
            if (indiceActual > 0) {
                indiceActual--;
            } else {
                indiceActual = fotos.length - 1; // Ir al final si está al principio
            }
            mostrarImagen();
        }

        if (!document.querySelector('.gorms')) {
            $("body").append(`
                <ins class="gorms">
                    <div class="sumbit">
                        <span class="anpag blocl">Anterior</span>
                        <span class="sipag blocl">Siguiente</span>
                        <span class="goaps" onclick="closd();">Cerrar</span>
                        <input class="dolps" min="30" max="100" value="100" type="range" />
                        <span class="detps">
                            <img class="pobs blocl" src="" alt="Imagen" />
                        </span>
                    </div>
                </ins>
            `);
            mostrarImagen(); // Cargar la primera imagen al abrir

            $(document).on("click", ".anpag", function() {
                anterior();
            });

            $(document).on("click", ".sipag", function() {
                siguiente();
            });
        }
    }

    // Llama a la función turms con las rutas de tus imágenes
    turms('ruta/a/foto1.jpg', 'ruta/a/foto2.jpg', 'ruta/a/foto3.jpg', 'ruta/a/foto4.jpg', 'ruta/a/foto5.jpg');
});

### Recomendaciones:
1. Verifica las rutas de las imágenes: Asegúrate de que las rutas que pasas a la función turms sean correctas y que las imágenes existan en esas ubicaciones.

2. Ajustar mostrarImagen: El código ahora se encarga de cargar la imagen sólo después de que se ha presionado un botón para avanzar o retroceder. Como se inicializa el src vacío al crear la imagen en el HTML, esto evitará mostrar una imagen errónea desde el inicio.

3. Cierre del modal: Asegúrate de que la función closd() esté definida y funcionando.

4. Verifica la consola: Si ves errores en la consola, verifica qué detalles te proporciona sobre las imágenes o el código.

Con estas modificaciones, el comportamiento debería ser más adecuado y la imagen debería mostrar correctamente al comenzar la galería. Hazme saber si hay más problemas o si necesitas más ayuda. ¡Buena suerte!

Hacer clic para expandir...

blankito1998 dijo:

como obtengo el setatributo en js?

Hacer clic para expandir...

// Supongamos que tienes un elemento HTML como este:
<div id="miElemento" data-miatributo="valorInicial">Contenido</div>

// Obtener el elemento por su ID
var elemento = document.getElementById("miElemento");

// Obtener el valor del atributo "data-miatributo"
var valor = elemento.getAttribute("data-miatributo");

console.log(valor); // Muestra: valorInicial

// Establecer un nuevo valor para el atributo "data-miatributo"
elemento.setAttribute("data-miatributo", "nuevoValor");

// Para verificar el cambio
console.log(elemento.getAttribute("data-miatributo")); // Muestra: nuevoValor

• Usa getAttribute("nombreDelAtributo") para obtener el valor de un atributo en un elemento.
• Usa setAttribute("nombreDelAtributo", "nuevoValor") para establecer un nuevo valor para un atributo.

BotBeta dijo:

Para obtener y establecer atributos en JavaScript, puedes usar el método setAttribute() para establecer un atributo y getAttribute() para obtener un atributo. Aquí te muestro cómo hacerlo:

### Ejemplo de uso de setAttribute() y getAttribute():

JavaScript:

// Supongamos que tienes un elemento HTML como este:
<div id="miElemento" data-miatributo="valorInicial">Contenido</div>

#### Para obtener un atributo:

JavaScript:

// Obtener el elemento por su ID
var elemento = document.getElementById("miElemento");

// Obtener el valor del atributo "data-miatributo"
var valor = elemento.getAttribute("data-miatributo");

console.log(valor); // Muestra: valorInicial

#### Para establecer un atributo:

JavaScript:

// Establecer un nuevo valor para el atributo "data-miatributo"
elemento.setAttribute("data-miatributo", "nuevoValor");

// Para verificar el cambio
console.log(elemento.getAttribute("data-miatributo")); // Muestra: nuevoValor

### Resumen

• Usa getAttribute("nombreDelAtributo") para obtener el valor de un atributo en un elemento.
• Usa setAttribute("nombreDelAtributo", "nuevoValor") para establecer un nuevo valor para un atributo.

Espero que esto te haya ayudado. Si tienes más preguntas, ¡déjamelo saber!

Hacer clic para expandir...

blankito1998 dijo:

$(document).ready(function(){
const dataValor = $("#datidpro").attr("dataid");
function turms(photo, foto2, foto3, foto4, foto5) {
let fotos;

// Verifica el valor de data para determinar qué fotos mostrar
if (dataValor === "1") {
fotos = [photo]; // Solo la primera foto
} else if (dataValor === "2") {
fotos = [photo, foto2]; // Las dos primeras fotos
} else {
fotos = [photo, foto2, foto3, foto4, foto5]; // Todas las fotos
}

let indiceActual = 0;

function mostrarImagen() {
const img = new Image();
img.src = fotos[indiceActual];
img.onload = function() {
$(".pobs").attr("src", fotos[indiceActual]);
};
img.onerror = function() {
siguiente(); // Si hay un error, trata de cargar la siguiente imagen
};
}

function siguiente() {
if (indiceActual < fotos.length - 1) {
indiceActual++;
mostrarImagen();
} else {
indiceActual = 0; // Reiniciar al principio
mostrarImagen();
}
}

function anterior() {
if (indiceActual > 0) {
indiceActual--;
mostrarImagen();
}
}

if (!document.querySelector('.gorms')) {
$("body").append('<ins class="gorms"><div class="sumbit"><span class="anpag blocl"></span><span class="sipag blocl"></span><span class="goaps" onclick="closd();">Cerrar</span><input class="dolps" min="30" max="100" value="100" type="range" /><span class="detps"><img class="pobs blocl" src="' + fotos[indiceActual] + '" /></span></div></ins>');
mostrarImagen();

$(document).on("click", ".anpag", function() {
anterior();
});

$(document).on("click", ".sipag", function() {
siguiente();
});
}
}

este codigo esta bien, pero en cuanto lo introduzco dentro del document.ready deja de funcionar

Hacer clic para expandir...

$(document).ready(function() {
    // Verifica la existencia del elemento antes de obtener su atributo
    const elemento = $("#datidpro");
    if (elemento.length) {
        const dataValor = elemento.attr("dataid"); 

        function turms(photo, foto2, foto3, foto4, foto5) {
            let fotos;

            // Verifica el valor de data para determinar qué fotos mostrar
            if (dataValor === "1") {
                fotos = [photo];         // Solo la primera foto
            } else if (dataValor === "2") {
                fotos = [photo, foto2]; // Las dos primeras fotos
            } else {
                fotos = [photo, foto2, foto3, foto4, foto5]; // Todas las fotos
            }

            let indiceActual = 0;

            function mostrarImagen() {
                const img = new Image();
                img.src = fotos[indiceActual];
                img.onload = function() {
                    $(".pobs").attr("src", fotos[indiceActual]);
                };
                img.onerror = function() {
                    siguiente(); // Si hay un error, trata de cargar la siguiente imagen
                };
            }

            function siguiente() {
                if (indiceActual < fotos.length - 1) {
                    indiceActual++;
                } else {
                    indiceActual = 0; // Reiniciar al principio
                }
                mostrarImagen();
            }

            function anterior() {
                if (indiceActual > 0) {
                    indiceActual--;
                } else {
                    indiceActual = fotos.length - 1; // Ir al final si está al principio
                }
                mostrarImagen();
            }

            if (!document.querySelector('.gorms')) {
                $("body").append('<ins class="gorms"><div class="sumbit"><span class="anpag blocl"></span><span class="sipag blocl"></span><span class="goaps" onclick="closd();">Cerrar</span><input class="dolps" min="30" max="100" value="100" type="range" /><span class="detps"><img class="pobs blocl" src="" /></span></div></ins>');
                
                mostrarImagen(); // Cargar la primera imagen al abrir

                $(document).on("click", ".anpag", function() {
                    anterior();
                });

                $(document).on("click", ".sipag", function() {
                    siguiente();
                });
            }
        }

        // Llama a la función turms con las rutas de tus imágenes
        turms('ruta/a/foto1.jpg', 'ruta/a/foto2.jpg', 'ruta/a/foto3.jpg', 'ruta/a/foto4.jpg', 'ruta/a/foto5.jpg');
    } else {
        console.error("El elemento con ID 'datidpro' no se encuentra en el DOM.");
    }
});

• Verificar existencia del elemento: Antes de intentar obtener el atributo, estoy verificando que elemento.length sea mayor que cero.
• Llamada a turms(): Asegúrate de que la función se llame correctamente con las rutas de tus imágenes al final.

BotBeta dijo:

Si el código que compartiste deja de funcionar una vez que lo colocas dentro del $(document).ready(function() {...}, probablemente se deba a que la función turms() esté siendo llamada antes de que el elemento del DOM (con el atributo dataid) esté disponible o a que no estés llamando a la función turms() en absoluto después de la definición.

Aquí hay algunas sugerencias y un ajuste a tu código:

### Asegúrate de que estás llamando a la función turms().

1. Llamar a la función después de definirla: Asegúrate de llamar a la función turms() después de que la hayas definido, pero aún dentro de $(document).ready(). Esto garantiza que se ejecute después de que el DOM esté completamente cargado.

2. Verifica la existencia del elemento: Asegúrate de que el elemento con el ID datidpro exista en el DOM antes de intentar obtener su atributo.

Aquí tienes un ejemplo de cómo estructurarlo:

JavaScript:

$(document).ready(function() {
    // Verifica la existencia del elemento antes de obtener su atributo
    const elemento = $("#datidpro");
    if (elemento.length) {
        const dataValor = elemento.attr("dataid");

        function turms(photo, foto2, foto3, foto4, foto5) {
            let fotos;

            // Verifica el valor de data para determinar qué fotos mostrar
            if (dataValor === "1") {
                fotos = [photo];         // Solo la primera foto
            } else if (dataValor === "2") {
                fotos = [photo, foto2]; // Las dos primeras fotos
            } else {
                fotos = [photo, foto2, foto3, foto4, foto5]; // Todas las fotos
            }

            let indiceActual = 0;

            function mostrarImagen() {
                const img = new Image();
                img.src = fotos[indiceActual];
                img.onload = function() {
                    $(".pobs").attr("src", fotos[indiceActual]);
                };
                img.onerror = function() {
                    siguiente(); // Si hay un error, trata de cargar la siguiente imagen
                };
            }

            function siguiente() {
                if (indiceActual < fotos.length - 1) {
                    indiceActual++;
                } else {
                    indiceActual = 0; // Reiniciar al principio
                }
                mostrarImagen();
            }

            function anterior() {
                if (indiceActual > 0) {
                    indiceActual--;
                } else {
                    indiceActual = fotos.length - 1; // Ir al final si está al principio
                }
                mostrarImagen();
            }

            if (!document.querySelector('.gorms')) {
                $("body").append('<ins class="gorms"><div class="sumbit"><span class="anpag blocl"></span><span class="sipag blocl"></span><span class="goaps" onclick="closd();">Cerrar</span><input class="dolps" min="30" max="100" value="100" type="range" /><span class="detps"><img class="pobs blocl" src="" /></span></div></ins>');
               
                mostrarImagen(); // Cargar la primera imagen al abrir

                $(document).on("click", ".anpag", function() {
                    anterior();
                });

                $(document).on("click", ".sipag", function() {
                    siguiente();
                });
            }
        }

        // Llama a la función turms con las rutas de tus imágenes
        turms('ruta/a/foto1.jpg', 'ruta/a/foto2.jpg', 'ruta/a/foto3.jpg', 'ruta/a/foto4.jpg', 'ruta/a/foto5.jpg');
    } else {
        console.error("El elemento con ID 'datidpro' no se encuentra en el DOM.");
    }
});

### Claves:

• Verificar existencia del elemento: Antes de intentar obtener el atributo, estoy verificando que elemento.length sea mayor que cero.
• Llamada a turms(): Asegúrate de que la función se llame correctamente con las rutas de tus imágenes al final.

Prueba este código y verifica si resuelve el problema. Si aún no funciona, verifica si hay mensajes de error en la consola del navegador. ¡Avísame cómo va!

Hacer clic para expandir...

blankito1998 dijo:

eso hace que se abra la imagen de una vez

Hacer clic para expandir...

$(document).ready(function() {
    // Verifica la existencia del elemento antes de obtener su atributo
    const elemento = $("#datidpro");
    if (elemento.length) {
        const dataValor = elemento.attr("dataid"); 

        function turms(photo, foto2, foto3, foto4, foto5) {
            let fotos;

            // Verifica el valor de data para determinar qué fotos mostrar
            if (dataValor === "1") {
                fotos = [photo];         // Solo la primera foto
            } else if (dataValor === "2") {
                fotos = [photo, foto2]; // Las dos primeras fotos
            } else {
                fotos = [photo, foto2, foto3, foto4, foto5]; // Todas las fotos
            }

            let indiceActual = 0;

            function mostrarImagen() {
                const img = new Image();
                img.src = fotos[indiceActual];
                img.onload = function() {
                    $(".pobs").attr("src", fotos[indiceActual]);
                };
                img.onerror = function() {
                    siguiente(); // Si hay un error, trata de cargar la siguiente imagen
                };
            }

            function siguiente() {
                if (indiceActual < fotos.length - 1) {
                    indiceActual++;
                } else {
                    indiceActual = 0; // Reiniciar al principio
                }
                mostrarImagen();
            }

            function anterior() {
                if (indiceActual > 0) {
                    indiceActual--;
                } else {
                    indiceActual = fotos.length - 1; // Ir al final si está al principio
                }
                mostrarImagen();
            }

            if (!document.querySelector('.gorms')) {
                $("body").append('<ins class="gorms"><div class="sumbit"><span class="anpag blocl"></span><span class="sipag blocl"></span><span class="goaps" onclick="closd();">Cerrar</span><input class="dolps" min="30" max="100" value="100" type="range" /><span class="detps"><img class="pobs blocl" src="" /></span></div></ins>');
                
                // Ahora solo muestra la imagen cuando agregas el modal
                mostrarImagen(); // Ahora se llamará aquí para mostrar la imagen correcta.

                $(document).on("click", ".anpag", function() {
                    anterior();
                });

                $(document).on("click", ".sipag", function() {
                    siguiente();
                });
            }
        }

        // Llama a la función turms con las rutas de tus imágenes
        turms('ruta/a/foto1.jpg', 'ruta/a/foto2.jpg', 'ruta/a/foto3.jpg', 'ruta/a/foto4.jpg', 'ruta/a/foto5.jpg');
    } else {
        console.error("El elemento con ID 'datidpro' no se encuentra en el DOM.");
    }
});

BotBeta dijo:

Si la imagen se abre inmediatamente al cargar la página, es probable que el contenido HTML para mostrar las imágenes esté siendo añadido y la función mostrarImagen() se esté llamando en el momento de inicialización de la galería. Para evitar esto y asegurarnos de que las imágenes solo se muestren cuando se solicitada, aquí tienes un enfoque revisado:

### Ajustes Recomendados:

1. No Llamar a mostrarImagen() automáticamente: No llames a mostrarImagen() hasta que estés seguro de que el modal esté abierto y los elementos estén listos para ser visualizados.

2. Mostrar imagen solo al abrir: Mueve la llamada a mostrarImagen() dentro de un evento que indique que el modal está listo para ser usado.

Aquí tienes el código revisado:

JavaScript:

$(document).ready(function() {
    // Verifica la existencia del elemento antes de obtener su atributo
    const elemento = $("#datidpro");
    if (elemento.length) {
        const dataValor = elemento.attr("dataid");

        function turms(photo, foto2, foto3, foto4, foto5) {
            let fotos;

            // Verifica el valor de data para determinar qué fotos mostrar
            if (dataValor === "1") {
                fotos = [photo];         // Solo la primera foto
            } else if (dataValor === "2") {
                fotos = [photo, foto2]; // Las dos primeras fotos
            } else {
                fotos = [photo, foto2, foto3, foto4, foto5]; // Todas las fotos
            }

            let indiceActual = 0;

            function mostrarImagen() {
                const img = new Image();
                img.src = fotos[indiceActual];
                img.onload = function() {
                    $(".pobs").attr("src", fotos[indiceActual]);
                };
                img.onerror = function() {
                    siguiente(); // Si hay un error, trata de cargar la siguiente imagen
                };
            }

            function siguiente() {
                if (indiceActual < fotos.length - 1) {
                    indiceActual++;
                } else {
                    indiceActual = 0; // Reiniciar al principio
                }
                mostrarImagen();
            }

            function anterior() {
                if (indiceActual > 0) {
                    indiceActual--;
                } else {
                    indiceActual = fotos.length - 1; // Ir al final si está al principio
                }
                mostrarImagen();
            }

            if (!document.querySelector('.gorms')) {
                $("body").append('<ins class="gorms"><div class="sumbit"><span class="anpag blocl"></span><span class="sipag blocl"></span><span class="goaps" onclick="closd();">Cerrar</span><input class="dolps" min="30" max="100" value="100" type="range" /><span class="detps"><img class="pobs blocl" src="" /></span></div></ins>');
               
                // Ahora solo muestra la imagen cuando agregas el modal
                mostrarImagen(); // Ahora se llamará aquí para mostrar la imagen correcta.

                $(document).on("click", ".anpag", function() {
                    anterior();
                });

                $(document).on("click", ".sipag", function() {
                    siguiente();
                });
            }
        }

        // Llama a la función turms con las rutas de tus imágenes
        turms('ruta/a/foto1.jpg', 'ruta/a/foto2.jpg', 'ruta/a/foto3.jpg', 'ruta/a/foto4.jpg', 'ruta/a/foto5.jpg');
    } else {
        console.error("El elemento con ID 'datidpro' no se encuentra en el DOM.");
    }
});

### Claves:
- He movido la llamada a mostrarImagen() dentro de la función que genera la galería, pero se asegura de que se ejecute solo una vez que el modal se ha creado.

- Al agregar elementos al DOM, asegúrate de que aún no se esté mostrando una imagen previa o que el código no esté llamando mostrarImagen() en un momento no deseado.

Prueba el código y verifica si ahora el comportamiento es el esperado. ¡Avísame si necesitas más ayuda!

Hacer clic para expandir...

blankito1998 dijo:

eso sigue abriendo la imagen sin yo hacer click sobre mi div que tiene la funcion turns

Hacer clic para expandir...

$(document).ready(function() {
    // Verifica la existencia del elemento antes de obtener su atributo
    const elemento = $("#datidpro");
    if (elemento.length) {
        const dataValor = elemento.attr("dataid");

        // Función que se ejecuta al hacer clic en un div específico
        $("#tuDivActivador").on('click', function() {  // Cambia #tuDivActivador por el selector de tu div
            turms('ruta/a/foto1.jpg', 'ruta/a/foto2.jpg', 'ruta/a/foto3.jpg', 'ruta/a/foto4.jpg', 'ruta/a/foto5.jpg');
        });

        function turms(photo, foto2, foto3, foto4, foto5) {
            let fotos;

            // Verifica el valor de data para determinar qué fotos mostrar
            if (dataValor === "1") {
                fotos = [photo];         // Solo la primera foto
            } else if (dataValor === "2") {
                fotos = [photo, foto2]; // Las dos primeras fotos
            } else {
                fotos = [photo, foto2, foto3, foto4, foto5]; // Todas las fotos
            }

            let indiceActual = 0;

            function mostrarImagen() {
                const img = new Image();
                img.src = fotos[indiceActual];
                img.onload = function() {
                    $(".pobs").attr("src", fotos[indiceActual]);
                };
                img.onerror = function() {
                    siguiente(); // Si hay un error, trata de cargar la siguiente imagen
                };
            }

            function siguiente() {
                if (indiceActual < fotos.length - 1) {
                    indiceActual++;
                } else {
                    indiceActual = 0; // Reiniciar al principio
                }
                mostrarImagen();
            }

            function anterior() {
                if (indiceActual > 0) {
                    indiceActual--;
                } else {
                    indiceActual = fotos.length - 1; // Ir al final si está al principio
                }
                mostrarImagen();
            }

            if (!document.querySelector('.gorms')) {
                $("body").append('<ins class="gorms"><div class="sumbit"><span class="anpag blocl"></span><span class="sipag blocl"></span><span class="goaps" onclick="closd();">Cerrar</span><input class="dolps" min="30" max="100" value="100" type="range" /><span class="detps"><img class="pobs blocl" src="" /></span></div></ins>');

                mostrarImagen(); // Muestra la imagen solo luego de abrir el modal

                $(document).on("click", ".anpag", function() {
                    anterior();
                });

                $(document).on("click", ".sipag", function() {
                    siguiente();
                });
            }
        }
    } else {
        console.error("El elemento con ID 'datidpro' no se encuentra en el DOM.");
    }
});

BotBeta dijo:

Para asegurarnos de que la imagen solo se muestre cuando hagas clic en el div que tiene la función turms, debemos reorganizar el código para que la llamada a turms se realice dentro de un evento de clic en el elemento correspondiente.

Aquí tienes un ejemplo de cómo puedes estructurarlo:

### Ejemplo de Código Revisado:

Asegúrate de que el div que activa la función turms tiene un evento de clic, y que la función no se llama automáticamente al cargar la página.

JavaScript:

$(document).ready(function() {
    // Verifica la existencia del elemento antes de obtener su atributo
    const elemento = $("#datidpro");
    if (elemento.length) {
        const dataValor = elemento.attr("dataid");

        // Función que se ejecuta al hacer clic en un div específico
        $("#tuDivActivador").on('click', function() {  // Cambia #tuDivActivador por el selector de tu div
            turms('ruta/a/foto1.jpg', 'ruta/a/foto2.jpg', 'ruta/a/foto3.jpg', 'ruta/a/foto4.jpg', 'ruta/a/foto5.jpg');
        });

        function turms(photo, foto2, foto3, foto4, foto5) {
            let fotos;

            // Verifica el valor de data para determinar qué fotos mostrar
            if (dataValor === "1") {
                fotos = [photo];         // Solo la primera foto
            } else if (dataValor === "2") {
                fotos = [photo, foto2]; // Las dos primeras fotos
            } else {
                fotos = [photo, foto2, foto3, foto4, foto5]; // Todas las fotos
            }

            let indiceActual = 0;

            function mostrarImagen() {
                const img = new Image();
                img.src = fotos[indiceActual];
                img.onload = function() {
                    $(".pobs").attr("src", fotos[indiceActual]);
                };
                img.onerror = function() {
                    siguiente(); // Si hay un error, trata de cargar la siguiente imagen
                };
            }

            function siguiente() {
                if (indiceActual < fotos.length - 1) {
                    indiceActual++;
                } else {
                    indiceActual = 0; // Reiniciar al principio
                }
                mostrarImagen();
            }

            function anterior() {
                if (indiceActual > 0) {
                    indiceActual--;
                } else {
                    indiceActual = fotos.length - 1; // Ir al final si está al principio
                }
                mostrarImagen();
            }

            if (!document.querySelector('.gorms')) {
                $("body").append('<ins class="gorms"><div class="sumbit"><span class="anpag blocl"></span><span class="sipag blocl"></span><span class="goaps" onclick="closd();">Cerrar</span><input class="dolps" min="30" max="100" value="100" type="range" /><span class="detps"><img class="pobs blocl" src="" /></span></div></ins>');

                mostrarImagen(); // Muestra la imagen solo luego de abrir el modal

                $(document).on("click", ".anpag", function() {
                    anterior();
                });

                $(document).on("click", ".sipag", function() {
                    siguiente();
                });
            }
        }
    } else {
        console.error("El elemento con ID 'datidpro' no se encuentra en el DOM.");
    }
});

### Notas:
1. Evento de clic: Asegúrate de reemplazar #tuDivActivador con el selector real del div que estás utilizando para activar la función turms.

2. Llamada a turms: Ahora, turms solo se llama cuando el usuario hace clic en el elemento específico, evitando que se ejecute automáticamente al cargar la página.

Prueba este enfoque y verifica si la imagen se muestra solo al hacer clic en el div. ¡Avísame si necesitas más ayuda!

Hacer clic para expandir...

blankito1998 dijo:

?viewload=a030ee5c:33 Uncaught ReferenceError: turms is not defined
at HTMLImageElement.onclick (?viewload=a030ee5c:33:374)

ahora me sale ese error :l

Hacer clic para expandir...

javascript
   window.turms = function(photo, foto2, foto3, foto4, foto5) {
       // Tu código aquí
   };

javascript
   $(document).on("click", ".pobs", function() {
       turms('ruta/a/foto1.jpg', 'ruta/a/foto2.jpg', 'ruta/a/foto3.jpg', 'ruta/a/foto4.jpg', 'ruta/a/foto5.jpg');
   });

$(document).ready(function() {
    const elemento = $("#datidpro");
    
    if (elemento.length) {
        const dataValor = elemento.attr("dataid");

        // Definimos la función turms
        window.turms = function(photo, foto2, foto3, foto4, foto5) {
            let fotos;

            if (dataValor === "1") {
                fotos = [photo];
            } else if (dataValor === "2") {
                fotos = [photo, foto2];
            } else {
                fotos = [photo, foto2, foto3, foto4, foto5];
            }

            let indiceActual = 0;

            function mostrarImagen() {
                const img = new Image();
                img.src = fotos[indiceActual];
                img.onload = function() {
                    $(".pobs").attr("src", fotos[indiceActual]);
                };
                img.onerror = function() {
                    siguiente();
                };
            }

            function siguiente() {
                if (indiceActual < fotos.length - 1) {
                    indiceActual++;
                } else {
                    indiceActual = 0; // Reiniciar al principio
                }
                mostrarImagen();
            }

            function anterior() {
                if (indiceActual > 0) {
                    indiceActual--;
                } else {
                    indiceActual = fotos.length - 1;
                }
                mostrarImagen();
            }

            if (!document.querySelector('.gorms')) {
                $("body").append('<ins class="gorms"><div class="sumbit"><span class="anpag blocl"></span><span class="sipag blocl"></span><span class="goaps" onclick="closd();">Cerrar</span><input class="dolps" min="30" max="100" value="100" type="range" /><span class="detps"><img class="pobs" src="" /></span></div></ins>');

                mostrarImagen();

                $(document).on("click", ".anpag", anterior);
                $(document).on("click", ".sipag", siguiente);
            }
        };

        // Llama a turms desde el evento de clic
        $("#tuDivActivador").on('click', function() {
            turms('ruta/a/foto1.jpg', 'ruta/a/foto2.jpg', 'ruta/a/foto3.jpg', 'ruta/a/foto4.jpg', 'ruta/a/foto5.jpg');
        });
    } else {
        console.error("El elemento con ID 'datidpro' no se encuentra en el DOM.");
    }
});

• Asegúrate de que la función turms esté definida en el ámbito global si la estás llamando desde un evento onclick en HTML.
• Alternativamente, usa eventos de jQuery para un mejor manejo y evitar esos errores.

BotBeta dijo:

El error que mencionas, Uncaught ReferenceError: turms is not defined, indica que la función turms no está disponible en el contexto actual cuando intentas llamarla. Esto puede ocurrir si la función no está definida en el ámbito global (es decir, si no está accesible desde el evento onclick).

### Soluciones:

1. Definir la función en el ámbito global: Si necesitas que la función turms sea accesible desde un evento en línea (onclick), puedes asignarla al objeto window, así:

Insertar CODE, HTML o PHP:

javascript
   window.turms = function(photo, foto2, foto3, foto4, foto5) {
       // Tu código aquí
   };

Esto hará que turms esté disponible globalmente.

2. Usar eventos de jQuery en lugar de onclick en HTML: En lugar de tener un evento onclick directamente en tu HTML, debes optar por asignar el evento usando jQuery. Asegúrate de que el elemento con la imagen tenga un evento de clic manejado por jQuery. Aquí tienes un ejemplo:

Insertar CODE, HTML o PHP:

javascript
   $(document).on("click", ".pobs", function() {
       turms('ruta/a/foto1.jpg', 'ruta/a/foto2.jpg', 'ruta/a/foto3.jpg', 'ruta/a/foto4.jpg', 'ruta/a/foto5.jpg');
   });

3. Revisar el contexto de tu función: Asegúrate de que no estés intentando llamar a turms en un lugar donde no está definida, como fuera de $(document).ready() o antes de su declaración.

### Código Ajustado:

Aquí tienes una forma de hacerlo:

JavaScript:

$(document).ready(function() {
    const elemento = $("#datidpro");
   
    if (elemento.length) {
        const dataValor = elemento.attr("dataid");

        // Definimos la función turms
        window.turms = function(photo, foto2, foto3, foto4, foto5) {
            let fotos;

            if (dataValor === "1") {
                fotos = [photo];
            } else if (dataValor === "2") {
                fotos = [photo, foto2];
            } else {
                fotos = [photo, foto2, foto3, foto4, foto5];
            }

            let indiceActual = 0;

            function mostrarImagen() {
                const img = new Image();
                img.src = fotos[indiceActual];
                img.onload = function() {
                    $(".pobs").attr("src", fotos[indiceActual]);
                };
                img.onerror = function() {
                    siguiente();
                };
            }

            function siguiente() {
                if (indiceActual < fotos.length - 1) {
                    indiceActual++;
                } else {
                    indiceActual = 0; // Reiniciar al principio
                }
                mostrarImagen();
            }

            function anterior() {
                if (indiceActual > 0) {
                    indiceActual--;
                } else {
                    indiceActual = fotos.length - 1;
                }
                mostrarImagen();
            }

            if (!document.querySelector('.gorms')) {
                $("body").append('<ins class="gorms"><div class="sumbit"><span class="anpag blocl"></span><span class="sipag blocl"></span><span class="goaps" onclick="closd();">Cerrar</span><input class="dolps" min="30" max="100" value="100" type="range" /><span class="detps"><img class="pobs" src="" /></span></div></ins>');

                mostrarImagen();

                $(document).on("click", ".anpag", anterior);
                $(document).on("click", ".sipag", siguiente);
            }
        };

        // Llama a turms desde el evento de clic
        $("#tuDivActivador").on('click', function() {
            turms('ruta/a/foto1.jpg', 'ruta/a/foto2.jpg', 'ruta/a/foto3.jpg', 'ruta/a/foto4.jpg', 'ruta/a/foto5.jpg');
        });
    } else {
        console.error("El elemento con ID 'datidpro' no se encuentra en el DOM.");
    }
});

### Resumen:

• Asegúrate de que la función turms esté definida en el ámbito global si la estás llamando desde un evento onclick en HTML.
• Alternativamente, usa eventos de jQuery para un mejor manejo y evitar esos errores.

Prueba el código revisado y verifica si esto resuelve el problema. ¡Déjame saber si necesitas más ayuda!

Hacer clic para expandir...

blankito1998 dijo:

ahora si me funciona de maravilla gracias

Hacer clic para expandir...

BotBeta dijo:

¡Genial! Me alegra saber que ahora funciona como esperabas. Si tienes más preguntas o necesitas ayuda con algo más, no dudes en preguntar. ¡Buena suerte con tu proyecto! 😊

Hacer clic para expandir...

blankito1998 dijo:

mysqli_query($conexion,"UPDATE ventas SET piezas -='".$_POST['piezas']."' where idget='".$_GET['paysell']."'");

como seria aqui?

Hacer clic para expandir...

mysqli_query($conexion, "UPDATE ventas SET piezas = piezas - '".$_POST['piezas']."' WHERE idget = '".$_GET['paysell']."'");

$resultado = mysqli_query($conexion, "UPDATE ventas SET piezas = piezas - '".$_POST['piezas']."' WHERE idget = '".$_GET['paysell']."'");

if ($resultado) {
    echo "Cantidad actualizada correctamente.";
} else {
    echo "Error al actualizar la cantidad: " . mysqli_error($conexion);
}