Я не могу заставить работать всплывающее окно Magnific (js noob)

Я не могу заставить работать всплывающее окно Magnific (js noob)

Эй, ребята, я ненавижу задавать такие вопросы, но у меня закончились варианты. Я следил за документацией, а также за несколькими видео на Youtube и ветками StackOverflow, но явно что-то упустил. Я попробовал сценарии инициализации, рекомендованные несколькими людьми, но это мне тоже не помогло. В настоящее время, когда я нажимаю на картинку, href работает (он переводит меня на страницу с картинкой), а Magnific — нет.

<div class="container">
    <a id="homegallery1" href="http://placehold.it/250x250"><img src="http://placehold.it/150x150" class="magnificpic" /></a>
</div>

Ссылка CSS:

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

JS-ссылки:

/* JS */
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/magnific-popup.js"></script>

Инициализация сценария:

<!------------------------------
 Script To Call Gallery On Click
-------------------------------->
<script>
    // Example with multiple objects
    $('#homegallery1').magnificPopup({
    items: [
      {
        src: 'http://placehold.it/350x250'
      },
      {
        src: 'http://placehold.it/250x350'
      },
      {
        src: 'http://placehold.it/350x350'
      },
    ],
    gallery: {
      enabled: true
    },
    type: 'image' // this is default type
});
</script>

jsFiddle: http://jsfiddle.net/CSS_Apprentice/4coo0mxn/3/< /а>


javascript jquery magnific-popup
person CSS Apprentice    schedule 26.11.2014    source источник
comment
Получаете ли вы какие-либо сообщения об ошибках в журнале JS, когда вы нажимаете F-12 (показать отладку) в своем браузере?   -  person rodrigogq    schedule 26.11.2014
comment
Ах, извините, я забыл добавить jsFiddle. В jsFiddle есть ошибка, но она все еще там, даже если я удалю свой ‹script› и все из окна js   -  person CSS Apprentice    schedule 26.11.2014
comment
jsFiddle сейчас находится в конце вопроса *   -  person CSS Apprentice    schedule 26.11.2014
comment
Вы ставите класс по ссылке ‹a href...› а не по изображению   -  person Christina    schedule 26.11.2014
comment
Я просто переключил его на изображение, и оно все равно не сработало:/ jsfiddle.net/CSS_Apprentice/ 4coo0mxn/4   -  person CSS Apprentice    schedule 26.11.2014
comment
Нет вы кладете его по ссылке и вы тоже пользуетесь готовым документом   -  person Christina    schedule 26.11.2014
comment
Я сделал, смотрите ссылку в моем последнем комментарии   -  person CSS Apprentice    schedule 26.11.2014

Ответы (2)


arrow_upward
3
arrow_downward

Кажется, ваш скрипт отсутствует, чтобы дождаться готовности документа.

 $(document).ready(function(){

    // jQuery methods go here...
    // try placing your ('#homegallery1').magnificPopup in here

 });

http://www.w3schools.com/jquery/jquery_syntax.asp

person rodrigogq    schedule 26.11.2014

arrow_upward
0
arrow_downward

Проблема заключается в том, что вы смешиваете протоколы http и https при добавлении файлов javascript и css. Также у JSFIDDLE, похоже, проблема с браузером Chrome. См. https://github.com/maksa9/magnific-popup/. Работаю в своем Хроме.

person dm4web    schedule 27.11.2014