0

class="blocker"小さな画面（iPhoneなど）で属性が開くすべてのリンクを防止しようとしています。現時点では、画像はprettyPhotoで開くように設定されています。これは、より大きな画面で保持したいと思います。$(window).width()私はここを調べて、役立つjavascriptのセクションを見つけ（私はjavascriptの初心者です）、 andと$(window).height()コマンドpreventDefを思いつきました。if私はこれを次のようにセクションのステートメントに組み込んでみました<head>（他のjsスクリプトが含まれています）：

<head>
...
    <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
    <script src="scripts/prettyPhoto/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
        function sizeChecker(){
            if ($(window).width() || $(window).height() < 641) {
                function imgHandler() {
                    document.getElementByClass("blocker").addEventListener("click", preventDef, false);
                    }
            }
    </script>
</head>

この<body>セクションでは、次のように画像が一覧表示され、その後にprettyPhotoコードが続きます。

<body>
...
    <div class="centered_image">
        <a href="image1.jpg" rel="prettyPhoto[gallery]" class="blocker">
            <img class="img_style" src="image1.jpg" >
        </a>
    </div>
    <div class="centered_image">
        <a href="image2.jpg" rel="prettyPhoto[gallery]" class="blocker">
            <img class="img_style" src="image3.jpg" >
        </a>
    </div>

    <script type="text/javascript" charset="utf-8">
        $(document).ready(function(){
            $("a[rel^='prettyPhoto']").prettyPhoto();
        });
    </script>
...
</body>

私の目標は、サイトに640x960の画面よりも大きいもの、およびそれよりも小さいすべての画面でprettyphotoプラグインを使用させ、アクティブなリンクなしで画像を表示することです。これは実際に可能ですか？

どうもありがとう

4

2 に答える 2

1

おそらく、高さと幅の両方を別々にチェックする必要があります。「OR」を追加するだけでは、次のことはできません。

$(function() {
    if ($(window).width() < 641 || $(window).height() < 641) {
        $('.blocker').on('click', function() {
            return false;
        });
    }
});

クリックするたびにこれを行う必要はありません。ページの読み込み時に行うだけで、同じ効果が得られます。より良いアイデアは、サイズ変更時にそれを行うか、画面サイズなどを取得するscreen代わりにチェックすることです。window

于 2013-02-14T17:31:24.030 に答える
0

それを行うにはいくつかの方法があります。

最初は、画面サイズを測定し、条件付きでロードすることで、あなたが試したのと少し似ています

        // Arbitrary width
    if ($(window).width() <= 480) {
     //do stuff for small screem
      } else {
     //do stuff for large screen
      }

または、メディアクエリを使用して、コンテンツを含む要素を本文に追加してから、コンテンツを読み取ることができます。これは理解するのが少し複雑ですが、ブレークポイントのcssにあります

@media all and (min-width: 400px) {
    body:after {
        content: 'widescreen';
        display: none;
    }
}

次に、JavaScriptでその要素を探し、それを使って何かを行います。

var size = window.getComputedStyle(document.body,':after').getPropertyValue('content');
    if(size.indexOf("widescreen") !=-1 || null) {
//do something
}

2番目の例は、JeremyKeithのブログからのものです。

http://adactio.com/journal/5429/

于 2013-02-14T19:25:27.657 に答える