Ссылка на определенный слайд
Добрый день друзья.
На этом форуме мне уже помогли однажды, и я надеюсь что моя проблема, опять, будет решена. У меня есть яваскрипт с помощью которого осуществляется навигация по сайту: !function($){ var defaults = { sectionContainer: "section", easing: "ease", animationTime: 500, pagination: true, updateURL: false }; /*------------------------------------------------*/ /* Credit: Eike Send for the awesome swipe event */ /*------------------------------------------------*/ $.fn.swipeEvents = function() { return this.each(function() { var startX, startY, $this = $(this); $this.bind('touchstart', touchstart); function touchstart(event) { var touches = event.originalEvent.touches; if (touches && touches.length) { startX = touches[0].pageX; startY = touches[0].pageY; $this.bind('touchmove', touchmove); } event.preventDefault(); } function touchmove(event) { var touches = event.originalEvent.touches; if (touches && touches.length) { var deltaX = startX - touches[0].pageX; var deltaY = startY - touches[0].pageY; if (deltaX >= 50) { $this.trigger("swipeLeft"); } if (deltaX <= -50) { $this.trigger("swipeRight"); } if (deltaY >= 50) { $this.trigger("swipeUp"); } if (deltaY <= -50) { $this.trigger("swipeDown"); } if (Math.abs(deltaX) >= 50 || Math.abs(deltaY) >= 50) { $this.unbind('touchmove', touchmove); } } event.preventDefault(); } }); }; $.fn.onepage_scroll = function(options){ var settings = $.extend({}, defaults, options), el = $(this), sections = $(settings.sectionContainer) total = sections.length, status = "off", topPos = 0, lastAnimation = 0, quietPeriod = 500, paginationList = ""; $.fn.transformPage = function(settings, pos) { $(this).css({ "-webkit-transform": "translate3d(0, " + pos + "%, 0)", "-webkit-transition": "all " + settings.animationTime + "ms " + settings.easing, "-moz-transform": "translate3d(0, " + pos + "%, 0)", "-moz-transition": "all " + settings.animationTime + "ms " + settings.easing, "-ms-transform": "translate3d(0, " + pos + "%, 0)", "-ms-transition": "all " + settings.animationTime + "ms " + settings.easing, "transform": "translate3d(0, " + pos + "%, 0)", "transition": "all " + settings.animationTime + "ms " + settings.easing }); } $.fn.moveDown = function() { var el = $(this) index = $(settings.sectionContainer +".active").data("index"); if(index < total) { current = $(settings.sectionContainer + "[data-index='" + index + "']"); next = $(settings.sectionContainer + "[data-index='" + (index + 1) + "']"); if(next) { current.removeClass("active") next.addClass("active"); if(settings.pagination == true) { $(".onepage-pagination li a" + "[data-index='" + index + "']").removeClass("active"); $(".onepage-pagination li a" + "[data-index='" + (index + 1) + "']").addClass("active"); } $("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, ''); $("body").addClass("viewing-page-"+next.data("index")) if (history.replaceState && settings.updateURL == true) { var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (index + 1); history.pushState( {}, document.title, href ); } } pos = (index * 100) * -1; el.transformPage(settings, pos); } } $.fn.moveUp = function() { var el = $(this) index = $(settings.sectionContainer +".active").data("index"); if(index <= total && index > 1) { current = $(settings.sectionContainer + "[data-index='" + index + "']"); next = $(settings.sectionContainer + "[data-index='" + (index - 1) + "']"); if(next) { current.removeClass("active") next.addClass("active") if(settings.pagination == true) { $(".onepage-pagination li a" + "[data-index='" + index + "']").removeClass("active"); $(".onepage-pagination li a" + "[data-index='" + (index - 1) + "']").addClass("active"); } $("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, ''); $("body").addClass("viewing-page-"+next.data("index")) if (history.replaceState && settings.updateURL == true) { var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (index - 1); history.pushState( {}, document.title, href ); } } pos = ((next.data("index") - 1) * 100) * -1; el.transformPage(settings, pos); } } function init_scroll(event, delta) { deltaOfInterest = delta; var timeNow = new Date().getTime(); // Cancel scroll if currently animating or within quiet period if(timeNow - lastAnimation < quietPeriod + settings.animationTime) { event.preventDefault(); return; } if (deltaOfInterest < 0) { el.moveDown() } else { el.moveUp() } lastAnimation = timeNow; } // Prepare everything before binding wheel scroll el.addClass("onepage-wrapper").css("position","relative"); $.each( sections, function(i) { $(this).css({ position: "absolute", top: topPos + "%" }).addClass("section").attr("data-index", i+1); topPos = topPos + 100; if(settings.pagination == true) { paginationList += "<li><a data-index='"+(i+1)+"' href='#" + (i+1) + "'></a></li>" } }); el.swipeEvents().bind("swipeDown", function(){ el.moveUp(); }).bind("swipeUp", function(){ el.moveDown(); }); // Create Pagination and Display Them if(settings.pagination == true) { $("<ul class='onepage-pagination'>" + paginationList + "</ul>").prependTo("body"); posTop = (el.find(".onepage-pagination").height() / 2) * -1; el.find(".onepage-pagination").css("margin-top", posTop); } if(window.location.hash != "" && window.location.hash != "#1") { init_index = window.location.hash.replace("#", "") $(settings.sectionContainer + "[data-index='" + init_index + "']").addClass("active") $("body").addClass("viewing-page-"+ init_index) if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='" + init_index + "']").addClass("active"); next = $(settings.sectionContainer + "[data-index='" + (init_index) + "']"); if(next) { next.addClass("active") if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='" + (init_index) + "']").addClass("active"); $("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, ''); $("body").addClass("viewing-page-"+next.data("index")) if (history.replaceState && settings.updateURL == true) { var href = window.location.href.substr(0,window.location.href.indexOf('#')) + "#" + (init_index); history.pushState( {}, document.title, href ); } } pos = ((init_index - 1) * 100) * -1; el.transformPage(settings, pos); }else{ $(settings.sectionContainer + "[data-index='1']").addClass("active") $("body").addClass("viewing-page-1") if(settings.pagination == true) $(".onepage-pagination li a" + "[data-index='1']").addClass("active"); } if(settings.pagination == true) { $(".onepage-pagination li a").click(function (){ var page_index = $(this).data("index"); if (!$(this).hasClass("active")) { current = $(settings.sectionContainer + ".active") next = $(settings.sectionContainer + "[data-index='" + (page_index) + "']"); if(next) { current.removeClass("active") next.addClass("active") $(".onepage-pagination li a" + ".active").removeClass("active"); $(".onepage-pagination li a" + "[data-index='" + (page_index) + "']").addClass("active"); $("body")[0].className = $("body")[0].className.replace(/\bviewing-page-\d.*?\b/g, ''); $("body").addClass("viewing-page-"+next.data("index")) } pos = ((page_index - 1) * 100) * -1; el.transformPage(settings, pos); } if (settings.updateURL == false) return false; }); } $(document).bind('mousewheel DOMMouseScroll', function(event) { event.preventDefault(); var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail; init_scroll(event, delta); }); return false; } }(window.jQuery); Подскажите пожалуйста, как создать ссылку на оплетенный слайд? Сейчас навигация осуществляется путем скролла или нажатием на кнопки справа. Мне бы хотел, скажем, указать ссылку и при нажатии пользователь автоматически переходил на указанную страницу Демо сдесь: http://www.onextrapixel.com/2013/09/...ne-5s-website/ Спасибо. |
и код страницы (стили не буду описывать, они: как я понял, не нужны):
</head> <body class="demo1"> <div class="nav-top clearfix"> <span style="float:left;"><a class="nav-icon icon-th" href="#"><span>тест</span></a></span> <span class="right"><a class="nav-icon icon-th" href="#"><span>тест</span></a></span> <span class="right"><a class="nav-icon icon-left" href="#"><span>тест</span></a></span> </div> <div class="main"> <section class="page1" > <div class="text_b">Тест</div> </section> <section class="page2"> <div class="page_container"> Тест </div> </section> <section class="page3"> Тест </div> </section> </div> <script type="text/javascript"> $(".main").onepage_scroll({ sectionContainer: "section" }); </script> </body> </html> |
Часовой пояс GMT +3, время: 14:16. |