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.co...magnific-popup/


no entiendo por qué! bajo el .js y el .css de la página https://github.com/d...ree/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.staticf...b6127e243_b.jpg" title="Caption. Can be aligned it to any side and contain any HTML.">

<img src="http://farm9.staticf...b6127e243_s.jpg" width="75" height="75">

</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

Has probado con alguna imagen que no esté en una url fuera de tu servidor?

 

http://dimsemenov.com/plugins/magnific-popup/documentation.html#initializing_popup

Sigue esos pasos, a prueba de weones... cuando uno implementa algo, debe leer la documentación.

 

De todas formas te falta la inicialización del "popup" (no es un popup).

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

Edited by RALCN
Link to comment
Share on other sites

te falta el agregar el plugin, solo tienes jquery y el css

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

<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

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

Ahí agregué el plugin y la inicialización y aún na que na ):

 

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.magnific-popup.js"></script>
<script type="text/javascript" src="zepto.js"></script>
<link rel="stylesheet" type="text/css" href="magnific-popup.css" />
</head>
<body>
<a class="test-popup-link" href="asdf.jpg">Open popup</a>
<script type="text/javascript">
$(document).ready(function() {
$('.test-popup-link').magnificPopup({type:'image'});
});
</script>
</body>
</html>
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...