Como llamar correctamente a una funcion jquery desde Javascript

[pedromir]

Saludos a tod@s
Le he puesto este titulo a la pregunta porque creo que ahí está el problema, pero no estoy seguro.
Tengo una galería de imágenes y unos enlaces que pinchando sobre ellos me muestra la foto correspondiente, tanto las imágenes como los enlaces están en un array y quiero que al pinchar sobre un enlace, se ejecute una función que además de cambiarme la foto, hasta aquí todo bien, remarque este enlace y desmarque el que estuviera remarcado, esto último lo hago con jQuery, pues el problema es que tengo que pinchar una segunda vez sobre cualquier enlace para que me lo haga, me explico, me carga la página, pincho sobre un enlace y me cambia la foto pero no me remarca el enlace, vuelvo a pinchar y ahora si me lo remarca y ya me funciona perfectamente hasta que cargo la página de nuevo, que me vuelve a hacer lo mismo y no tengo ni idea de porqué ocurre esto

Código Javascript:

function cambiarImgGr(imagen, title) {
 
  var imagenGr= document.getElementById('imgGr') 
  imagenGr.src = "" + imagen +"";
  
  var elemento = document.getElementById('titulo');
  elemento.innerHTML = title; 
 
//código jQuery que pone activo el enlace sobre el que pinchamos y borra el que estaba
$(document).ready(function(){
    
    $("a.galeria").click(function(galeria){
        
        $("a.galeria").removeClass("active");
        $(this).addClass("active")      
    });
});
 
//Con esta función al cargar la página me debería aparecer activo el primer elemento, el que tiene índice [0], pero tampoco  me lo hace, son las dos cosas que me están fallando.
 
 function pedro(){
    if (datos[i]== 0)
    activo = "active galeria";
    else 
    activo = "galeria"; 
    return activo
 }
                        imgId = datos[i][2];
            imagen = "imagesGaleArte/" + imgId + ".jpg";
            title = datos[i][1];                                
            enlaces = datos[i][0];
 
Contenido += '<li><a class="'+pedro()+'" href=\"javascript:cambiarImgGr(\'' + imagen + '\',\'' + title + '\')"/>'+enlaces+'</a></li>';
 

[omarMusic]

Se podría cambiar la línea 33 usando atributos data en vez llamar a la función js desde el href, así:

Contenido += '<li><a class="'+pedro()+'" href="#" data-imagen="' + imagen + '" data-title="' + title + '" />'+enlaces+'</a></li>';

Luego mover la llamada a cambiarImgGr en la línea 10 así:

$("a.galeria").click(function(e){
e.preventDefault();

$("a.galeria").removeClass("active");
$(this).addClass("active")

var imagen = this.getAttribute('data-imagen'); //o con Jquery sería var imagen = $(this).data('imagen');
var title = this.getAttribute('data-title'); //o con Jquery sería var title = $(this).data('title');

cambiarImgGr(imagen, title);
});

Saludos!

[pedromir]

La función cambiarImgGr() entonces quedaría de esta manera

Código Javascript:

function cambiarImgGr(imagen, title) {
 
  var imagenGr= document.getElementById('imgGr') 
  imagenGr.src = "" + imagen +"";
  
  var elemento = document.getElementById('titulo');
  elemento.innerHTML = title; 
 
}
 

Y fuera de la función vendría el jQuery con la llamada a la función cambiarImgGr()

Código Javascript:

$("a.galeria").click(function(e){
         e.preventDefault();
 
     $("a.galeria").removeClass("active");
     $(this).addClass("active")
 
     var imagen = this.getAttribute('data-imagen'); //o con Jquery sería var imagen = $(this).data('imagen');
     var title = this.getAttribute('data-title'); //o con Jquery sería var title = $(this).data('title');
 
     cambiarImgGr(imagen, title);
 });
 

Pues si esto es correcto y lo he hecho todo bien, no funciona, al pinchar en cualquier enlace NO se pone active y la página se va al principio, he quitado de la clase la función pedro y he puesto directamente "galería" y tampoco va

[siddartha23]

La función cambiarImgGr() se puede simplificar bastante con Jquery y en el evento click de a.galeria te falta un punto y coma en la línea 5. Acostúmbrate a usar la consola, seguro que te está marcando algún error....

[pedromir]

La falta del ; no me daba error en la consola pero ya se lo he puesto y sigue igual, no hace nada, lo del atributo getAttribute no lo entiendo muy bien, porque el title no sale del atributo de la imagen, sino de un elemento del array, es otro elemento más.
Con el código inicial, tanto del jQuery como de la función cambiarImgGr(imagen, title) si funcionaba perfectamente, pero la primera vez tenia que pulsar dos veces, para que me hiciera caso

[omarMusic]

con getAttribute puedes acceder al valor de cualquier propiedad de un elemento html, incluso puedes crear tus propios atributos personalizados, por ej:

html:

<input mi_atributo="hola" id="mi_id"/>

js:

var valor = document.getElementById('mi_id').getAttribute('mi_atributo');
console.log(valor); // "hola"

lo habitual es crear esos atributos nuevos con el prefijo data-tu_atributo, tal vez sería conveniente que pusieses "todo" tu código para ver exactamente por que tiene ese comportamiento.

Saludos!

[pedromir]

Los datos salen de un array, con tres elementos, nº de orden, que se convierte en el texto del enlace sobre el que pinchas,
en este caso son numeros, el siguiente elemento que sería la descripción de la imagen, que sería el title aunque aquí no lo
utilizo como tal y el último elemento, que es el nombre de la imagen

Código Javascript:

var datos = new Array();
datos = [
["1","pajaros","mirlo"],
["2","paisajes","sabana"],
 

Entonces no sería más fácil utilizar la función original añadirle index por ejemplo para que al pinchar sobre un enlace saber el indice de ese enlace
y a traves de la otra funcion cambiarImgGr() y utilizando document.getElementById('divRecorrer').className = "active"; poner activo el enlace
sobre el que se ha pinchado, tal como está está ahora la funcion, al pinchar sobre cualquier enlace me pone activo siempre el enlace [0] falta ponerle un this,
para que lo haga sobre si mismo

Código Javascript:

index = datos[i];
 
Contenido += '<li><a id="divRecorrer" class="galeria" href=\"javascript:cambiarImgGr(\'' + imagen + '\',\'' + title + '\',\'' + index + '\')"/>'+enlaces+'</a></li>'; 
 
 
function cambiarImgGr(imagen, title, index) {
 
  var imagenGr= document.getElementById('imgGr') 
  imagenGr.src = "" + imagen +"";
  
  var elemento = document.getElementById('titulo');
  elemento.innerHTML = title; 
 
//Y aquí utilizar el parámetro index, que nos da el Nº de índice y el this para que lo haga sobre el enlace que pinchamos y no sobre el [0]
  document.getElementById('divRecorrer').className = "active";
 
}