Uso de Divs en lugar de ul en jquery SlideviewerPro 1.5

Soy un recién llegado a la codificación y he estado utilizando Dreamweaver en base a WYSIWYG. Recientemente he incursionado en Jquery y he logrado implementar el plugin JQuery SlideshowPro en una página. El problema es que las miniaturas se pixelan en la reducción automática y no hay mucho margen para mover las miniaturas individuales como las hay en una lista desordenada.Uso de Divs en lugar de ul en jquery SlideviewerPro 1.5

Me pregunto si hay una forma de asignar manualmente cada miniatura individual en div individuales (para facilitar el uso) y la imagen principal para desplazarse/intercambiar en otra div mientras mantiene el efecto deslizante en la transición de imagen principal solamente . No me preocupa que las miniaturas se deslicen, ya que es poco probable que tenga suficientes miniaturas en cada página para justificar el desplazamiento. En efecto, se mantuvo un intercambio de imágenes inconexo con la transición deslizante.

El código original se puede encontrar en la siguiente página: gcmingati.net/wordpress/wp-content/lab/jquery/svwt/index.html aunque quiero evitar el uso de listas si es posible.

Fuente

2012-02-10 SK101

¿Tiene un enlace a dónde está pasando esto? –

Me gusta esta publicación. Rara vez conseguimos que las personas usen un complemento que describa correctamente el problema y haya demostrado algún esfuerzo para resolverlo. +1 Sin embargo, una muestra de código ayudaría. Intenta publicar en jsfiddle.net y envíanos la URL. –

@ Barry Chapman, no he podido encontrar ejemplos similares, @Diodeus muchas gracias por las respuestas, el código se puede encontrar en la página siguiente: http://www.gcmingati.net/wordpress/wp-content/lab /jquery/svwt/index.html Idealmente, me gustaría las miniaturas en Divs individuales y también la imagen principal (que se intercambiará mediante la transición de diapositivas) también en una div individual para poder controlar el posicionamiento de cada div mediante CSS si es necesario . No he podido publicar el código en jsfiddle ya que ni siquiera sé por dónde empezar a modificar el código para implementar lo que he explicado. – SK101

Si te he entendido correctamente esto debería ser bastante fácil de hacer con una simple modificación en el complemento y un ligero cambio en las imágenes del li.

En primer lugar me gustaría añadir un atributo de datos de la etiqueta de la imagen en el li especificando una dirección URL pulgar separado, por ejemplo:

<li><img alt="Blerg." src="images/blerg.jpg" data-thumb-src="src="images/blerg_thumb.jpg" /></li>

He añadido un atributo de datos HTML 5 llamada de datos-thumb-src para contener la ruta del pulgar.

A continuación, modifique la parte del complemento que crea la parte de las imágenes miniatura de la presentación de diapositivas. He descargado el plugin, alrededor de la línea 99 está esto:

jQuery(this).find("li").each(function(n) { 
    jQuery("div#thumbSlider" + j + " ul").append("<li><a title='" + jQuery(this).find("img").attr("alt") + "' href='#'><img width='"+ thumbsWidth +"' height='"+ thumbsHeight +"' src='" + jQuery(this).find("img").attr("src") + "' /><p class='tmbrdr'>&nbsp;<\/p><\/a><\/li>");      
});

Intercambiar esto para algo como esto:

jQuery(this).find("li").each(function(n) { 
    jQuery("div#thumbSlider" + j + " ul").append("<li><a title='" + jQuery(this).find("img").attr("alt") + "' href='#'><img width='"+ thumbsWidth +"' height='"+ thumbsHeight +"' src='" + jQuery(this).find("img").attr("data-thumb-src") + "' /><p class='tmbrdr'>&nbsp;<\/p><\/a><\/li>");      
});

Así los pulgares src ahora es igual a los datos-thumb-src de la principal imagen.

Si se siente realmente una aventura que podría intentar algo como esto y utilizar el pulgar normal, de forma predeterminada y luego el pulgar personalizado cuando lo necesita sobre una base ad-hoc:

jQuery(this).find("li").each(function(n) { 
    if(jQuery(this).find("img").attr('data-thumb-src')){ 
     var thumb_src = jQuery(this).find("img").attr('data-thumb-src'); 
    }else{ 
     var thumb_src = jQuery(this).find("img").attr("src"); 
    } 
    jQuery("div#thumbSlider" + j + " ul").append("<li><a title='" + jQuery(this).find("img").attr("alt") + "' href='#'><img width='"+ thumbsWidth +"' height='"+ thumbsHeight +"' src='" + thumb_src + "' /><p class='tmbrdr'>&nbsp;<\/p><\/a><\/li>");      
});

Así que si el thumb src existe usarlo, de lo contrario, use el pulgar normal.

Espero que esto ayude.

Fuente

2012-06-16 13:38:42 Smickie

Uso de Divs en lugar de ul en jquery SlideviewerPro 1.5

Respuesta

Cuestiones relacionadas