Coin Slider, Banner animado en Blogger

neiclon

Hola:

Tengo el siguiente blog en blogger: http://seriesybodrios.blogspot.com

Resulta que estoy intentando ponerle el plugin Coin Slider cuyo código de archivos escribo a continuación:

Archivo

El banner funciona casi perfecto. El problema está en que, mientras se carga, aparecen como dos banners, uno debajo del otro, y la verdad es que no se si eso puede tener arreglo u ocurre por que las imágenes miden demasiado.

¿Alguna idea?

Muchas gracias

manu_17

Yo lo acabo de poner en mi blog ahora mismo por probar y la verdad es que está bien guapo. No he tenido problema alguno, lo único "malo" es que para cada imagen tengo que hacer una nueva de un tamaño determinado, pero por lo demás me ha funcionado perfecto.

Te explico cómo lo he hecho. He descargado la última versión de jQuery 1.8.1 y el Coin Slider y he metido los cuatro archivos en una carpeta en Dropbox. En el escritorio de Blogger me fui a Plantilla --> Edición de HTML y ahí he insertado lo siguente después de la etiqueta <head>:

<script src='source del archivo de jquery' type='text/javascript'/></script>
<script src='source del coin-slider-min.js' type='text/javascript'/></script>
<link href='source del coin-slider-styles.css' rel='stylesheet' type='text/css'/>

Después en Diseño --> Añadir un gadget añadí el típico de HTML/Javascript y dentro escribí este código:

<div id='coin-slider'>
    <a href="https://lh4.googleusercontent.com/-cfazI-aG_b4/UDrNwF7pUXI/AAAAAAAAAC0/hck-Sc0qiNk/w377-h226-n-k/sw1.jpg" target="_blank">
        <img src='https://lh4.googleusercontent.com/-cfazI-aG_b4/UDrNwF7pUXI/AAAAAAAAAC0/hck-Sc0qiNk/w377-h226-n-k/sw1.jpg' >
        <span>
            Summer Wars
        </span>
    </a>
	
<a href="https://lh6.googleusercontent.com/-9JmLsDkA_2U/UDttWFFe70I/AAAAAAAAAD0/OjTj-WqysmI/w416-h233-n-k/samurai-champloo.png" target="_blank">
    <img src='https://lh6.googleusercontent.com/-9JmLsDkA_2U/UDttWFFe70I/AAAAAAAAAD0/OjTj-WqysmI/w416-h233-n-k/samurai-champloo.png' >
    <span>
        Samurai Champloo
    </span>
</a>

<a href="https://lh3.googleusercontent.com/-b2Z3gcR66uk/UDuVZbZaWZI/AAAAAAAAAGI/M4tkXsOgZxQ/w558-h314-n-k/Bakuman-anime.jpg" target="_blank">
    <img src='https://lh3.googleusercontent.com/-b2Z3gcR66uk/UDuVZbZaWZI/AAAAAAAAAGI/M4tkXsOgZxQ/w558-h314-n-k/Bakuman-anime.jpg' >
    <span>
        Bakuman
    </span>
</a>

<a href="https://lh3.googleusercontent.com/-7FqVVLSrGYI/UDuc7HUX_sI/AAAAAAAAAHc/bDiXf4kJ7ag/w397-h238-n-k/enigma2.jpg" target="_blank">
    <img src='https://lh3.googleusercontent.com/-7FqVVLSrGYI/UDuc7HUX_sI/AAAAAAAAAHc/bDiXf4kJ7ag/w397-h238-n-k/enigma2.jpg' >
    <span>
        Enigma
    </span>
</a>
</div>


<script type="text/javascript">
    $(document).ready(function() {
        $('#coin-slider').coinslider();
    });
</script>

Se trata de un blog de manga y anime, lo único que hay que modificar son los links de las imágenes y el enlace al cual nos lleva al pinchar, y el texto dentro de cada <span> con la leyenda de la imagen, y con esto a mí me ha funcionado.

2 respuestas
neiclon

#2 La verdad es que creo que era porque las imágenes eran muy grandes. Reduciendo el tamaño conseguía que no apareciera ese "banner doble".

De todas formas al final he decido dejarlo únicamente con 1 sola imagen ya que me volvía muy lenta la navegación... y en móvil ni te cuento.

Pero gracias igualmente

1 respuesta
manu_17

#3 Me alegro de que lo hayas podido solucionar, y gracias a ti por la información del plugin!

neiclon

#2 ¿Oye, por casualidad has probado el plugin en una entrada en particular? Me habría gustado mostrar así algunas fotos dentro de una entrada pero cuando lo intento hacer me aparecen todas las fotos sueltas... es raro, debería funcionar.

1 respuesta
manu_17

#5 Sí lo he probado pero no consigo hacerla funcionar bien dentro de una entrada, me aparece bien el slideshow pero no me salen debajo los cuadrados para seleccionar imagen y tampoco me salen bien los botones para avanzar y retroceder...

Usuarios habituales

  • manu_17
  • neiclon