3

Shopifyテーマを最初から作成し終えたところです。これは私の最初のレスポンシブデザインであり、1つの大きな問題に期待されるすべてのものに非常に満足しています。

商品ページでは、galleria.ioのフルスクリーン画像ギャラリーを背景として商品画像を表示しています。デスクトップでは、それは非常に素晴らしい経験です。

モバイルデバイスで表示：http：//finegra.in/products/bowden

ただし、モバイルデバイスでは、背景画像によってページの制約が固定されます。つまり、ビューポートに表示されないコンテンツは、ビューを下にスクロールできません。

基本的に、フルスクリーンの背景画像を維持しながら、固定された制約から抜け出す方法を見つけようとしています。

実際には、バックグラウンドとして機能するのではなく、モバイルデバイスのコンテンツの上にフルスクリーンギャラリーを起動しても問題ありません。

これに関する助けをいただければ幸いです。

フルスクリーンの背景ギャラリーのHTMLは次のとおりです。

<div id="galleria">
    <div class="galleria-container notouch fullscreen" style="width: 100%; height: 100%;">
        <div class="galleria-stage">
            <div class="galleria-images" style="position: relative; top: 0px; left: 0px; width: 100%; height: 100%;">
                <div class="galleria-image" style="overflow: hidden; position: absolute; top: 0px; left: 0px; transition: none 0s ease 0s ; opacity: 0; z-index: 0;">
                    <div class="galleria-layer" style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 2;"></div>
                </div>
                <div class="galleria-image" style="overflow: hidden; position: absolute; top: 0px; left: 0px; opacity: 1; width: 1663px; height: 960px; transition: none 0s ease 0s ; z-index: 1;">
                    <div class="galleria-layer" style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 2; display: none;"></div>
                    <img width="1663" height="1108" style="display: block; opacity: 1; min-width: 0px; min-height: 0px; max-width: none; max-height: none; width: 1663px; height: 1108px; position: absolute; top: -74px; left: 0px;" src="http://cdn.shopify.com/s/files/1/0207/2640/products/MG_9400_1024x1024.jpeg?156">
                </div>
            </div>
            <div class="galleria-loader" style="opacity: 1; display: none;"></div>
            <div class="galleria-counter" style="opacity: 1;">
                <span class="galleria-current">1</span>
                /
                <span class="galleria-total">10</span>
            </div>
            <div class="galleria-image-nav">
                <div class="galleria-image-nav-right" style="opacity: 0.5; display: block;"></div>
                <div class="galleria-image-nav-left" style="opacity: 0.5; display: block;"></div>
            </div>
        </div>
        <div class="galleria-thumbnails-container" style="top: 884px; opacity: 1;">
            <div class="galleria-thumb-nav-left disabled"></div>
            <div class="galleria-thumbnails-list" style="overflow: hidden; position: relative;">
                <div class="galleria-thumbnails" style="overflow: hidden; position: relative; width: 180px; height: 10px; left: 0px;">
                    <div class="galleria-image active">
                        <span class="img" style="opacity: 1;"></span>
                    </div>
                    <div class="galleria-image">
                        <span class="img" style="opacity: 1;"></span>
                    </div>
                    <div class="galleria-image">
                        <span class="img" style="opacity: 1;"></span>
                    </div>
                    <div class="galleria-image">
                        <span class="img" style="opacity: 1;"></span>
                    </div>
                    <div class="galleria-image">
                        <span class="img" style="opacity: 1;"></span>
                    </div>
                    <div class="galleria-image">
                        <span class="img" style="opacity: 1;"></span>
                    </div>
                    <div class="galleria-image">
                        <span class="img" style="opacity: 1;"></span>
                    </div>
                    <div class="galleria-image">
                        <span class="img" style="opacity: 1;"></span>
                    </div>
                    <div class="galleria-image">
                        <span class="img" style="opacity: 1;"></span>
                    </div>
                    <div class="galleria-image">
                        <span class="img" style="opacity: 1;"></span>
                    </div>
                </div>
            </div>
            <div class="galleria-thumb-nav-right disabled"></div>
            <div class="galleria-thumbnails-tab" style="visibility: hidden;"></div>
        </div>
        <div class="galleria-info" style="position: absolute; left: -10000px; display: block; opacity: 1;">
            <div class="galleria-info-text" style="width: 1623px;">
                <div class="galleria-info-title" style="display: none;"></div>
                <div class="galleria-info-description">BOWDEN</div>
            </div>
        </div>
        <div class="galleria-tooltip" style="opacity: 0;"></div>
    </div>
</div>
</div>

そのためのCSSは次のとおりです。

#galleria {
    background: none repeat scroll 0 0 #FFFFFF;
    position: relative;
    z-index: 1;
}

.galleria-container {
    height: 100%;
    left: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
}
.galleria-container {
    background: none repeat scroll 0 0 #FFFFFF;
}
.galleria-container, .galleria-stage, .galleria-images, .galleria-image img, .galleria-image-nav, .galleria-image-nav-left, .galleria-image-nav-right, .galleria-thumbnails-container, .galleria-info, .galleria-tooltip {
    margin: 0;
    padding: 0;
}

.galleria-stage {
    height: 100%;
    position: absolute;
    width: 100%;
}

.galleria-thumbnails-container {
    bottom: 0;
    padding-top: 16px;
    position: absolute;
    width: 100%;
    z-index: 2;
}
4

1 に答える 1

1

オプション1

モバイル デバイスでギャラリーを (バックグラウンドではなく) コンテンツ ブロックとして表示する場合は、メディア クエリを使用して、画面の幅に応じて追加の CSS を読み込むことができます。position: absoluteブロックをフローに戻すには、この追加ファイルの一部を上書きする必要があります。

お気に入り：

<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="/mobile.css" />

または、既存の css ファイルに上書きします。

@media all and (max-width: 1024px) {
    .galleria-container {
        position: relative;
    }

    /* and a lot more CSS ;-) */
}

オプション 2

既存のレイアウトでスクロールバーを表示するには、コンテンツをフローに戻し、親の div 要素の高さを拡張するために、いくつかのposition: absoluteandを置き換える必要があります。float: left|right

html {
        overflow: auto !important;
}

body {
        overflow: visible !important;
}

#info {
    position: relative;
    float: none;
}

#product-details {
    position: relative;     
}

このセットアップをテストしました。iPad/iPhone および IE9+ でスクロールバーが表示されるようになりました。positionただし、値を変更する必要があったため、マージンとオフセットを調整する必要があります

http://stephan.mestrona.net/finegra.in/products/bowden.htmlを参照してください。

于 2013-03-19T11:35:53.707 に答える