Jump to content

AYUDA popup con javascript (magnific popup)


Recommended Posts

Hola!

lo que pasa es que no he podido crear ninguna página usando este popup http://dimsemenov.com/plugins/magnific-popup/

no entiendo por qué! bajo el .js y el .css de la página https://github.com/dimsemenov/Magnific-Popup/tree/master/dist

y hago una pagina con solo una foto para ver si me funciona y no pasa nada de nada.

Quien me puede ayudar para que funcione por favor, un codigo de lo más simple pero que funcione para que yo después lo cambie.

en youtube hay un tutorial pero se ve super mal y ni se nota que hace el loco.

 

El código html que tengo y no me funciona es este:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="magnific-popup.css" />
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<a class="image-popup-vertical-fit" href="http://farm9.staticflickr.com/8241/8589392310_7b6127e243_b.jpg" title="Caption. Can be aligned it to any side and contain any HTML.">
</a>
<script type="text/javascript">
$('.image-popup-vertical-fit').magnificPopup({
type: 'image'
});
</script>
</body>
</html>
se supone que con eso tendria que salir la foto en un popup cuando uno le hace click y no pasa nada AYUDA POR FAVOR
(los archivos los tengo todos en una misma carpeta)
Link to comment
Share on other sites

Te dejo un ejemplo que hice man : http://jsfiddle.net/robertrozas/b358R/

 

Saludos :tontotv:

 

Gracias AshWilliams pero aún no hay caso jajajaja mira, copie y pegué tu código y no pasa na!

mira:

 

 

 

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="magnific-popup.css" />
</head>
<body>
</a>
<script type="text/javascript">
$(document).ready(function(){
$('.image-popup-vertical-fit').magnificPopup({
type: 'image',
closeOnContentClick: true,
mainClass: 'mfp-img-mobile',
image: {
verticalFit: true
}
});
});
</script>
<script type="text/javascript" src="jquery.magnific-popup.js"></script>
<script type="text/javascript" src="jquery-ui-1.9.2.min.js"></script>
</body>
</html>
Con eso debería verse y no lo hace, cachai por qué podría ser?
Link to comment
Share on other sites

Mira métete al fuente de la página(en el navegador, botón derecho, Ver Código Fuente) y vas a ver algo similar a lo que me muestras; sin embargo vcas a ver como links al css y a los js, haz click sobre ellos y ve cual te falta o está mal enrutado ;)

 

Saludos :krider:

Link to comment
Share on other sites

amigo, incluya los recursos que aparecen en la documentación, estas importando jquery-ui, cuando debería ser jquery solo, y además en el orden incorrecto.

<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="magnific-popup/magnific-popup.css"> 

<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

<!-- Magnific Popup core JS file -->
<script src="magnific-popup/jquery.magnific-popup.js"></script>  
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...