Как реализовать или создать всплывающее окно?

Введение:
Это вопрос от любителя-любителя-дизайнера-новичка о том, как правильно создать всплывающее окно. Таким образом, это может звучать немного noobish, но это потому, что я новичок.Как реализовать или создать всплывающее окно?

То, что я хочу знать:
Я хочу знать, как создать Magnific Popup, который включает в себя: полный HTML структуру, где ставить скрипты и какие сценарии нужны.

То, что я сделал, прежде чем я пришел к StackOverflow:
Отработанные бесчисленные часы, пытаясь реализовать Magnific Popup, но безрезультатно. Конечный результат, который у меня есть, - это просто изображение, и когда я нажимаю на него, он перенаправляет меня на ссылку изображения.

Источники:
Это документация: http://dimsemenov.com/plugins/magnific-popup/documentation.html.
Это то, что я пытаюсь создать: http://dimsemenov.com/plugins/magnific-popup/ - в разделе Галереи Лайтбоксов.

HTML Структура Я пытался, так и не удалось:

<!DOCTYPE html> 
<html> 
<head> 
<!-- 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> 
</head> 

<body> 
<div class="popupgallery"> 
    <a href="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_b.jpg" title="The Cleaner"><img src="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_s.jpg" width="75" height="75"/></a> 
    <a href="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_b.jpg" title="Winter Dance"><img src="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_s.jpg" width="75" height="75"/></a> 
    <a href="http://farm9.staticflickr.com/8225/8558295635_b1c5ce2794_b.jpg" title="The Uninvited Guest"><img src="http://farm9.staticflickr.com/8225/8558295635_b1c5ce2794_s.jpg" width="75" height="75"></a> 
    <a href="http://farm9.staticflickr.com/8383/8563475581_df05e9906d_b.jpg" title="Oh no, not again!"><img src="http://farm9.staticflickr.com/8383/8563475581_df05e9906d_s.jpg" width="75" height="75"></a> 
    <a href="http://farm9.staticflickr.com/8235/8559402846_8b7f82e05d_b.jpg" title="Swan Lake"><img src="http://farm9.staticflickr.com/8235/8559402846_8b7f82e05d_s.jpg" width="75" height="75"></a> 
    <a href="http://farm9.staticflickr.com/8235/8558295467_e89e95e05a_b.jpg" title="The Shake"><img src="http://farm9.staticflickr.com/8235/8558295467_e89e95e05a_s.jpg" width="75" height="75"></a> 
    <a href="http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_b.jpg" title="Who's that, mommy?"><img src="http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_s.jpg" width="75" height="75"></a> 
</div> 
<script type="text/javascript"> 
$(document).ready(function() { 

$('.popupgallery').magnificPopup({ 
    type: 'image', 
    closeOnContentClick: true, 
    image: { 
     verticalFit: false 
    } 
}); 

}); 

</script> 
</body> 
</html>

Примечание:
Я также попытался положить в .js файлы перед </body>, опять же, чтобы не производить желаемых результатов.
Я думаю, что чего-то не хватает, я просто не уверен, что. В документации Magnific Popup есть много вещей, которые я не понимаю, но я не думаю, что они актуальны.

Я надеюсь, что кто-то там будет добр, чтобы помочь мне с этим запросом.

Соответствующие запросы:
I can't get magnific-popup animations to work
Pop-up not showing (with magnific-popup)
https://stackoverflow.com/questions/16572007/instructions-on-implementing-magnific-popup

Еще раз спасибо! Я бы очень признателен за ваши мысли!

источник

2013-06-29 chest_nut

Вы получаете какую-либо ошибку в консоли javascript? – Saturnix

- это связанные файлы (css и js) в правом каталоге? Правильно ли путь? – Saturnix

3-й комментарий: согласно документации, которую вы отправили, вам просто нужно использовать 'a href'. Не нужно помещать тег 'img' внутри href. Удалите тег img и убедитесь, что путь href верен (я заметил, что он отличается от пути в img: почему это? Я предполагаю, что это ошибка). Я отправлю ответ, если он будет работать. – Saturnix

Просто добавьте delegate: 'a' к вашей функции jquery и убедитесь, что тег img содержит полное изображение res, в то время как href содержит миниатюру.

$('.popupgallery').magnificPopup({ 
    type: 'image', 
    delegate: 'a', 
    closeOnContentClick: true, 
    image: { 
     verticalFit: false 
    } 
});

источник

2013-06-29 01:33:41 Saturnix

Попробуйте положить «http:» перед обратными косыми чертами для источника .js-файла. Также попробуйте использовать новую версию jQuery, например:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> </ script>

источник

2013-07-01 07:16:01 drake

Как реализовать или создать всплывающее окно?

ответ

Смежные вопросы