如何使用移動設備的響應式設計查看頁面時更改jQuery參數？

我正在使用Galleriffic Galley插件（http://www.twospy.com/galleriffic/）在我的網站上顯示幻燈片。如何使用移動設備的響應式設計查看頁面時更改jQuery參數？

許多參數都是在JQuery中定義的。由於我的網站具有響應能力，因此我想更改其中一些參數，以便頁面對於移動設備顯示不同。

在我的頁面的底部我有以下的代碼，我想從18「numThumbs」更改爲6

什麼方式我會做到這一點？

Ty！

<script type="text/javascript"> 
    jQuery(document).ready(function($) { 
     // We only want these styles applied when javascript is enabled 
     $('div.navigation').css({'width' : '100%', 'float' : 'left'}); 
     $('div.content').css('display' , 'block'); 

     // Initially set opacity on thumbs and add 
     // additional styling for hover effect on thumbs 
     var onMouseOutOpacity = 0.67; 
     $('#thumbs ul.thumbs li').opacityrollover({ 
      mouseOutOpacity: onMouseOutOpacity, 
      mouseOverOpacity: 1.0, 
      fadeSpeed:   'fast', 
      exemptionSelector: '.selected' 
     }); 

     // Initialize Advanced Galleriffic Gallery 
     var gallery = $('#thumbs').galleriffic({ 
      delay:      2500, 
      numThumbs:     18, 
      preloadAhead:    10, 
      enableTopPager:   true, 
      enableBottomPager:   true, 
      maxPagesToShow:   7, 
      imageContainerSel:   '#slideshow', 
      controlsContainerSel:  '#controls', 
      captionContainerSel:  '#caption', 
      loadingContainerSel:  '#loading', 
      renderSSControls:   true, 
      renderNavControls:   true, 
      playLinkText:    'Play Slideshow', 
      pauseLinkText:    'Pause Slideshow', 
      prevLinkText:    '&lsaquo; Prev', 
      nextLinkText:    'Next &rsaquo;', 
      nextPageLinkText:   'Next &rsaquo;', 
      prevPageLinkText:   '&lsaquo; Prev', 
      enableHistory:    false, 
      autoStart:     false, 
      syncTransitions:   true, 
      defaultTransitionDuration: 900, 
      onSlideChange:    function(prevIndex, nextIndex) { 
       // 'this' refers to the gallery, which is an extension of $('#thumbs') 
       this.find('ul.thumbs').children() 
        .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end() 
        .eq(nextIndex).fadeTo('fast', 1.0); 
      }, 
      onPageTransitionOut:  function(callback) { 
       this.fadeTo('fast', 0.0, callback); 
      }, 
      onPageTransitionIn:  function() { 
       this.fadeTo('fast', 1.0); 
      } 
     }); 
    }); 
</script>

來源

2013-04-22 Patrick Keane

我會用Modernizr的：http://modernizr.com/ – 2013-04-22 15:56:57

我希望避免這樣的事情！不管怎麼說，多謝拉。我可以試試看！ – 2013-04-22 16:58:26

如果您正在尋找JS解決方案，請嘗試：'if（navigator.userAgent.match（/ mobileplatform/i）'用'Andriod'替換移動平臺等。此外，您可以使用'||'來檢查不同的OS – 2013-04-22 17:06:48

從 - What is the best way to detect a mobile device in jQuery?

你可以嘗試這樣的事：

var isMobile = false; 

    if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) { 
    isMobile = true; 
    } 

    var gallery = $('#thumbs').galleriffic({ 
     delay:      2500, 
     numThumbs:     isMobile ? 18 : 6, 
     preloadAhead:    10.....

來源

2013-04-22 17:14:39

如何使用移動設備的響應式設計查看頁面時更改jQuery參數？

回答

相關問題