5

はじめに:
これは、マグニフィック ポップアップを適切に作成する方法について、初心者のアマチュア デザイナー志望者からの質問です。だから、これは少し初心者に聞こえるかもしれませんが、それは私が初心者だからです.

知り
たいこと: 完全な HTML 構造、スクリプトを配置する場所、必要なスクリプトを含む Magnific Popup の作成方法を知りたい。

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 のドキュメントには、私が理解できないことがたくさんありますが、それらは関係ないと思います。

誰かが親切にこの質問を手伝ってくれることを願っています.

関連するクエリ:
マグニフィック ポップアップ アニメーションを動作させることができません ポップアップが表示されない (マグニ
フィック ポップアップを使用)

再度、感謝します！あなたの考えを本当に感謝します！

4

2 に答える 2

0

.js ファイル ソースのバックスラッシュの前に「http:」を入れてみてください。また、次のように、新しいバージョンの jQuery を使用してみてください。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> </ script>
于 2013-07-01T07:16:01.700 に答える