Курсор увеличения не работает с Magnific Popup

Хотя у меня абсолютно нулевые способности к JavaScript, мне удалось заставить плагин Magnific Popup работать с помощью этого jsfiddle из этого предыдущий пост о переполнении стека. Однако появляется не курсор увеличения, а указатель в виде руки. Я пробовал несколько методов, но не могу заставить его работать должным образом. Любые решения о том, чего не хватает в коде? (И нет, я не использую IE. Я использую Firefox и понимаю, что курсор увеличения не работает даже на домашней странице Magnific Popup с IE, проблема IE с CSS3, насколько я понимаю.)

(Кроме того, я попытался добавить комментарий к исходному сообщению о переполнении стека, но, поскольку у меня нет 50 очков репутации, я не смог этого сделать, поэтому создаю этот новый вопрос.)

Заранее спасибо.

<a name="nameA">
<div class="nameB">

    <div class="test1">
        <div class="test2">
            <h1>Page Title</h1>

            <a class="image-popup-vertical-fit" href="cat.jpg" title="Caption. Can be aligned it to any side and contain any HTML.">
                <img src="cat.jpg" width="75" height="75">
            </a>
            <a class="image-popup-fit-width" href="http://farm9.staticflickr.com/8379/8588290361_ecf8c27021_b.jpg" title="This image fits only horizontally.">
                <img src="http://farm9.staticflickr.com/8379/8588290361_ecf8c27021_s.jpg" width="75" height="75">
            </a>
            <a class="image-popup-no-margins" href="http://farm4.staticflickr.com/3721/9207329484_ba28755ec4_o.jpg">
                <img src="http://farm4.staticflickr.com/3721/9207329484_ba28755ec4_o.jpg" width="107" height="75">
            </a>
        </div>
    </div>
</div>


$(document).ready(function () {        
$('.image-popup-vertical-fit').magnificPopup({
    type: 'image',
    delegate: 'a',
    closeOnContentClick: true,
    mainClass: 'mfp-img-mobile',
    image: {
        verticalFit: true
    }
});
$('.parent-container').magnificPopup({
    delegate: 'a', // child items selector, by clicking on it popup will open
    type: 'image'
    // other options
});
$('.image-popup-vertical-fit').magnificPopup({
    type: 'image',
    closeOnContentClick: true,
    mainClass: 'mfp-img-mobile',
    image: {
        verticalFit: true
    }

});

$('.image-popup-fit-width').magnificPopup({
    type: 'image',
    closeOnContentClick: true,
    image: {
        verticalFit: false
    }
});

$('.image-popup-no-margins').magnificPopup({
    type: 'image',
    closeOnContentClick: true,
    closeBtnInside: false,
    fixedContentPos: true,
    mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from                left and right side
    image: {
        verticalFit: true
    },
    zoom: {
        enabled: true,
        duration: 300 // don't foget to change the duration also in CSS
    }
});

});


jquery magnific-popup
person Stromfeldt    schedule 25.10.2014    source источник
comment
У magnific-popup есть css, который вы должны добавить, в этой скрипке его нет. Дело в том, что css, а также другие необходимые стили.   -  person Christina    schedule 26.10.2014
comment
@Christina: Я думаю, вы имеете в виду, что увеличительное стекло находится в этом css. Несмотря на это, у меня есть файлы css и js, необходимые для Magnific Popup, в рабочем состоянии (поскольку в противном случае всплывающие окна не будут работать, я принимаю это). Я тоже думал, что все должно работать нормально, но по какой-то причине это не так. Поэтому я собрал решение вместе, как показано ниже в моем ответе на ответ dngege. Спасибо в любом случае.   -  person Stromfeldt    schedule 26.10.2014
comment
Да, значок увеличения, однако css отсутствует в скрипке, на которую вы ссылаетесь. Magnific Popup работает без css, но выглядит странно. Это работает до определенного момента, если вы на самом деле не используете css, который предоставляет разработчик, возникнут проблемы на сенсорных устройствах.   -  person Christina    schedule 27.10.2014

Ответы (1)


arrow_upward
0
arrow_downward

Попробуйте добавить фрагмент CSS следующим образом:

a { cursor: -webkit-zoom-in;  cursor: zoom-in; }
person Pine    schedule 25.10.2014
comment
Я видел этот код в своих поисках (я новичок), но не пробовал, так как решил, что он изменит курсор для всего. Во всяком случае, я попробовал, и он изменил курсор для всего. Поэтому вместо этого я создал новый класс и просто добавил его в каждый экземпляр, где это необходимо. Не самый чистый способ сделать это, но жизнеспособный обходной путь. Спасибо. - person Stromfeldt; 26.10.2014