1

Hola buen dia tengo un problema con la instalacion de este plugin.

Acá esta el tutorial que estoy utilizando: vegas

Y así es como lo tengo:

$(document).ready(function() {
  var imagecollection = [{
      src: 'https://i.sstatic.net/oURrw.png'
    },
    {
      src: 'http://i.imgur.com/SZPjHwz.jpg'
    },
    {
      src: 'https://i.sstatic.net/oURrw.png'
    },
    {
      src: 'https://pbs.twimg.com/media/Cg0x8vnXEAEB2Le.jpg'
    }
    /* Slideshow not working? Check your image links. */
  ];

  $("#ShowSlideShowHere").vegas({
    slides: imagecollection,
    transition: 'fade',
    preloadImage: true,
    timer: true,
    shuffle: true,
    delay: 5000,
    animation: 'kenburns',
    cover: true
  });
});
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.4.0/vegas.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.4.0/vegas.min.js"></script>
  <script type="text/javascript" src="js/scripts.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>

<body>
  <div style="height:100vh">
    <div id="ShowSlideShowHere" style="height:100vh">sadasdasdas</div>
  </div>

Todas las rutas están correctas ya que probé 1 por 1 las librerías y las imágenes y no hay caso, queda en blanco el navegador :/

cualquier ayuda se agradece.

3
  • muestra bien tu post codigo html y jquery en un snippet. que no se entiende bien, quiza te equivocas en cosas de sitaxis o carga de archivos js.Por eso necesito que muestre informacion completa. Commented el 15 mar. 2018 a las 14:51
  • @SebastiánLagosYañez convertida Commented el 15 mar. 2018 a las 15:48
  • +1 porque se ve que está padre la librería Commented el 15 mar. 2018 a las 16:15

2 respuestas 2

1

Yap creo que ya lo solucioné.

En el html esta mal posicionado las librerias
Resulta que para que funcione todo necesitas que las librerías estén ordenadas de cierta manera el html tiene la gracias de cargar desde arriba hacia abajo.
Primero tiene que ir el la libreria de jquery, porque carga todas las funciones y dependencias que usa vegas, por lo tanto depues cargas vegas.min.js para que funcione.
Depues usas el script o en este caso mi script en el html ya que cargue antes las funciones y propiedades de vegas en el archivo vegas.min.js el css de vegas.min.css puede ir antes ya que solo carga estilos nada mas. espero que sirva esta explicación. Saludos.

 
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.4.0/vegas.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.4.0/vegas.js"></script>
<script>
$(document).ready(function() {
var imagecollection = [
    {src: 'https://i.imgflip.com/fmohn.jpg'},
    {src: 'https://i.imgflip.com/fmohn.jpg'},
    {src: 'https://i.imgflip.com/fmohn.jpg'},
    {src: 'https://i.imgflip.com/fmohn.jpg'}
    /* Slideshow not working? Check your image links. */
];

$("#ShowSlideShowHere").vegas({
    slides: imagecollection,
    transition: 'fade',
    preloadImage: true,
    timer: true,
    shuffle: true,
    delay: 5000,
    animation: 'kenburns',
    cover: true
  });
 });
</script>
</head>
<body>
	<div style="height:100vh">
		<div id="ShowSlideShowHere" style="height:100vh">sadasdasdas</div>
	</div>

</body>
</html>

funcionando.

2
  • 1
    Si le explicas el por qué del órden seguro será más útil tu respuesta Commented el 15 mar. 2018 a las 15:50
  • 1
    listo. Editado. Commented el 15 mar. 2018 a las 15:53
0

Loco la verdad eternamente agradecido, 1 semana y seguia con este problema, nunca lo iba a poder resolver si no era por vos. muchisimas gracias y cualquier cosa que pueda ayudarte podes contar conmigo.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.