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
任何人都可以看到我要去哪裏嗎?謝謝!
我有同樣的情況,非常感謝 –