8

私は自分のウェブサイトのスライドショーの背景に特大サイズの jQuery を使用しています。ウェブサイトをレスポンシブにし、css メディア クエリを使用しています。

480px 未満の場合、スクリプトを無効にできるようにしたいと考えています。

実際のスライダーの背景のスクリプトは次のとおりです

$(document).ready(function(){

         jQuery(function($){

            $.supersized({

                // Functionality
                slideshow               :   1,          // Slideshow on/off
                autoplay                :   0,          // Slideshow starts playing automatically
                start_slide             :   1,          // Start slide (0 is random)
                stop_loop               :   0,          // Pauses slideshow on last slide
                random                  :   0,          // Randomize slide order (Ignores start slide)
                slide_interval          :   3000,       // Length between transitions
                transition              :   6,          // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
                transition_speed        :   1000,       // Speed of transition
                new_window              :   1,          // Image links open in new window/tab
                pause_hover             :   0,          // Pause slideshow on hover
                keyboard_nav            :   1,          // Keyboard navigation on/off
                performance             :   1,          // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
                image_protect           :   1,          // Disables image dragging and right click with Javascript

                // Size & Position                         
                min_width               :   0,          // Min width allowed (in pixels)
                min_height              :   0,          // Min height allowed (in pixels)
                vertical_center         :   1,          // Vertically center background
                horizontal_center       :   1,          // Horizontally center background
                fit_always              :   0,          // Image will never exceed browser width or height (Ignores min. dimensions)
                fit_portrait            :   1,          // Portrait images will not exceed browser height
                fit_landscape           :   0,          // Landscape images will not exceed browser width

                // Components                           
                slide_links             :   'blank',    // Individual links for each slide (Options: false, 'num', 'name', 'blank')
                thumb_links             :   1,          // Individual thumb links for each slide
                thumbnail_navigation    :   0,          // Thumbnail navigation
                slides                  :   [           // Slideshow Images
                                                    {image : '/img/backgrounds/street-dance-background.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-1.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},
                                                    {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-2.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-2.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},  
                                                    {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-3.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-3.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'},
                                                    {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-1.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-1.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'},
                                                    {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-2.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-2.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'},
                                                    {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-3.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-3.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'},
                                                    {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-1.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-1.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'},
                                                    {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-2.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-2.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'},
                                                    {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-3.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-3.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'}
                                            ],

                // Theme Options               
                progress_bar            :   1,          // Timer for each slide                         
                mouse_scrub             :   0

            });
        });

CSS を使用するだけでこれを簡単に実行できると考えていました。たとえば、メディアクエリで #supersized を display:none として配置する

スクリプトがまだ実行されているため、これは悪い習慣であり、何らかの方法で無効にするのが最善ですか?

4

6 に答える 6

9

他の人が述べたように、使用できるjQueryプラグインはたくさんあります。ただし、使用したいのが単なるバニラjQueryだけの場合は、必要なことを実行することもできます。

jqueryのresizeメソッドを使用して、ウィンドウのサイズを検出できます。

$(window).resize(function() {
   if ($(this).width() > 480) {
      // call supersize method
   }
});

次に、ドキュメントの準備ができたら、ウィンドウの現在のサイズに応じてメソッドを最初に呼び出すか呼び出さないように、必ずサイズ変更ウィンドウを呼び出してください。

$(document).ready(function() {
   $(window).resize();
});

PS>ウィンドウのサイズを変更するたびにこのスクリプトを実行する必要がなく、480ピクセル未満に達した場合にのみ、スクリプトを無効または有効にする必要が生じた後、サイズ変更方法のバインドを解除するためにわずかな変更を加えることができます。

于 2012-11-05T15:20:25.703 に答える
6

screen.width を使用して JavaScript で画面幅を検出し、そこから何をしたいかを判断できます。

if(screen.width < 480) { 
    // do any 480 width stuff here, or simply do nothing
    return;
} else {
    // do all your cool stuff here for larger screens
}

画面サイズが 480 未満の場合は、すべてのアニメーションと実行したくないすべてのコードを else ブロック内にラップします。

注意の言葉として、IE は異なることをする傾向があり、私はテストする IE を持っていないので、そこで screen.width を実行し、必要に応じて違いを調整することをお勧めします。しかし Chrome では、screen.width は 1280 を返します。これは私の画面の正しい幅です。

于 2012-11-05T15:16:40.387 に答える
4

メディア クエリ内でいくつかの css ルールを使用して非表示の div を設定し、それらの css 属性を jQuery でチェックし、それcss()に基づいてスライドショーをオンまたはオフにすることができます。具体的には：

@media all and (max-width: 480px) {
    #testdiv{
        display:none;
    }
}

そしてjs：

if($("#testdiv").css("display") == "none"){
    $.supersized({...});
}

これは基本的に、実際にライブラリを取得せずに Modernizr アプローチを使用していることに注意してください。

于 2012-11-05T15:16:25.557 に答える
0

@Pointy がコメントで指摘したように、modernizr を使用すると、javascript からメディア クエリを呼び出すことができます。modernizr のドキュメントを読む

于 2012-11-05T15:16:32.610 に答える
0

Asad のソリューションが最適であるか、modernizr を使用していると思います。JS や CSS ではなく、単一のファイルにブレークポイント定義 (480px) があるためです。SCSS を使用する場合、変数内のブレークポイントの定義は 1 つだけです。

于 2013-12-03T14:56:55.530 に答える