El lapso generado con jQuery no funciona automáticamente la imagen de Lighbox -- jquery campo con html campo con lightbox camp Relacionados El problema

span generated using jQuery does not autofocus lighbox image


1
vote

problema

Español

Tengo un código jQuery que genera un tramo de lightbox en el menú desplegable. Mi objetivo era mostrar la imagen en el cambio del menú desplegable y podrá hacer clic en la imagen para que la caja de luz se muestre en la pantalla.

El problema en el que estoy llegando a la hora de cambiar el menú desplegable, la imagen muestra, pero la caja de luz requiere hacer doble clic para abrir.

Pensé que fue porque el menú desplegable se ha centrado y la imagen de la caja de luz necesita primero, antes de que se pueda hacer clic.

Una solución es para mí pasar automáticamente el enfoque en la caja de luz, de modo que en el cambio desplegable, la imagen de la caja de luz ya se centre y solo requiere un clic. Sin embargo, desearía no haber perdido el enfoque automáticamente en el desplegable porque puede haber usuarios a los que le gustaría navegar por la caída a través de las flechas de teclado arriba / abajo.

Una cosa que noté es que si tengo el lapso estático en el HTML, este problema no sucede. Mi conjetura es que no es nada con el enfoque, sino que el tramo se crea sobre la marcha. No he encontrado una solución para superar esto, pero me estoy quedando sin ideas. ¿Alguien tiene alguna sugerencia sobre lo que debería estar buscando o manuales que pueda ver para ajustar aún más el código?

Aquí hay un CodePen SAMPE simplificado: https://codepen.io/speedygonzales77/pen/joozjlj < / a>

             if ( (preferred_facility == 'Classroom (laboratory)') && (label == 'BRYAN CAMPUS') ) {             $('.img_link').html('<a data-lightbox="blinn-gallery" data-title="" href="https://www.blinn.edu/_facilities-listing-demo/images/facilities/bryan/800/classroom-laboratory.jpg"><img alt="Classroom (laboratory)" class="img-thumbnail" height="200" src="https://www.blinn.edu/_facilities-listing-demo/images/facilities/bryan/800/classroom-laboratory.jpg" width="300"></a>');           }   
Original en ingles

I have a jQuery code that generates a lightbox span upon drop-down menu change. My goal was to show the image on change of the drop-down menu and be able to click on the image so that the lightbox will show on the screen.

The issue that I'm running into is that when I change the drop-down menu, the image shows, but the lightbox requires double-click to open.

I figured that it was because the drop-down menu has focus and the lightbox image needs focus first, before it can be clickable.

One solution is for me to automatically pass focus to the lightbox, so that on drop-down change the lightbox image has focus already and only requires one click. However, I wish I didn't lose focus automatically from the drop-down because there may be users that will like to navigate the drop-down via keyboard up/down arrows.

One thing that I noticed is that if I have the span static in the HTML, this problem does not happen. My guess is that it's not anything with the focus, but rather the span getting created on-the-fly. I haven't found a solution to overcome this but I'm running out of ideas. Anyone has any suggestions on what I should be looking for or manuals that I can look at to further adjust the code?

Here is a simplified Codepen sampe: https://codepen.io/speedygonzales77/pen/jOOZJLJ

           if ( (preferred_facility == 'Classroom (laboratory)') && (label == 'BRYAN CAMPUS') ) {             $('.img_link').html('<a data-lightbox="blinn-gallery" data-title="" href="https://www.blinn.edu/_facilities-listing-demo/images/facilities/bryan/800/classroom-laboratory.jpg"><img alt="Classroom (laboratory)" class="img-thumbnail" height="200" src="https://www.blinn.edu/_facilities-listing-demo/images/facilities/bryan/800/classroom-laboratory.jpg" width="300"></a>');           } 
        
 
 

Lista de respuestas

1
 
vote

Prueba mi tenedor de pluma de Youy: Elijo actualizar los atributos SRC y HREF, no para reescribir a todo el HTML https://codepen.io/phmmeyer/pen/xxxwomg

   $( document ).ready(function() {  let brianCampusImages = [    {label:"student-center-f-140",image:"https://www.blinn.edu/_facilities-listing-demo/images/facilities/bryan/800/student-center-f-140.jpg"},     {label:"Classroom (laboratory)",image:"https://www.blinn.edu/_facilities-listing-demo/images/facilities/bryan/800/classroom-laboratory.jpg"}  ]  $("#preferred_facility").on("change",function(){   let offset = parseInt($(this).val())   let zone = $("#blinn-gallery-zone");   $(zone)     .find("a")     .attr("href",brianCampusImages[offset].image);      $(zone)     .find("img")     .attr("src",brianCampusImages[offset].image)     .attr("alt",brianCampusImages[offset].label);    setTimeout(function(){     zone.css("display","inline-block")   },500); });   
 

Try my fork of youy pen : I choose to update the src and href attributes, not to rewrite the whole html https://codepen.io/phmmeyer/pen/xxxWOMg

 $( document ).ready(function() {  let brianCampusImages = [    {label:"student-center-f-140",image:"https://www.blinn.edu/_facilities-listing-demo/images/facilities/bryan/800/student-center-f-140.jpg"},     {label:"Classroom (laboratory)",image:"https://www.blinn.edu/_facilities-listing-demo/images/facilities/bryan/800/classroom-laboratory.jpg"}  ]  $("#preferred_facility").on("change",function(){   let offset = parseInt($(this).val())   let zone = $("#blinn-gallery-zone");   $(zone)     .find("a")     .attr("href",brianCampusImages[offset].image);      $(zone)     .find("img")     .attr("src",brianCampusImages[offset].image)     .attr("alt",brianCampusImages[offset].label);    setTimeout(function(){     zone.css("display","inline-block")   },500); }); 
 
 
   
   

Relacionados problema

12  ¿Hay una caja de luz muy ligera disponible? [cerrado]  ( Is there a very light weight lightbox available ) 
Según lo que actualmente representa, esta pregunta no es un buen ajuste para nuestro Q & Amp; un formato. Esperamos que las...

1  LightBox CSS personalizando  ( Lightbox css customizing ) 
Esta es la hoja de CSS lightbox: ./test/img/cars/bmw/11101/11101x1xTN.png ./test/img/cars/bmw/11101/11101x2xTN.png 8 pero usándolo recibo mis fotos ...

0  Ayuda con hacer una galería separada para múltiples enlaces en la misma página en la caja de luz  ( Help with making a seperate gallery for multiple links on same page in lightbox ) 
Estoy tratando de hacer una galería de imágenes abierta desde un enlace en una caja de luz, tengo los conceptos básicos, y tengo un enlace que abre una galerí...

0  ¿El complemento de la caja de luz más personalizable para jQuery?  ( Most customizable lightbox plug in for jquery ) 
Estoy buscando un complemento de caja de luz JQUERY simplista con características mínimas. debe soportar AJAX / ININLINE / IMÁGENES debe tener un botón c...

0  Lightbox que puede abrir automáticamente dependiendo de la ruta de la URL  ( Lightbox that can open automatically depending on url path ) 
Hay un millón de scripts de superposición modales de tipo lightbox. Pero estoy buscando uno que tenga la capacidad de ser activado automáticamente, dependiend...

0  ¿Son redundantes los scripts de tipo lightbox con pantallas de retina?  ( Are lightbox type scripts redundant with retina screens ) 
¿Es una imagen que se muestra en un script de caja de luz (por ejemplo, PrettyPhoto, lightbox, Thickbox, etc.) afectada por dispositivos de alta relación píxe...

1  Lightbox 2.51 no funciona correctamente en ningún navegador  ( Lightbox 2 51 not working correctly in any browser ) 
respuesta Bueno, todos, encontraron la solución (ya que soy un nuevo usuario, no me permitirá responder mi propia pregunta en menos de 8 horas, lo siento): ...

0  JQUERY AUDIO STOP Una vez que se hace clic en el enlace  ( Jquery audio stop once link is clicked ) 
Tengo dos scripts jquery que se ejecutan: uno para un reproductor de MP3 de audio, y otro para mostrar un video de YouTube en una caja de luz. En este momento...

1  LightBox no funciona en AJAX.UPDATER DIV (prototipo)  ( Lightbox not working in ajax updater div prototype ) 
Estoy usando un Ajax.Updater Llame para producir una sola lista de listas de alquiler en un div. Un menú desplegable de todos los listados de alquiler comie...

2  ¿Puede un iframe emergir una caja de estilo ligero?  ( Can an iframe pop up a lightbox style box ) 
Esta pregunta no se trata de aparecer un iframe dentro de una caja de luz; Más bien, se trata de un iframe en una página que puede lanzar su propia caja de es...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos