2012-09-07 25 views
2

所以,我實現了Thomas Kahn的Smooth Div滾動到一個Wordpress主題,並且使用Zenfolio插件顯示來自Zenfolio的滾動圖像畫廊。 Zenfolio插件似乎工作正常,但Smooth Div Scroll似乎不能正常工作。它可以自動滾動,但左側熱點顯示,但沒有響應,右側熱點使滾動過快。你可以檢查代碼,但我的設置非常慢,它不應該移動得太快。平滑Div滾動左側熱點顯示光標,但不滾動和右過度快

下面是我使用的代碼:

HTML:

<div id="feature-slideshow"> 
<div id="makeMeScrollable"> 
    <img src="http://wiltonphotography.zenfolio.com/img/s11/v27/p1106836720-4.jpg?sn=" class="portfolio-img"> 
    <img src="http://wiltonphotography.zenfolio.com/img/s1/v55/p1106836968-4.jpg?sn=" class="portfolio-img"> 
    <img src="http://wiltonphotography.zenfolio.com/img/s2/v58/p1106833686-4.jpg?sn=" class="portfolio-img"> 
    <img src="http://wiltonphotography.zenfolio.com/img/s1/v55/p1106834346-4.jpg?sn=" class="portfolio-img"> 
    <img src="http://wiltonphotography.zenfolio.com/img/s4/v62/p1106834158-4.jpg?sn=" class="portfolio-img"> 
    <img src="http://wiltonphotography.zenfolio.com/img/s2/v61/p1106834196-4.jpg?sn=" class="portfolio-img"> 
    <img src="http://wiltonphotography.zenfolio.com/img/s2/v58/p1106834786-4.jpg?sn=" class="portfolio-img"> 
    <!-- /zfp_photoset --> 
</div> 
</div> 

CSS:

#makeMeScrollable { width:100%; height: 630px; position: relative; } 
#makeMeScrollable div.scrollableArea img { display: none; position: relative; float: left; margin: 0; padding: 0 50px 0 0; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; } 
#makeMeScrollable div.scrollableArea img:first-child { padding-left: 340px; } 

/* Invisible left hotspot */ 
div.scrollingHotSpotLeft { min-width: 50px; width: 10%; height: 100%; background-image: url(img/big_transparent.gif); background-repeat: repeat; background-position: center center; position: absolute; z-index: 200; left: 0; cursor: url(img/cursors/cursor_arrow_left.png), url(img/cursors/cursor_arrow_left.cur),w-resize; } 

/* Visible left hotspot */ 
div.scrollingHotSpotLeftVisible { background-image: url(img/arrow_left.gif); background-color: #fff; background-repeat: no-repeat; opacity: 0.35; -moz-opacity: 0.35; filter: alpha(opacity = 35); zoom: 1; } 

/* Invisible right hotspot */ 
div.scrollingHotSpotRight { min-width: 50px; width: 10%; height: 100%; background-image: url(img/big_transparent.gif); background-repeat: repeat; background-position: center center; position: absolute; z-index: 200; right: 0; cursor: url(img/cursors/cursor_arrow_right.png), url(img/cursors/cursor_arrow_right.cur),e-resize; } 

/* Visible right hotspot */ 
div.scrollingHotSpotRightVisible { background-image: url(img/arrow_right.gif); background-color: #fff; background-repeat: no-repeat; opacity: 0.35; -moz-opacity: 0.35; filter: alpha(opacity = 35); zoom: 1; } 

div.scrollWrapper { position: relative; overflow: hidden; width: 100%; height: 100%; } 
div.scrollableArea { position: relative; width: auto; height: 100%; } 

JS:

<script src="<?php echo get_template_directory_uri(); ?>/js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script> 
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.mousewheel.min.js" type="text/javascript"></script> 
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.smoothdivscroll-1.2-min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     // None of the options are set 
     $("div#makeMeScrollable").smoothDivScroll({ 
      mousewheelScrolling: true, 
      hotSpotScrollingStep: 5, 
      visibleHotSpotBackgrounds: "", 
      autoScrollingMode: "onstart" 
     }); 
    }); 
</script> 

你可以看到這裏的問題: traviswilton.com

任何人都可以看到我要去哪裏嗎?謝謝!

回答

1

原來,Smooth Div Scroll jQuery與我之前使用的Google CSS3 Media Queries JS之間的交互性很差。我嘗試改變級聯順序,但它似乎沒有工作。對於這個網站,CSS3媒體查詢JS是沒有必要的,所以我只是將它剝離出來,而Smooth Div Scroll Smooth工作正常。

這不是一個大問題,但如果Smooth Div Scroll或CSS3 Media Queries處理它,它將會很好。

+0

我有同樣的情況,非常感謝 –