0

このサイトで「Megafolio」jQuery プラグイン ( http://codecanyon.net/item/megafolio-gallery-jquery-plugin/980161 ) を使用しています: http://www.playwinterpark.com/activity_directory_summer.html。いくつかの画像の後（または前）にランダムにいくつかの本当に興味深い空白を作成する最小のモバイルサイズ変更まで、すべてが完全に機能します（つまり、「サイクリング」と「ボート」の間「ゴルフ」と「ハイキング」の間。誰かがこの問題に対処しましたか前?そして最も重要なことに、どうすればこれを解決できますか?!何でも役立ちます.私のコードは以下のとおりです.

前もって感謝します！

画像CSS:

.cell1x1, .cell1x2, .cell2x1, .cell2x2 {
background-color: #FFFFFF;
overflow: hidden;

}

ポートフォリオスクリプトオプション

<script type="text/javascript">

            $(document).ready(function() {

                <!--    PORTFOLIO   -->
                 $("#products").portfolio({ 
                    <!-- GRID SETTINGS -->
                    gridOffset:6,               <!-- Manual Right Padding Offset for 100% Width -->
                    cellWidth:150,                      <!-- The Width of one CELL in PX-->
                    cellHeight:150,                     <!-- The Height of one CELL in PX-->
                    cellPadding:6,                      <!-- Spaces Between the CELLS -->
                    entryProPage:30,                        <!-- The Max. Amount of the Entries per Page, Rest made by Pagination -->

                    <!-- CAPTION SETTING -->
                    captionOpacity:75,

                    <!-- FILTERING -->
                    filterList:"#portfolio-filter",     <!-- Which Filter is used for the Filtering / Pagination -->
                    title:"#selected-filter-title",     <!-- Which Div should be used for showing the Selected Title of the Filter -->                                              
                    <!-- Page x from All Pages -->
                    pageOfFormat:"Page #n of #m",       <!-- The #n will be replaced with the actual Item Nr., #m will be replaced with the amount of all items in the filtered Gallery-->                      
                    <!-- Social Settings-->
                    showGoogle:"no",                    <!-- Show The Social Buttons ...-->
                    showFB:"no",
                    showTwitter:"no",
                    urlDivider:"?",                     <!-- What is the Divider in the Url to add the Variables, Filter and Image ID . Impotant for WordPress i.e. Social will share this link with this divider -->

                    showEmail:"no",                         <!-- ADD EMAIL TO LINK ALSO TO THE LIGHTBOX  -->
                    emailLinkText:"Email to Friend",
                    emailBody:"mailto:email@echoecho.com?body=I found some great File here #url",   <!-- The #url will be replaced with the url of the image -->
                    emailUrlCustomPrefix:"http://www.themepunch.com/",                              <!-- Use this if you wish a Custom Prefix to Link Path -->                      
                    emailUrlCustomSuffix:"?ref=...",                                                <!-- Use This if you wish to use a Custtom Suffix for Link Path -->


                    <!-- BACKGROUND -->
                    backgroundHolder:"#main-background",
                    backgroundSlideshow:0
                })  





        });

4

1 に答える 1

0

html に画像がハードコードされているので、すべての画像の幅を 100% にするモバイル用の mediaQuery を配置することをお勧めします。次のようなものです。

 @media only screen and (max-width : 480px) {
   /* Smartphone view: 1 tile */
   .catall img {
      width: 100%;
   }
}
于 2013-10-14T19:02:41.557 に答える